diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx index 557c87db8..e21a3ca36 100644 --- a/src/components/bottomSheet/BottomSheet.tsx +++ b/src/components/bottomSheet/BottomSheet.tsx @@ -293,7 +293,7 @@ const BottomSheetComponent = forwardRef( /** * 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( : 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( // 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( } 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( }); // 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( * @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( 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( 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( animatedHandleHeight, animatedFooterHeight, animatedKeyboardHeight, + animatedKeyboardHeightInContainer, animatedContainerHeight, animatedSnapPoints, animatedHighestSnapPoint, @@ -1079,7 +1115,6 @@ const BottomSheetComponent = forwardRef( failOffsetY: _providedFailOffsetY, animateToPosition, stopAnimation, - getKeyboardHeightInContainer, setScrollableRef, removeScrollableRef, }), @@ -1097,6 +1132,7 @@ const BottomSheetComponent = forwardRef( animatedAnimationState, animatedKeyboardState, animatedKeyboardHeight, + animatedKeyboardHeightInContainer, animatedSheetState, animatedHighestSnapPoint, animatedScrollableState, @@ -1117,7 +1153,6 @@ const BottomSheetComponent = forwardRef( _providedActiveOffsetY, _providedFailOffsetX, _providedFailOffsetY, - getKeyboardHeightInContainer, setScrollableRef, removeScrollableRef, animateToPosition, diff --git a/src/components/bottomSheetFooterContainer/BottomSheetFooterContainer.tsx b/src/components/bottomSheetFooterContainer/BottomSheetFooterContainer.tsx index 10e4a6267..0ddd8e01a 100644 --- 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 index 12ec6e501..fd313de29 100644 --- a/src/contexts/internal.ts +++ b/src/contexts/internal.ts @@ -55,6 +55,7 @@ export interface BottomSheetInternalContextType animatedFooterHeight: Animated.SharedValue; animatedHandleHeight: Animated.SharedValue; animatedKeyboardHeight: Animated.SharedValue; + animatedKeyboardHeightInContainer: Animated.SharedValue; animatedScrollableType: Animated.SharedValue; animatedScrollableContentOffsetY: Animated.SharedValue; animatedScrollableOverrideState: Animated.SharedValue; @@ -66,7 +67,6 @@ export interface BottomSheetInternalContextType // methods stopAnimation: () => void; animateToPosition: AnimateToPositionType; - getKeyboardHeightInContainer: () => number; setScrollableRef: (ref: ScrollableRef) => void; removeScrollableRef: (ref: RefObject) => void; }