fix: fixed handling dynamic snap point on mount snapping

gorhom · Jul 1, 2021 · 35b2fcb · 35b2fcb
1 parent 7139e08
commit 35b2fcb
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 28 deletions.
diff --git a/example/src/screens/advanced/DynamicSnapPointExample.tsx b/example/src/screens/advanced/DynamicSnapPointExample.tsx
@@ -13,14 +13,14 @@ const DynamicSnapPointExample = () => {
   const initialSnapPoints = useMemo(() => ['CONTENT_HEIGHT'], []);
 
   // hooks
+  const { bottom: safeBottomArea } = useSafeAreaInsets();
   const bottomSheetRef = useRef<BottomSheet>(null);
   const {
     animatedHandleHeight,
     animatedSnapPoints,
     animatedContentHeight,
     handleContentLayout,
   } = useBottomSheetDynamicSnapPoints(initialSnapPoints);
-  const { bottom: safeBottomArea } = useSafeAreaInsets();
 
   // callbacks
   const handleIncreaseContentPress = useCallback(() => {

diff --git a/example/src/screens/modal/DynamicSnapPointExample.tsx b/example/src/screens/modal/DynamicSnapPointExample.tsx
@@ -12,16 +12,17 @@ import withModalProvider from '../withModalProvider';
 const DynamicSnapPointExample = () => {
   // state
   const [count, setCount] = useState(0);
+  const initialSnapPoints = useMemo(() => ['CONTENT_HEIGHT'], []);
 
   // hooks
+  const { bottom: safeBottomArea } = useSafeAreaInsets();
   const bottomSheetRef = useRef<BottomSheetModal>(null);
   const {
     animatedHandleHeight,
     animatedSnapPoints,
     animatedContentHeight,
     handleContentLayout,
-  } = useBottomSheetDynamicSnapPoints(['CONTENT_HEIGHT']);
-  const { bottom: safeBottomArea } = useSafeAreaInsets();
+  } = useBottomSheetDynamicSnapPoints(initialSnapPoints);
 
   // callbacks
   const handleIncreaseContentPress = useCallback(() => {

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -593,7 +593,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           },
         });
         animatedAnimationState.value = ANIMATION_STATE.STOPPED;
-        animatedCurrentIndex.value = animatedNextPositionIndex.value;
         animatedNextPosition.value = Number.NEGATIVE_INFINITY;
         animatedNextPositionIndex.value = Number.NEGATIVE_INFINITY;
       }
@@ -1416,6 +1415,16 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           nextPosition = animatedSnapPoints.value[_providedIndex];
         }
 
+        runOnJS(print)({
+          component: BottomSheet.name,
+          method: 'useAnimatedReaction::OnMount',
+          params: {
+            _isLayoutCalculated,
+            animatedSnapPoints: animatedSnapPoints.value,
+            nextPosition,
+          },
+        });
+
         /**
          * here we exit method early because the next position
          * is out of the screen, this happens when `snapPoints`
@@ -1426,26 +1435,18 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           nextPosition === animatedClosedPosition.value
         ) {
           isAnimatedOnMount.value = true;
+          animatedCurrentIndex.value = _providedIndex;
           return;
         }
 
-        runOnJS(print)({
-          component: BottomSheet.name,
-          method: 'useAnimatedReaction::OnMount',
-          params: {
-            _isLayoutCalculated,
-            animatedSnapPoints: animatedSnapPoints.value,
-            nextPosition,
-          },
-        });
-
         if (animateOnMount) {
           animateToPosition(nextPosition);
         } else {
           animatedPosition.value = nextPosition;
         }
         isAnimatedOnMount.value = true;
-      }
+      },
+      [_providedIndex, animateOnMount]
     );
 
     /**
@@ -1470,12 +1471,12 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           component: BottomSheet.name,
           method: 'useAnimatedReaction::OnSnapPointChange',
           params: {
-            // animatedSnapPoints: _animatedSnapPoints,
-            // prev: _previousAnimatedSnapPoints,
+            animatedSnapPoints: _animatedSnapPoints,
+            animatedIndex: animatedIndex.value,
+            animatedCurrentIndex: animatedCurrentIndex.value,
             animatedPosition: animatedPosition.value,
             animatedNextPosition: animatedNextPosition.value,
             animatedNextPositionIndex: animatedNextPositionIndex.value,
-            animatedCurrentIndex: animatedCurrentIndex.value,
           },
         });
 
@@ -1510,6 +1511,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       () => animatedKeyboardState.value,
       (_keyboardState, _previousKeyboardState) => {
         if (
+          !isAnimatedOnMount.value ||
           _keyboardState === _previousKeyboardState ||
           /**
            * if new keyboard state is hidden and blur behavior is none, then exit the method
@@ -1695,10 +1697,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
               animatedScrollableState,
               // isScrollableRefreshable,
               // scrollableContentOffsetY,
-              keyboardState,
-              // animatedIndex,
-              // animatedCurrentIndex,
-              // animatedPosition,
+              // keyboardState,
+              animatedIndex,
+              animatedCurrentIndex,
+              animatedPosition,
               animatedContainerHeight,
               animatedSheetHeight,
               animatedHandleHeight,

diff --git a/src/components/bottomSheetView/BottomSheetView.tsx b/src/components/bottomSheetView/BottomSheetView.tsx
@@ -1,4 +1,5 @@
 import React, { memo, useEffect, useCallback, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { SCROLLABLE_TYPE } from '../../constants';
 import { useBottomSheetInternal } from '../../hooks';
@@ -18,11 +19,19 @@ function BottomSheetViewComponent({
   } = useBottomSheetInternal();
 
   // styles
+  const containerStylePaddingBottom = useMemo(() => {
+    const flattenStyle = StyleSheet.flatten(style);
+    const paddingBottom =
+      flattenStyle && 'paddingBottom' in flattenStyle
+        ? flattenStyle.paddingBottom
+        : 0;
+    return typeof paddingBottom === 'number' ? paddingBottom : 0;
+  }, [style]);
   const containerAnimatedStyle = useAnimatedStyle(
     () => ({
-      paddingBottom: animatedFooterHeight.value,
+      paddingBottom: animatedFooterHeight.value + containerStylePaddingBottom,
     }),
-    [style]
+    [containerStylePaddingBottom]
   );
   const containerStyle = useMemo(
     () => [style, containerAnimatedStyle],

diff --git a/src/hooks/useBottomSheetDynamicSnapPoints.ts b/src/hooks/useBottomSheetDynamicSnapPoints.ts
@@ -8,9 +8,10 @@ import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
  * [0, 'CONTENT_HEIGHT', '100%']
  * @param initialSnapPoints your snap point with content height placeholder.
  * @returns {
- *  - animatedSnapPoints: to provided to `BottomSheet` or `BottomSheetModal`.
- *  - animatedHandleHeight: an animated handle height callback node.
- *  - contentProps: props to be spread at `BottomSheetView` component.
+ *  - animatedSnapPoints: an animated snap points to be set on `BottomSheet` or `BottomSheetModal`.
+ *  - animatedHandleHeight: an animated handle height callback node to be set on `BottomSheet` or `BottomSheetModal`.
+ *  - animatedContentHeight: an animated content height callback node to be set on `BottomSheet` or `BottomSheetModal`.
+ *  - handleContentLayout: a `onLayout` callback method to be set on `BottomSheetView` component.
  * }
  */
 export const useBottomSheetDynamicSnapPoints = (
@@ -26,7 +27,7 @@ export const useBottomSheetDynamicSnapPoints = (
     return initialSnapPoints.map(snapPoint =>
       snapPoint === 'CONTENT_HEIGHT' ? contentWithHandleHeight : snapPoint
     );
-  });
+  }, []);
 
   // callbacks
   const handleContentLayout = useCallback(