fix: allowed keyboard height to be recalculated when it changes (#931)

gorhom · May 2, 2022 · 2f33bbe · 2f33bbe
1 parent bcb8e8f
commit 2f33bbe
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 16 deletions.
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -293,7 +293,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     /**
      * Returns keyboard height that in the root container.
      */
-    const getKeyboardHeightInContainer = useWorkletCallback(() => {
+    const animatedKeyboardHeightInContainer = useDerivedValue(() => {
       /**
        * if android software input mode is not `adjustPan`, than keyboard
        * height will be 0 all the time.
@@ -313,7 +313,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         : Math.abs(
             animatedKeyboardHeight.value - animatedContainerOffset.value.bottom
           );
-    }, [$modal, bottomInset]);
+    }, [
+      $modal,
+      android_keyboardInputMode,
+      bottomInset,
+      animatedKeyboardHeight,
+      animatedContainerOffset,
+    ]);
     //#endregion
 
     //#region state/dynamic variables
@@ -335,7 +341,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
 
       // extended position with keyboard =
       // container height - (sheet height + keyboard height in root container)
-      const keyboardHeightInContainer = getKeyboardHeightInContainer();
+      const keyboardHeightInContainer = animatedKeyboardHeightInContainer.value;
       const extendedPositionWithKeyboard = Math.max(
         0,
         animatedContainerHeight.value -
@@ -362,7 +368,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       }
 
       return SHEET_STATE.OPENED;
-    }, [keyboardBehavior]);
+    }, [
+      animatedClosedPosition,
+      animatedContainerHeight,
+      animatedKeyboardHeightInContainer,
+      animatedPosition,
+      animatedSheetHeight,
+      isInTemporaryPosition,
+      keyboardBehavior,
+    ]);
     const animatedScrollableState = useDerivedValue(() => {
       /**
        * if scrollable override state is set, then we just return its value.
@@ -402,7 +416,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     });
     // dynamic
     const animatedContentHeight = useDerivedValue(() => {
-      const keyboardHeightInContainer = getKeyboardHeightInContainer();
+      const keyboardHeightInContainer = animatedKeyboardHeightInContainer.value;
       const handleHeight = Math.max(0, animatedHandleHeight.value);
       let contentHeight = animatedSheetHeight.value - handleHeight;
 
@@ -457,7 +471,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
        * @link (https://github.com/gorhom/react-native-bottom-sheet/issues/470)
        */
       return Math.max(contentHeight, 0);
-    }, [keyboardBehavior]);
+    }, [
+      animatedContainerHeight,
+      animatedHandleHeight,
+      animatedKeyboardHeightInContainer,
+      animatedKeyboardState,
+      animatedSheetHeight,
+      isInTemporaryPosition,
+      keyboardBehavior,
+    ]);
     const animatedIndex = useDerivedValue(() => {
       const adjustedSnapPoints = animatedSnapPoints.value.slice().reverse();
       const adjustedSnapPointsIndexes = animatedSnapPoints.value
@@ -563,7 +585,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           keyboardState === KEYBOARD_STATE.SHOWN
         ) {
           isInTemporaryPosition.value = true;
-          const keyboardHeightInContainer = getKeyboardHeightInContainer();
+          const keyboardHeightInContainer =
+            animatedKeyboardHeightInContainer.value;
           return Math.max(0, highestSnapPoint - keyboardHeightInContainer);
         }
 
@@ -573,7 +596,19 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
 
         return snapPoints[currentIndex];
       },
-      [keyboardBehavior, keyboardBlurBehavior]
+      [
+        animatedContentGestureState,
+        animatedCurrentIndex,
+        animatedHandleGestureState,
+        animatedHighestSnapPoint,
+        animatedKeyboardHeightInContainer,
+        animatedKeyboardState,
+        animatedPosition,
+        animatedSnapPoints,
+        isInTemporaryPosition,
+        keyboardBehavior,
+        keyboardBlurBehavior,
+      ]
     );
     const handleOnChange = useCallback(
       function handleOnChange(index: number) {
@@ -1063,6 +1098,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedHandleHeight,
         animatedFooterHeight,
         animatedKeyboardHeight,
+        animatedKeyboardHeightInContainer,
         animatedContainerHeight,
         animatedSnapPoints,
         animatedHighestSnapPoint,
@@ -1079,7 +1115,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         failOffsetY: _providedFailOffsetY,
         animateToPosition,
         stopAnimation,
-        getKeyboardHeightInContainer,
         setScrollableRef,
         removeScrollableRef,
       }),
@@ -1097,6 +1132,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedAnimationState,
         animatedKeyboardState,
         animatedKeyboardHeight,
+        animatedKeyboardHeightInContainer,
         animatedSheetState,
         animatedHighestSnapPoint,
         animatedScrollableState,
@@ -1117,7 +1153,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         _providedActiveOffsetY,
         _providedFailOffsetX,
         _providedFailOffsetY,
-        getKeyboardHeightInContainer,
         setScrollableRef,
         removeScrollableRef,
         animateToPosition,

diff --git a/src/components/bottomSheetFooterContainer/BottomSheetFooterContainer.tsx b/src/components/bottomSheetFooterContainer/BottomSheetFooterContainer.tsx
@@ -14,13 +14,13 @@ const BottomSheetFooterContainerComponent = ({
     animatedFooterHeight,
     animatedPosition,
     animatedKeyboardState,
-    getKeyboardHeightInContainer,
+    animatedKeyboardHeightInContainer,
   } = useBottomSheetInternal();
   //#endregion
 
   //#region variables
   const animatedFooterPosition = useDerivedValue(() => {
-    const keyboardHeight = getKeyboardHeightInContainer();
+    const keyboardHeight = animatedKeyboardHeightInContainer.value;
     let footerTranslateY = Math.max(
       0,
       animatedContainerHeight.value - animatedPosition.value
@@ -37,12 +37,12 @@ const BottomSheetFooterContainerComponent = ({
 
     return footerTranslateY;
   }, [
+    animatedKeyboardHeightInContainer,
     animatedContainerHeight,
-    animatedFooterHeight,
-    animatedHandleHeight,
     animatedPosition,
     animatedKeyboardState,
-    getKeyboardHeightInContainer,
+    animatedFooterHeight,
+    animatedHandleHeight,
   ]);
   //#endregion
 

diff --git a/src/contexts/internal.ts b/src/contexts/internal.ts
@@ -55,6 +55,7 @@ export interface BottomSheetInternalContextType
   animatedFooterHeight: Animated.SharedValue<number>;
   animatedHandleHeight: Animated.SharedValue<number>;
   animatedKeyboardHeight: Animated.SharedValue<number>;
+  animatedKeyboardHeightInContainer: Animated.SharedValue<number>;
   animatedScrollableType: Animated.SharedValue<SCROLLABLE_TYPE>;
   animatedScrollableContentOffsetY: Animated.SharedValue<number>;
   animatedScrollableOverrideState: Animated.SharedValue<SCROLLABLE_STATE>;
@@ -66,7 +67,6 @@ export interface BottomSheetInternalContextType
   // methods
   stopAnimation: () => void;
   animateToPosition: AnimateToPositionType;
-  getKeyboardHeightInContainer: () => number;
   setScrollableRef: (ref: ScrollableRef) => void;
   removeScrollableRef: (ref: RefObject<Scrollable>) => void;
 }