fix(app): isolate bottom sheet modal scopes

packages/app/src/components/ui/context-menu.tsx

@@ -30,8 +30,12 @@ import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { Check, CheckCircle } from "lucide-react-native";
-import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from "@gorhom/bottom-sheet";
+import { BottomSheetBackdrop, BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  IsolatedBottomSheetModal,
+  useIsolatedBottomSheetVisibility,
+} from "@/components/ui/isolated-bottom-sheet-modal";
 import { isWeb, isNative } from "@/constants/platform";
 import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style";
 
@@ -354,7 +358,6 @@ export function ContextMenuContent({
   const isMobile = useIsCompactFormFactor();
   const useMobileSheet = isMobile && mobileMode === "sheet";
   const { open, setOpen, triggerRef, anchorRect } = context;
-  const bottomSheetRef = useRef<BottomSheetModal>(null);
   const sheetSnapPoints = useMemo(() => ["30%", "55%"], []);
   const [triggerRect, setTriggerRect] = useState<Rect | null>(null);
   const [contentSize, setContentSize] = useState<{ width: number; height: number } | null>(null);
@@ -364,23 +367,11 @@ export function ContextMenuContent({
     setOpen(false);
   }, [setOpen]);
 
-  useEffect(() => {
-    if (!useMobileSheet) return;
-    if (open) {
-      bottomSheetRef.current?.present();
-      return;
-    }
-    bottomSheetRef.current?.dismiss();
-  }, [open, useMobileSheet]);
-
-  const handleSheetChange = useCallback(
-    (index: number) => {
-      if (index === -1) {
-        handleClose();
-      }
-    },
-    [handleClose],
-  );
+  const { sheetRef: bottomSheetRef, handleSheetChange } = useIsolatedBottomSheetVisibility({
+    visible: open,
+    isEnabled: useMobileSheet,
+    onClose: handleClose,
+  });
 
   const renderSheetBackdrop = useCallback(
     (props: ComponentProps<typeof BottomSheetBackdrop>) => (
@@ -468,7 +459,7 @@ export function ContextMenuContent({
   if (useMobileSheet) {
     return (
       <ContextMenuContext.Provider value={context}>
-        <BottomSheetModal
+        <IsolatedBottomSheetModal
           ref={bottomSheetRef}
           index={0}
           snapPoints={sheetSnapPoints}
@@ -495,7 +486,7 @@ export function ContextMenuContent({
           >
             {children}
           </BottomSheetScrollView>
-        </BottomSheetModal>
+        </IsolatedBottomSheetModal>
       </ContextMenuContext.Provider>
     );
   }