fix(#2449): adjust next index to the highest detent index when animating by keyboard

Author: gorhom

src/components/bottomSheet/BottomSheet.tsx

@@ -77,6 +77,7 @@ import {
   DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
   DEFAULT_KEYBOARD_BEHAVIOR,
   DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
+  DEFAULT_KEYBOARD_INDEX,
   DEFAULT_KEYBOARD_INPUT_MODE,
   DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
   INITIAL_POSITION,
@@ -552,10 +553,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           return;
         }
 
-        if (animatedAnimationState.get().source === ANIMATION_SOURCE.MOUNT) {
-          isAnimatedOnMount.value = true;
-        }
-
         // callbacks
         if (nextIndex !== animatedCurrentIndex.get()) {
           runOnJS(handleOnChange)(nextIndex, nextPosition);
@@ -568,14 +565,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedCurrentIndex.set(nextIndex);
 
         // reset values
+        animatedContainerHeightDidChange.set(false);
+        isAnimatedOnMount.set(true);
         animatedAnimationState.set({
           status: ANIMATION_STATUS.STOPPED,
           source: ANIMATION_SOURCE.NONE,
           nextIndex: undefined,
           nextPosition: undefined,
           isForcedClosing: undefined,
         });
-        animatedContainerHeightDidChange.value = false;
       },
       [
         handleOnChange,
@@ -642,21 +640,21 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         ) {
           offset = heightWithinContainer;
         }
-
         const { detents } = animatedDetentsState.get();
         let index = detents?.indexOf(position + offset) ?? -1;
 
         /**
          * because keyboard position is not part of the detents array,
-         * we need to keep the index to the current index.
+         * we will need to manually set the index to the highest detent index.
          */
         if (
           index === -1 &&
           status === KEYBOARD_STATUS.SHOWN &&
-          source === ANIMATION_SOURCE.KEYBOARD &&
-          isInTemporaryPosition.get()
+          source === ANIMATION_SOURCE.KEYBOARD
         ) {
-          index = animatedCurrentIndex.value;
+          index =
+            animatedDetentsState.get().highestDetentPosition ??
+            DEFAULT_KEYBOARD_INDEX;
         }
 
         /**
@@ -700,8 +698,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedAnimationState,
         animatedKeyboardState,
         animatedPosition,
-        animatedCurrentIndex,
-        isInTemporaryPosition,
       ]
     );
     /**

src/components/bottomSheet/constants.ts

@@ -20,6 +20,7 @@ const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.interactive;
 const DEFAULT_KEYBOARD_BLUR_BEHAVIOR = KEYBOARD_BLUR_BEHAVIOR.none;
 const DEFAULT_KEYBOARD_INPUT_MODE = KEYBOARD_INPUT_MODE.adjustPan;
 const DEFAULT_ENABLE_BLUR_KEYBOARD_ON_GESTURE = false;
+const DEFAULT_KEYBOARD_INDEX = -998;
 
 // initial values
 const INITIAL_VALUE = Number.NEGATIVE_INFINITY;
@@ -45,6 +46,7 @@ export {
   DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
   DEFAULT_KEYBOARD_INPUT_MODE,
   DEFAULT_ENABLE_BLUR_KEYBOARD_ON_GESTURE,
+  DEFAULT_KEYBOARD_INDEX,
   // layout
   INITIAL_POSITION,
   INITIAL_SNAP_POINT,