fix: updated detached bottom sheet handling

gorhom · Jul 18, 2021 · 603f492 · 603f492
1 parent 14b66d7
commit 603f492
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -234,6 +234,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       }
       // handle component is null.
       if (handleComponent === null) {
+        animatedHandleHeight.value = 0;
         isHandleHeightCalculated = true;
       }
       // handle height did set.
@@ -593,10 +594,14 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       },
       [_providedOnAnimate, animatedSnapPoints, animatedCurrentIndex]
     );
+    const stopAnimation = useWorkletCallback(() => {
+      cancelAnimation(animatedPosition);
+      animatedAnimationSource.value = ANIMATION_SOURCE.NONE;
+      animatedAnimationState.value = ANIMATION_STATE.STOPPED;
+    }, [animatedPosition, animatedAnimationState, animatedAnimationSource]);
     const animateToPositionCompleted = useWorkletCallback(
       function animateToPositionCompleted(isFinished: boolean) {
         if (!isFinished) {
-          animatedAnimationState.value = ANIMATION_STATE.INTERRUPTED;
           return;
         }
         runOnJS(print)({
@@ -623,9 +628,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         configs?: Animated.WithTimingConfig | Animated.WithSpringConfig
       ) {
         if (
-          animatedAnimationState.value !== ANIMATION_STATE.INTERRUPTED &&
-          (position === animatedPosition.value ||
-            position === undefined ||
+          position === animatedPosition.value ||
+          position === undefined ||
+          (animatedAnimationState.value === ANIMATION_STATE.RUNNING &&
             position === animatedNextPosition.value)
         ) {
           return;
@@ -640,25 +645,22 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             velocity,
           },
         });
+
+        stopAnimation();
+
         /**
-         * cancel current running animation
+         * set animation state to running, and source
          */
-        cancelAnimation(animatedPosition);
+        animatedAnimationState.value = ANIMATION_STATE.RUNNING;
+        animatedAnimationSource.value = source;
 
-        // store
         /**
          * store next position
          */
         animatedNextPosition.value = position;
         animatedNextPositionIndex.value =
           animatedSnapPoints.value.indexOf(position);
 
-        /**
-         * set animation state to running, and source
-         */
-        animatedAnimationState.value = ANIMATION_STATE.RUNNING;
-        animatedAnimationSource.value = source;
-
         /**
          * fire `onAnimate` callback
          */
@@ -952,7 +954,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       function handleGestureStart(__, _, context: GestureEventContextType) {
         'worklet';
         // cancel current animation
-        cancelAnimation(animatedPosition);
+        stopAnimation();
 
         // store current animated position
         context.initialPosition = animatedPosition.value;
@@ -1467,7 +1469,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           component: BottomSheet.name,
           method: 'useAnimatedReaction::OnMount',
           params: {
-            _isLayoutCalculated,
+            isLayoutCalculated: _isLayoutCalculated,
             animatedSnapPoints: animatedSnapPoints.value,
             nextPosition,
           },

diff --git a/src/hooks/useBottomSheetDynamicSnapPoints.ts b/src/hooks/useBottomSheetDynamicSnapPoints.ts
@@ -1,5 +1,9 @@
 import { useCallback } from 'react';
 import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import {
+  INITIAL_HANDLE_HEIGHT,
+  INITIAL_SNAP_POINT,
+} from '../components/bottomSheet/constants';
 
 /**
  * Provides dynamic content height calculating functionalities, by
@@ -19,8 +23,14 @@ export const useBottomSheetDynamicSnapPoints = (
 ) => {
   // variables
   const animatedContentHeight = useSharedValue(0);
-  const animatedHandleHeight = useSharedValue(0);
+  const animatedHandleHeight = useSharedValue(INITIAL_HANDLE_HEIGHT);
   const animatedSnapPoints = useDerivedValue(() => {
+    if (
+      animatedHandleHeight.value === INITIAL_HANDLE_HEIGHT ||
+      animatedContentHeight.value === 0
+    ) {
+      return [INITIAL_SNAP_POINT];
+    }
     const contentWithHandleHeight =
       animatedContentHeight.value + animatedHandleHeight.value;