Description
Before submitting a new issue
- I tested using the latest version of the library, as the bug might be already fixed.
- I tested using a supported version of react native.
- I checked for possible duplicate issues, with possible answers.
Bug summary
Hi @lodev09,
Probably edge (pun intended) case but on some devices the bottom sheet won't respect the navigation bar height thus the bottom part of the sheet is attached at the very bottom of the screen behind the bar.
I know there's no safe way to get the navigation bar height (thanks Android) so I guess we could add a prop to add manual bottom margin / bottom offset.
Example:
@lodev09+react-native-true-sheet+2.0.5.patch
--- a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetDialog.kt
+++ b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetDialog.kt
@@ -54,6 +54,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
var contentHeight = 0
var footerHeight = 0
var maxSheetHeight: Int? = null
+ var autoMarginPx: Int = 0
var edgeToEdge: Boolean = false
set(value) {
@@ -226,7 +227,14 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
is String -> {
when (size) {
- "auto" -> contentHeight + footerHeight
+ "auto" -> {
+ val base = contentHeight + footerHeight
+ return if (edgeToEdge && autoMarginPx > 0) {
+ base + autoMarginPx
+ } else {
+ base
+ }
+ }
"large" -> maxScreenHeight
diff --git a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt
index e946d96..469949c 100644
--- a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt
+++ b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt
@@ -35,6 +35,8 @@ class TrueSheetView(context: Context) :
var initialIndex: Int = -1
var initialIndexAnimated: Boolean = true
+ private var autoMarginPx: Int = 0
+
/**
* Determines if the sheet is being dragged by the user.
*/
@@ -431,4 +433,10 @@ class TrueSheetView(context: Context) :
dismissPromise = promiseCallback
sheetDialog.dismiss()
}
+
+ fun setAutoMarginDp(autoMarginDp: Double) {
+ autoMarginPx = Utils.toPixel(autoMarginDp).toInt()
+ sheetDialog.autoMarginPx = autoMarginPx
+ configureIfShowing()
+ }
}
diff --git a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetViewManager.kt b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetViewManager.kt
index 0ed9b8a..db4cb76 100644
--- a/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetViewManager.kt
+++ b/node_modules/@lodev09/react-native-true-sheet/android/src/main/java/com/lodev09/truesheet/TrueSheetViewManager.kt
@@ -133,6 +133,11 @@ class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
view.setSizes(result.toArray())
}
+ @ReactProp(name = "autoMargin")
+ fun setAutoMargin(view: TrueSheetView, autoMargin: Double) {
+ view.setAutoMarginDp(autoMargin)
+ }
+
companion object {
const val TAG = "TrueSheetView"
}
diff --git a/node_modules/@lodev09/react-native-true-sheet/lib/commonjs/TrueSheet.js b/node_modules/@lodev09/react-native-true-sheet/lib/commonjs/TrueSheet.js
index 5d5720c..6dfebf3 100644
--- a/node_modules/@lodev09/react-native-true-sheet/lib/commonjs/TrueSheet.js
+++ b/node_modules/@lodev09/react-native-true-sheet/lib/commonjs/TrueSheet.js
@@ -187,6 +187,7 @@ class TrueSheet extends _react.PureComponent {
style,
contentContainerStyle,
children,
+ autoMargin,
...rest
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TrueSheetNativeView, {
@@ -215,6 +216,7 @@ class TrueSheet extends _react.PureComponent {
onDragBegin: this.onDragBegin,
onDragChange: this.onDragChange,
onDragEnd: this.onDragEnd,
+ autoMargin: autoMargin,
onContainerSizeChange: this.onContainerSizeChange,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
collapsable: false,
diff --git a/node_modules/@lodev09/react-native-true-sheet/src/TrueSheet.tsx b/node_modules/@lodev09/react-native-true-sheet/src/TrueSheet.tsx
index a9c0eea..d4efc0e 100644
--- a/node_modules/@lodev09/react-native-true-sheet/src/TrueSheet.tsx
+++ b/node_modules/@lodev09/react-native-true-sheet/src/TrueSheet.tsx
@@ -259,9 +259,11 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
style,
contentContainerStyle,
children,
+ autoMargin,
...rest
} = this.props
+
return (
<TrueSheetNativeView
ref={this.ref}
@@ -290,6 +292,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
onDragChange={this.onDragChange}
onDragEnd={this.onDragEnd}
onContainerSizeChange={this.onContainerSizeChange}
+ autoMargin={autoMargin}
>
<View
collapsable={false}
diff --git a/node_modules/@lodev09/react-native-true-sheet/src/TrueSheet.types.ts b/node_modules/@lodev09/react-native-true-sheet/src/TrueSheet.types.ts
index bef5541..a8f5361 100644
--- a/node_modules/@lodev09/react-native-true-sheet/src/TrueSheet.types.ts
+++ b/node_modules/@lodev09/react-native-true-sheet/src/TrueSheet.types.ts
@@ -298,4 +298,11 @@ export interface TrueSheetProps extends ViewProps {
* @platform ios 15+
*/
onDragEnd?: (event: DragEndEvent) => void
+
+ /**
+ * Adds extra margin bottom when sizes is set to 'auto'
+ *
+ * @platform android
+ */
+ autoMargin?: number
}
this checks if edgeToEdge
is true and applies autoMarginPx
by using the autoMargin
(bad naming, could be bottomOffset
😄 ) prop:
<TrueSheet
autoMargin={60}
backgroundColor={theme.special.bgModal}
cornerRadius={theme.spacing.mvs20}
edgeToEdge
name="image-alt"
sizes={['auto']}
>
result without the prop on Samsung S22 A14:
with the prop:
It's more of hack than a fix / or nice to have because:
It seems like the height is not properly calculated on first render (sizes is only ["auto"]), if I do something and trigger a fast refresh it might fix it's height the next time I open it or if the app looses focus eg. to share something, If the sheet is open and then try to share something like a screenshot of the app, when it regains focus the bottom height is fine.
Important: I use TrueSheet in several components, the issue appears only in a component that is rendered on a renderItem
of a FlashList
inside a react-native-tab-view
.
Library version
2.0.5
Environment info
Steps to reproduce
Read above