Skip to content

edgeToEdge bottom margin weird behavior when using "auto" size #185

Open
@efstathiosntonas

Description

@efstathiosntonas

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:

Image

with the prop:

Image

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

Reproducible example repository

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions