fix: unmounting modals with navigation (#315)

* chore: updated portal * refactor: implementation * chore: updated examples * chore: prevent update state when sheet is not mounted * chore: updated portal
gorhom · Mar 4, 2021 · 35ffee4 · 35ffee4
1 parent e204d97
commit 35ffee4
Show file tree

Hide file tree

Showing 11 changed files with 271 additions and 180 deletions.
diff --git a/example/package.json b/example/package.json
@@ -10,7 +10,7 @@
     "postinstall": "npx patch-package"
   },
   "dependencies": {
-    "@gorhom/portal": "^0.2.0",
+    "@gorhom/portal": "^1.0.4",
     "@gorhom/showcase-template": "^1.0.2",
     "@react-native-community/blur": "^3.6.0",
     "@react-native-community/masked-view": "0.1.10",

diff --git a/example/src/screens/modal/StackExample.tsx b/example/src/screens/modal/StackExample.tsx
@@ -55,13 +55,7 @@ const StackExample = () => {
     dismiss('A');
   }, [dismiss]);
 
-  const handleModalDismiss = useCallback(
-    () => console.log('Modal Dismissed'),
-    []
-  );
-
   // renders
-
   const renderBottomSheetContent = useCallback(
     (title, onPress) => (
       <ContactListContainer
@@ -121,15 +115,13 @@ const StackExample = () => {
         name="A"
         ref={bottomSheetModalARef}
         snapPoints={snapPoints}
-        onDismiss={handleModalDismiss}
         children={renderBottomSheetContent('Modal A', handlePresentBPress)}
       />
 
       <BottomSheetModal
         name="B"
         ref={bottomSheetModalBRef}
         snapPoints={snapPoints}
-        onDismiss={handleModalDismiss}
         children={renderBottomSheetContent('Modal B', handlePresentCPress)}
       />
 
@@ -139,7 +131,6 @@ const StackExample = () => {
         index={1}
         snapPoints={snapPoints}
         dismissOnPanDown={false}
-        onDismiss={handleModalDismiss}
         children={renderBottomSheetContent('Modal C', handleDismissCPress)}
       />
     </View>

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -868,11 +868,12 @@
   dependencies:
     "@types/hammerjs" "^2.0.36"
 
-"@gorhom/portal@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-0.2.0.tgz#65423726b1352e2b9e3c3b8da83a58e4dff48ce6"
-  integrity sha512-PoYYSliPCl624ORih+zyI1pVbH2Y2Mj+EY6nXeAIi2r1LGv10hItZLzdgnbPPfQ0neikTDYArlOzuB5zKIex5w==
+"@gorhom/portal@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.4.tgz#643c7baaffee223819cdd99dad748c3d9dc6bd73"
+  integrity sha512-KalM9E6Op1TCzi00YKhczBz86EV0yYpWuRuTt5J4VS09O2gGbGAEEJwUKb/Rvr3XadtinpLjePj0tZ6lFVPp+g==
   dependencies:
+    immer "^8.0.1"
     lodash.isequal "^4.5.0"
     nanoid "^3.1.20"
 
@@ -2466,6 +2467,11 @@ image-size@^0.6.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"
   integrity sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==
 
+immer@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
+  integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"

diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "bootstrap": "yarn install && yarn example"
   },
   "dependencies": {
-    "@gorhom/portal": "^0.2.0",
+    "@gorhom/portal": "^1.0.4",
     "invariant": "^2.2.4",
     "lodash.isequal": "^4.5.0",
     "nanoid": "^3.1.20",

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -165,6 +165,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const currentIndexRef = useRef<number>(
       animateOnMount ? -1 : _providedIndex
     );
+    const isClosing = useRef(false);
     const didMountOnAnimate = useRef(false);
 
     // scrollable variables
@@ -221,6 +222,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         }
         currentIndexRef.current = index;
 
+        if (isClosing.current && (index === 0 || index === -1)) {
+          isClosing.current = false;
+        }
+
         if (_providedOnChange) {
           /**
            * to avoid having -0 🤷‍♂️
@@ -370,19 +375,32 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
             snapPoints.length - 1
           }`
         );
+        if (isClosing.current) {
+          return;
+        }
         const newSnapPoint = snapPoints[index];
         runOnUI(animateToPoint)(newSnapPoint);
       },
       [animateToPoint, snapPoints]
     );
     const handleClose = useCallback(() => {
+      if (isClosing.current) {
+        return;
+      }
+      isClosing.current = true;
       runOnUI(animateToPoint)(safeContainerHeight);
     }, [animateToPoint, safeContainerHeight]);
     const handleExpand = useCallback(() => {
+      if (isClosing.current) {
+        return;
+      }
       const newSnapPoint = snapPoints[snapPoints.length - 1];
       runOnUI(animateToPoint)(newSnapPoint);
     }, [animateToPoint, snapPoints]);
     const handleCollapse = useCallback(() => {
+      if (isClosing.current) {
+        return;
+      }
       const newSnapPoint = snapPoints[0];
       runOnUI(animateToPoint)(newSnapPoint);
     }, [animateToPoint, snapPoints]);
@@ -493,6 +511,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animateOnMount &&
         isLayoutCalculated &&
         didMountOnAnimate.current === false &&
+        isClosing.current === false &&
         snapPoints[_providedIndex] !== safeContainerHeight
       ) {
         const newSnapPoint = snapPoints[_providedIndex];
@@ -512,7 +531,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
      * keep animated position synced with snap points.
      */
     useEffect(() => {
-      if (isLayoutCalculated && currentIndexRef.current !== -1) {
+      if (
+        isLayoutCalculated &&
+        currentIndexRef.current !== -1 &&
+        isClosing.current === false
+      ) {
         const newSnapPoint = snapPoints[currentIndexRef.current];
         requestAnimationFrame(() => runOnUI(animateToPoint)(newSnapPoint));
       }