fix: prevent unstable mounting for modals (#697)

gorhom · Oct 18, 2021 · 657505a · 657505a
1 parent e777487
commit 657505a
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
@@ -66,7 +66,8 @@ const BottomSheetModalComponent = forwardRef<
   const restoreIndexRef = useRef(-1);
   const minimized = useRef(false);
   const forcedDismissed = useRef(false);
-  const mounted = useRef(true);
+  const mounted = useRef(false);
+  mounted.current = mount;
   //#endregion
 
   //#region variables
@@ -82,7 +83,7 @@ const BottomSheetModalComponent = forwardRef<
     currentIndexRef.current = -1;
     restoreIndexRef.current = -1;
     minimized.current = false;
-    mounted.current = true;
+    mounted.current = false;
     forcedDismissed.current = false;
   }, []);
   const unmount = useCallback(
@@ -279,6 +280,14 @@ const BottomSheetModalComponent = forwardRef<
     },
     [key, unmount, willUnmountSheet]
   );
+  const handlePortalRender = useCallback(function handlePortalRender(
+    render: () => void
+  ) {
+    if (mounted.current) {
+      render();
+    }
+  },
+  []);
   const handleBottomSheetOnChange = useCallback(
     function handleBottomSheetOnChange(_index: number) {
       print({
@@ -341,15 +350,20 @@ const BottomSheetModalComponent = forwardRef<
   // render
   // console.log('BottomSheetModal', index, snapPoints)
   return mount ? (
-    <Portal key={key} name={key} handleOnUnmount={handlePortalOnUnmount}>
+    <Portal
+      key={key}
+      name={key}
+      handleOnMount={handlePortalRender}
+      handleOnUpdate={handlePortalRender}
+      handleOnUnmount={handlePortalOnUnmount}
+    >
       <BottomSheet
         {...bottomSheetProps}
         ref={bottomSheetRef}
         key={key}
         index={index}
         snapPoints={snapPoints}
         enablePanDownToClose={enablePanDownToClose}
-        animateOnMount={true}
         containerHeight={containerHeight}
         containerOffset={containerOffset}
         onChange={handleBottomSheetOnChange}