fix: re-snap to current position when snap points get updated

gorhom · May 27, 2021 · bb8e202 · bb8e202
1 parent 4bc40d9
commit bb8e202
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git a/example/src/components/weather/Weather.tsx b/example/src/components/weather/Weather.tsx
@@ -13,16 +13,11 @@ import { LOCATION_DETAILS_HEIGHT } from '../locationDetails';
 interface WeatherProps {
   animatedPosition: Animated.SharedValue<number>;
   animatedIndex: Animated.SharedValue<number>;
-  snapPoints: number[];
 }
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
 
-const Weather = ({
-  animatedIndex,
-  animatedPosition,
-  snapPoints,
-}: WeatherProps) => {
+const Weather = ({ animatedIndex, animatedPosition }: WeatherProps) => {
   // hooks
   const { colors } = useShowcaseTheme();
   const { bottom: bottomSafeArea } = useSafeAreaInsets();
@@ -55,7 +50,7 @@ const Weather = ({
         },
       ],
     }),
-    [snapPoints, lockedYPosition]
+    [lockedYPosition]
   );
   const containerStyle = useMemo(
     () => [

diff --git a/example/src/screens/integrations/MapExample.tsx b/example/src/screens/integrations/MapExample.tsx
@@ -53,14 +53,17 @@ const MapExample = () => {
   const data = useMemo(() => createLocationListMockData(15), []);
   const poiListSnapPoints = useMemo(
     () => [
-      bottomSafeArea === 0 ? SEARCH_HANDLE_HEIGHT / 2 : bottomSafeArea,
+      bottomSafeArea + SEARCH_HANDLE_HEIGHT,
       LOCATION_DETAILS_HEIGHT + bottomSafeArea,
       '100%',
     ],
     [bottomSafeArea]
   );
   const poiDetailsSnapPoints = useMemo(
-    () => [LOCATION_DETAILS_HEIGHT + bottomSafeArea, SCREEN_HEIGHT],
+    () => [
+      LOCATION_DETAILS_HEIGHT + bottomSafeArea + SEARCH_HANDLE_HEIGHT,
+      '100%',
+    ],
     [bottomSafeArea]
   );
   const mapInitialCamera = useMemo(
@@ -129,7 +132,7 @@ const MapExample = () => {
 
   //#region effects
   useLayoutEffect(() => {
-    poiListModalRef.current?.present();
+    requestAnimationFrame(() => poiListModalRef.current?.present());
   }, []);
   //#endregion
 
@@ -170,7 +173,6 @@ const MapExample = () => {
       <Weather
         animatedIndex={weatherAnimatedIndex}
         animatedPosition={weatherAnimatedPosition}
-        snapPoints={poiListSnapPoints}
       />
       <BottomSheetModal
         ref={poiListModalRef}
@@ -181,6 +183,7 @@ const MapExample = () => {
         handleHeight={SEARCH_HANDLE_HEIGHT}
         topInset={headerHeight}
         enableDismissOnClose={false}
+        enablePanDownToClose={false}
         keyboardBehavior="extend"
         animatedPosition={animatedPOIListPosition}
         animatedIndex={animatedPOIListIndex}

diff --git a/example/src/screens/screens.ts b/example/src/screens/screens.ts
@@ -111,6 +111,7 @@ export const screens = [
         slug: 'Integrations/MapExample',
         getScreen: () => require('./integrations/MapExample').default,
         screenOptions: {
+          headerTintColor: 'black',
           headerTransparent: true,
         },
       },

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -183,6 +183,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       animateOnMount ? -1 : _providedIndex
     );
     const animatedPosition = useSharedValue(INITIAL_POSITION);
+    const animatedNextPosition = useSharedValue(0);
+    const animatedNextPositionIndex = useSharedValue(0);
     //#endregion
 
     //#region conditional variables
@@ -503,6 +505,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
          */
         cancelAnimation(animatedPosition);
 
+        /**
+         * store next position
+         */
+        animatedNextPosition.value = position;
+        animatedNextPositionIndex.value =
+          animatedSnapPoints.value.indexOf(position);
+
         /**
          * set animation state to running
          */
@@ -915,8 +924,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         let nextPosition;
         if (_providedIndex === -1) {
           nextPosition = animatedContainerHeight.value;
+          animatedNextPositionIndex.value = -1;
         } else {
           nextPosition = animatedSnapPoints.value[_providedIndex];
+          animatedNextPositionIndex.value = _providedIndex;
         }
 
         /**
@@ -944,6 +955,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         if (animateOnMount) {
           animateToPosition(nextPosition);
         } else {
+          animatedNextPosition.value = nextPosition;
           animatedPosition.value = nextPosition;
         }
         isAnimatedOnMount.value = true;
@@ -961,8 +973,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           JSON.stringify(_animatedSnapPoints) ===
             JSON.stringify(_previousAnimatedSnapPoints) ||
           !isLayoutCalculated.value ||
-          !isAnimatedOnMount.value ||
-          animatedAnimationState.value === ANIMATION_STATE.RUNNING
+          !isAnimatedOnMount.value
         ) {
           return;
         }
@@ -977,7 +988,18 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         });
 
         let nextPosition;
-        if (animatedCurrentIndex.value === -1) {
+
+        /**
+         * if snap points changed while sheet is animating, then
+         * we stop the animation and animate to the updated point.
+         */
+        if (animatedPosition.value !== animatedNextPosition.value) {
+          cancelAnimation(animatedPosition);
+          nextPosition =
+            animatedNextPositionIndex.value !== -1
+              ? _animatedSnapPoints[animatedNextPositionIndex.value]
+              : animatedNextPosition.value;
+        } else if (animatedCurrentIndex.value === -1) {
           nextPosition = animatedContainerHeight.value;
         } else {
           nextPosition = _animatedSnapPoints[animatedCurrentIndex.value];