From 5dd5817542cb3ef76a4c246d900b69dd2e6ff74c Mon Sep 17 00:00:00 2001
From: gorhom <gorhom.dev@gmail.com>
Date: Mon, 18 Oct 2021 21:10:55 +0100
Subject: [PATCH] fix: prevent unstable mounting for modals (#697)

---
 .../bottomSheetModal/BottomSheetModal.tsx     | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/bottomSheetModal/BottomSheetModal.tsx b/src/components/bottomSheetModal/BottomSheetModal.tsx
index 43cb900b3..6724e26ea 100644
--- 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,7 +350,13 @@ 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}
@@ -349,7 +364,6 @@ const BottomSheetModalComponent = forwardRef<
         index={index}
         snapPoints={snapPoints}
         enablePanDownToClose={enablePanDownToClose}
-        animateOnMount={true}
         containerHeight={containerHeight}
         containerOffset={containerOffset}
         onChange={handleBottomSheetOnChange}