fix: improve modal dismissing (#346)

* refactor: updated modal dismiss handling

* fix: prevent crash when trying to findnode when component is unmount

Author: gorhom

example/ios/Podfile.lock

@@ -516,7 +516,7 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: 49cbe4b43e445b06bf29199b6ad2057649e4c8f5
-  FBReactNativeSpec: 8856510b0a0bfdb6c496df732875a76198f16cad
+  FBReactNativeSpec: c426cca9d43fd70ac19a77e504a6fd12ecb473f6
   Flipper: da2ca681187fb82c668a2c3c54b003cbd3c26859
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: f7a3caafbd74bda4827954fd7a6e000e36355489

src/components/bottomSheet/BottomSheet.tsx

@@ -21,6 +21,7 @@ import Animated, {
   interpolate,
   Extrapolate,
   runOnUI,
+  cancelAnimation,
   useWorkletCallback,
 } from 'react-native-reanimated';
 import { State } from 'react-native-gesture-handler';
@@ -292,15 +293,27 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     // callbacks
     const animateToPointCompleted = useWorkletCallback(() => {
       animationState.value = ANIMATION_STATE.STOPPED;
-    }, [animatedIndex, animationState, handleOnChange, refreshUIElements]);
+    });
     const animateToPoint = useWorkletCallback(
       (
         point: number,
         velocity: number = 0,
         animationDuration?: number,
         animationEasing?: Animated.EasingFunction
       ) => {
+        /**
+         * cancel current running animation
+         */
+        cancelAnimation(animatedPosition);
+
+        /**
+         * set animation state to running
+         */
         animationState.value = ANIMATION_STATE.RUNNING;
+
+        /**
+         * fire `onAnimate` callback
+         */
         runOnJS(handleOnAnimate)(point);
 
         /**

src/components/bottomSheetModal/BottomSheetModal.tsx

@@ -167,15 +167,18 @@ const BottomSheetModalComponent = forwardRef<
         return;
       }
 
-      if (minimized.current) {
+      if (
+        minimized.current ||
+        (currentIndexRef.current === 0 && dismissOnPanDown)
+      ) {
         unmount();
         return;
       }
       willUnmountSheet(key);
       forcedDismissed.current = true;
       bottomSheetRef.current?.close(...args);
     },
-    [willUnmountSheet, unmount, key]
+    [willUnmountSheet, unmount, key, dismissOnPanDown]
   );
   const handleMinimize = useCallback(() => {
     if (minimized.current) {

src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx

@@ -89,13 +89,20 @@ const BottomSheetModalProviderWrapper = ({
     _sheetsQueue.splice(sheetIndex, 1);
     sheetsQueueRef.current = _sheetsQueue;
 
-    // /**
-    //  * Here we try to restore previous sheet position if unmounted
-    //  * sheet was on top. This is needed when user dismiss
-    //  * the modal by panning down.
-    //  */
+    /**
+     * Here we try to restore previous sheet position if unmounted
+     * sheet was on top. This is needed when user dismiss
+     * the modal by panning down.
+     */
     const hasMinimizedSheet = sheetsQueueRef.current.length > 0;
-    if (sheetOnTop && hasMinimizedSheet) {
+    const minimizedSheet =
+      sheetsQueueRef.current[sheetsQueueRef.current.length - 1];
+    if (
+      sheetOnTop &&
+      hasMinimizedSheet &&
+      minimizedSheet &&
+      !minimizedSheet.willUnmount
+    ) {
       sheetsQueueRef.current[
         sheetsQueueRef.current.length - 1
       ].ref.current.restore();

src/hooks/useScrollable.ts

@@ -29,7 +29,12 @@ export const useScrollable = () => {
 
   const removeScrollableRef = useCallback((ref: RefObject<Scrollable>) => {
     // find node handle id
-    let id = findNodeHandle(ref.current);
+    let id;
+    try {
+      id = findNodeHandle(ref.current);
+    } catch {
+      return;
+    }
 
     // get current node handle id
     let currentRefId = scrollableRef.current?.id ?? null;