From 603f49294e572716d7eaf517a2adde01681c56c6 Mon Sep 17 00:00:00 2001
From: Mo Gorhom <gorhom@me.com>
Date: Sun, 18 Jul 2021 18:58:59 +0100
Subject: [PATCH] fix: updated detached bottom sheet handling

---
 src/components/bottomSheet/BottomSheet.tsx   | 32 +++++++++++---------
 src/hooks/useBottomSheetDynamicSnapPoints.ts | 12 +++++++-
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 67df9e63f..317fde845 100644
--- 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,12 +645,15 @@ 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
          */
@@ -653,12 +661,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         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
index 903cb19cd..15cd6c32c 100644
--- 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;