fix: prevent stuck state when animation is interrupted

gorhom · Jul 13, 2021 · 01e1e87 · 01e1e87
1 parent 26d3b71
commit 01e1e87
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -386,8 +386,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     // dynamic
     const animatedContentHeight = useDerivedValue(() => {
       const keyboardHeightInContainer = getKeyboardHeightInContainer();
-      let contentHeight =
-        animatedSheetHeight.value - animatedHandleHeight.value;
+      const handleHeight = Math.max(0, animatedHandleHeight.value);
+      let contentHeight = animatedSheetHeight.value - handleHeight;
 
       if (
         keyboardBehavior === KEYBOARD_BEHAVIOR.extend &&
@@ -401,11 +401,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         if (animatedKeyboardState.value === KEYBOARD_STATE.SHOWN) {
           contentHeight =
             animatedContainerHeight.value -
-            animatedHandleHeight.value -
+            handleHeight -
             keyboardHeightInContainer;
         } else {
-          contentHeight =
-            animatedContainerHeight.value - animatedHandleHeight.value;
+          contentHeight = animatedContainerHeight.value - handleHeight;
         }
       } else if (
         keyboardBehavior === KEYBOARD_BEHAVIOR.interactive &&
@@ -422,14 +421,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             contentHeight =
               animatedContainerHeight.value -
               keyboardHeightInContainer -
-              animatedHandleHeight.value;
+              handleHeight;
           }
         } else if (
-          contentWithKeyboardHeight + animatedHandleHeight.value >
+          contentWithKeyboardHeight + handleHeight >
           animatedContainerHeight.value
         ) {
-          contentHeight =
-            animatedContainerHeight.value - animatedHandleHeight.value;
+          contentHeight = animatedContainerHeight.value - handleHeight;
         } else {
           contentHeight = contentWithKeyboardHeight;
         }
@@ -598,6 +596,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const animateToPositionCompleted = useWorkletCallback(
       function animateToPositionCompleted(isFinished: boolean) {
         if (!isFinished) {
+          animatedAnimationState.value = ANIMATION_STATE.INTERRUPTED;
           return;
         }
         runOnJS(print)({
@@ -624,9 +623,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         configs?: Animated.WithTimingConfig | Animated.WithSpringConfig
       ) {
         if (
-          position === animatedPosition.value ||
-          position === undefined ||
-          position === animatedNextPosition.value
+          animatedAnimationState.value !== ANIMATION_STATE.INTERRUPTED &&
+          (position === animatedPosition.value ||
+            position === undefined ||
+            position === animatedNextPosition.value)
         ) {
           return;
         }

diff --git a/src/constants.ts b/src/constants.ts
@@ -33,6 +33,7 @@ enum ANIMATION_STATE {
   UNDETERMINED = 0,
   RUNNING,
   STOPPED,
+  INTERRUPTED,
 }
 
 enum ANIMATION_SOURCE {