[Bug]: keyboardBehavior="interactive" causes the bottom sheet to expand further than maxDynamicContentSize

[souyahia]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

When a bottom sheet has dynamic sizing and keyboard behavior set to interactive, if the bottom sheet is already fully expanded, when opening the keyboard, the bottom sheet will expand further than the maxDynamicContentSize should allow to. Also, this causes to have the onAnimate event fired with a toIndex value equal to -1, even though the bottom sheet is still open, just not at a known snapIndex. This is annoying because in our app, a lot of our logic is based upon the fact that index === -1 = the bottom sheet is closed.

Reproduction steps

Define a BottomSheetModal with :

• a BottomSheetTextInput
• enableDynamicSizing={true}
• maxDynamicContentSize set to a certain value
• keyboardBehavior set to interactive (default value)

Reproduction sample

https://snack.expo.dev/@souyahia-mistral/bottom-sheet---issue-reproduction-template

[souyahia]

As a temporary solution, I patched the lib by adding the fromPosition and toPosition parameters to the onAnimate callback, so that in my app, during the animation event handlers, I base all of my "isOpening" / "isClosing" logic on the position and not on the index of the animate callback.

I then set a value to the topInset prop of the BottomSheetModal to prevent it from expanding further even when the keyboard opens. This works, but it is not ideal because when the user overdrags the modal past the inset, the overflow is hidden and it feels not "polished". But at least it works haha

By the way, I think it would be cool to have the fromPosition and toPosition params available in the onAnimate callback in the lib, I think they are useful.

For those interested, here is the patch :

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index a6f048e7581eefb63c41cf2a383d9f2561e5e7e3..e2043fb122084cf81f170a38c630715b7974980d 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -603,7 +603,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
     // biome-ignore lint/correctness/useExhaustiveDependencies(BottomSheet.name): used for debug only
     const handleOnAnimate = useCallback(
-      function handleOnAnimate(targetIndex: number) {
+      function handleOnAnimate(targetIndex: number, targetPosition: number) {
         if (__DEV__) {
           print({
             component: BottomSheet.name,
@@ -621,7 +621,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         }
 
         if (targetIndex !== animatedCurrentIndex.value) {
-          _providedOnAnimate(animatedCurrentIndex.value, targetIndex);
+          _providedOnAnimate(animatedCurrentIndex.value, targetIndex, animatedPosition.value, targetPosition);
         }
       },
-      [_providedOnAnimate, animatedCurrentIndex]
+      [_providedOnAnimate, animatedCurrentIndex, animatedPosition]
@@ -724,7 +724,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * fire `onAnimate` callback
          */
-        runOnJS(handleOnAnimate)(animatedNextPositionIndex.value);
+        runOnJS(handleOnAnimate)(animatedNextPositionIndex.value, position);
 
         /**
          * start animation
diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
index 2099f2ad04f07e32d4ecb42ddd543394487ba552..19731347fe70cffa8000da45f0d2aa28be0abf3e 100644
--- a/src/components/bottomSheet/types.d.ts
+++ b/src/components/bottomSheet/types.d.ts
@@ -264,9 +264,9 @@ export interface BottomSheetProps
   /**
    * Callback when the sheet about to animate to a new position.
    *
-   * @type (fromIndex: number, toIndex: number) => void;
+   * @type (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => void;
    */
-  onAnimate?: (fromIndex: number, toIndex: number) => void;
+  onAnimate?: (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => void;
   //#endregion
 
   //#region components
diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
index 53ce110de2e1eb09e41a7d5d1a5b60c1922551c6..bbf8a50df96829dff9a269ce4105e863b9cbd833 100644
--- a/src/components/bottomSheetModal/BottomSheetModal.tsx
+++ b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -378,11 +378,11 @@ function BottomSheetModalComponent<T = any>(
     [_providedOnChange]
   );
   const handleBottomSheetOnAnimate = useCallback(
-    (fromIndex: number, toIndex: number) => {
+    (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => {
       nextIndexRef.current = toIndex;
 
       if (_providedOnAnimate) {
-        _providedOnAnimate(fromIndex, toIndex);
+        _providedOnAnimate(fromIndex, toIndex, fromPosition, toPosition);
       }
     },
     [_providedOnAnimate]

[hamonCordova]

Same here

[hamonCordova]

As a temporary solution, I patched the lib by adding the fromPosition and toPosition parameters to the onAnimate callback, so that in my app, during the animation event handlers, I base all of my "isOpening" / "isClosing" logic on the position and not on the index of the animate callback.

I then set a value to the topInset prop of the BottomSheetModal to prevent it from expanding further even when the keyboard opens. This works, but it is not ideal because when the user overdrags the modal past the inset, the overflow is hidden and it feels not "polished". But at least it works haha

By the way, I think it would be cool to have the fromPosition and toPosition params available in the onAnimate callback in the lib, I think they are useful.

For those interested, here is the patch :

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index a6f048e7581eefb63c41cf2a383d9f2561e5e7e3..e2043fb122084cf81f170a38c630715b7974980d 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -603,7 +603,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
     // biome-ignore lint/correctness/useExhaustiveDependencies(BottomSheet.name): used for debug only
     const handleOnAnimate = useCallback(
-      function handleOnAnimate(targetIndex: number) {
+      function handleOnAnimate(targetIndex: number, targetPosition: number) {
         if (__DEV__) {
           print({
             component: BottomSheet.name,
@@ -621,7 +621,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         }
 
         if (targetIndex !== animatedCurrentIndex.value) {
-          _providedOnAnimate(animatedCurrentIndex.value, targetIndex);
+          _providedOnAnimate(animatedCurrentIndex.value, targetIndex, animatedPosition.value, targetPosition);
         }
       },
-      [_providedOnAnimate, animatedCurrentIndex]
+      [_providedOnAnimate, animatedCurrentIndex, animatedPosition]
@@ -724,7 +724,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * fire `onAnimate` callback
          */
-        runOnJS(handleOnAnimate)(animatedNextPositionIndex.value);
+        runOnJS(handleOnAnimate)(animatedNextPositionIndex.value, position);
 
         /**
          * start animation
diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
index 2099f2ad04f07e32d4ecb42ddd543394487ba552..19731347fe70cffa8000da45f0d2aa28be0abf3e 100644
--- a/src/components/bottomSheet/types.d.ts
+++ b/src/components/bottomSheet/types.d.ts
@@ -264,9 +264,9 @@ export interface BottomSheetProps
   /**
    * Callback when the sheet about to animate to a new position.
    *
-   * @type (fromIndex: number, toIndex: number) => void;
+   * @type (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => void;
    */
-  onAnimate?: (fromIndex: number, toIndex: number) => void;
+  onAnimate?: (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => void;
   //#endregion
 
   //#region components
diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
index 53ce110de2e1eb09e41a7d5d1a5b60c1922551c6..bbf8a50df96829dff9a269ce4105e863b9cbd833 100644
--- a/src/components/bottomSheetModal/BottomSheetModal.tsx
+++ b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -378,11 +378,11 @@ function BottomSheetModalComponent<T = any>(
     [_providedOnChange]
   );
   const handleBottomSheetOnAnimate = useCallback(
-    (fromIndex: number, toIndex: number) => {
+    (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => {
       nextIndexRef.current = toIndex;
 
       if (_providedOnAnimate) {
-        _providedOnAnimate(fromIndex, toIndex);
+        _providedOnAnimate(fromIndex, toIndex, fromPosition, toPosition);
       }
     },
     [_providedOnAnimate]

Open a pull request please, it would help!

[souyahia]

I just did : #2271

[gorhom]

thanks @souyahia for documenting this issue. i think this is a valid issue, but i believe that onAnimate should return the expanded index rather than -1.

[gorhom]

https://github.com/gorhom/react-native-bottom-sheet/releases/tag/v5.1.6

[joshhoughton]

Hey @souyahia, apologies for reopening this.

I'm having the exact same issue still after upgrading to v5.1.6. Just wondering if there was anything extra on the usage side to prevent the bottomsheet from extending to fill the entire screen?

[rambuild]

I got the same problem