zkit-ui 2.0.16 → 2.0.17

package/dist/ui/Sheet/nativeBottom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nativeBottom.d.ts","sourceRoot":"","sources":["../../../src/ui/Sheet/nativeBottom.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"nativeBottom.d.ts","sourceRoot":"","sources":["../../../src/ui/Sheet/nativeBottom.tsx"],"names":[],"mappings":"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"}

package/dist/ui/Sheet/nativeBottom.js

@@ -170,7 +170,7 @@ exports.NativeBottomSheet = React.forwardRef(function NativeBottomSheet({ open:
     const [sheetState, setSheetState] = React.useState(isOpen ? 'opening' : 'closed');
     const [shellMounted, setShellMounted] = React.useState(isOpen);
     const nativeRef = React.useRef(null);
-    const phaseRef = React.useRef(isOpen ? 'presenting' : 'idle');
+    const phaseRef = React.useRef('idle');
     const pendingDismissRef = React.useRef(false);
     const activeLifecycleRef = React.useRef(isOpen);
     const isOpenRef = React.useRef(isOpen);
@@ -180,8 +180,16 @@ exports.NativeBottomSheet = React.forwardRef(function NativeBottomSheet({ open:
     const presentAnimatedRef = React.useRef(true);
     const dismissAnimatedRef = React.useRef(true);
     const closeReasonRef = React.useRef('system');
+    const hasRequestedCloseReasonRef = React.useRef(false);
+    const nativeOperationIdRef = React.useRef(0);
     const backdropConfig = React.useMemo(() => resolveBackdrop(backdrop), [backdrop]);
     const usesManualBackdrop = react_native_1.Platform.OS === 'ios' && backdropConfig.visible;
+    // The outer RN Modal owns a separate native presentation lifecycle on iOS.
+    // Keep it mounted through onDismiss so a rapid reopen cannot overlap that dismissal.
+    const [manualModalVisible, setManualModalVisible] = React.useState(usesManualBackdrop && isOpen);
+    const [manualModalReady, setManualModalReady] = React.useState(false);
+    const manualModalPhaseRef = React.useRef(usesManualBackdrop && isOpen ? 'showing' : 'hidden');
+    const manualCloseShouldSyncRef = React.useRef(false);
     const backdropOpacity = React.useRef(new react_native_1.Animated.Value(usesManualBackdrop && isOpen ? backdropConfig.opacity : 0)).current;
     const [manualBackdropMounted, setManualBackdropMounted] = React.useState(usesManualBackdrop && isOpen);
     React.useEffect(() => {
@@ -193,38 +201,6 @@ exports.NativeBottomSheet = React.forwardRef(function NativeBottomSheet({ open:
     React.useEffect(() => {
         currentDetentIndexRef.current = currentDetentIndex;
     }, [currentDetentIndex]);
-    React.useEffect(() => {
-        if (isOpen) {
-            activeLifecycleRef.current = true;
-            requestedOpenIndexRef.current = controlledDetentIndex !== null && controlledDetentIndex !== void 0 ? controlledDetentIndex : requestedOpenIndexRef.current;
-            if (!shellMounted)
-                setShellMounted(true);
-            return;
-        }
-        if (shellMounted) {
-            requestDismiss('system');
-        }
-    }, [controlledDetentIndex, isOpen, shellMounted]);
-    React.useEffect(() => {
-        if (!isOpen || !shellMounted)
-            return undefined;
-        const rafId = requestAnimationFrame(() => {
-            if (!isOpenRef.current)
-                return;
-            if (phaseRef.current !== 'idle' && phaseRef.current !== 'presenting')
-                return;
-            const sheet = nativeRef.current;
-            if (!sheet)
-                return;
-            const targetIndex = normalizeDetentIndex(controlledDetentIndex !== null && controlledDetentIndex !== void 0 ? controlledDetentIndex : requestedOpenIndexRef.current, nativeDetents.length);
-            pendingDismissRef.current = false;
-            phaseRef.current = 'presenting';
-            setSheetState('opening');
-            setCurrentDetentIndex(targetIndex);
-            silentlyCatchPromise(sheet.present(targetIndex, presentAnimatedRef.current));
-        });
-        return () => cancelAnimationFrame(rafId);
-    }, [controlledDetentIndex, isOpen, nativeDetents.length, shellMounted]);
     React.useEffect(() => {
         var _a;
         if (controlledDetentIndex == null)
@@ -275,28 +251,34 @@ exports.NativeBottomSheet = React.forwardRef(function NativeBottomSheet({ open:
             presentAnimatedRef.current = true;
             activeLifecycleRef.current = true;
             pendingDismissRef.current = false;
+            hasRequestedCloseReasonRef.current = false;
             if (!isOpenControlled)
                 setInnerOpen(true);
             emitOpenChange(true, 'api', requestedOpenIndexRef.current);
             return;
         }
         closeReasonRef.current = reason === 'api' ? 'api' : reason;
+        hasRequestedCloseReasonRef.current = true;
         if (!isOpenControlled)
             setInnerOpen(false);
         emitOpenChange(false, reason, currentDetentIndexRef.current);
     }, [disabled, emitOpenChange, isOpenControlled, nativeDetents.length]);
-    const finishClosedLifecycle = React.useCallback((shouldSyncOpenState) => {
+    const finishClosedLifecycle = React.useCallback((shouldSyncOpenState, keepShellMounted = false) => {
+        nativeOperationIdRef.current += 1;
         phaseRef.current = 'idle';
         pendingDismissRef.current = false;
         presentAnimatedRef.current = true;
         dismissAnimatedRef.current = true;
+        setManualModalReady(false);
         setSheetState('closed');
         if (shouldSyncOpenState) {
             if (!isOpenControlled)
                 setInnerOpen(false);
             emitOpenChange(false, closeReasonRef.current, currentDetentIndexRef.current);
         }
-        setShellMounted(false);
+        if (!keepShellMounted) {
+            setShellMounted(false);
+        }
         if (activeLifecycleRef.current) {
             activeLifecycleRef.current = false;
             onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete({
@@ -305,31 +287,158 @@ exports.NativeBottomSheet = React.forwardRef(function NativeBottomSheet({ open:
             });
         }
     }, [emitOpenChange, isOpenControlled, onCloseComplete]);
-    function requestDismiss(reason) {
+    const startManualModalDismiss = React.useCallback((shouldSyncOpenState) => {
+        manualCloseShouldSyncRef.current =
+            manualCloseShouldSyncRef.current || shouldSyncOpenState;
+        nativeOperationIdRef.current += 1;
+        phaseRef.current = 'idle';
+        pendingDismissRef.current = false;
+        setManualModalReady(false);
+        setSheetState('closing');
+        if (manualModalPhaseRef.current === 'hidden') {
+            finishClosedLifecycle(manualCloseShouldSyncRef.current);
+            manualCloseShouldSyncRef.current = false;
+            return;
+        }
+        if (manualModalPhaseRef.current !== 'hiding') {
+            manualModalPhaseRef.current = 'hiding';
+            setManualModalVisible(false);
+        }
+    }, [finishClosedLifecycle]);
+    const recoverNativeOperation = React.useCallback((operation) => {
+        if (operation === 'present') {
+            closeReasonRef.current = 'system';
+        }
+        const shouldSyncOpenState = isOpenRef.current;
+        if (usesManualBackdrop) {
+            startManualModalDismiss(shouldSyncOpenState);
+            return;
+        }
+        finishClosedLifecycle(shouldSyncOpenState);
+    }, [finishClosedLifecycle, startManualModalDismiss, usesManualBackdrop]);
+    const requestDismiss = React.useCallback((reason) => {
         const phase = phaseRef.current;
-        closeReasonRef.current = reason;
-        if (phase === 'dismissing')
+        if (phase === 'dismissing' ||
+            (usesManualBackdrop && manualModalPhaseRef.current === 'hiding')) {
             return;
+        }
         if (phase === 'presenting') {
+            if (!pendingDismissRef.current) {
+                closeReasonRef.current = reason;
+            }
             pendingDismissRef.current = true;
             return;
         }
+        closeReasonRef.current = reason;
         if (phase === 'presented') {
             const sheet = nativeRef.current;
             if (!sheet) {
-                finishClosedLifecycle(false);
+                if (usesManualBackdrop) {
+                    startManualModalDismiss(false);
+                }
+                else {
+                    finishClosedLifecycle(false);
+                }
                 return;
             }
             pendingDismissRef.current = false;
             phaseRef.current = 'dismissing';
             setSheetState('closing');
-            silentlyCatchPromise(sheet.dismiss(dismissAnimatedRef.current));
+            const operationId = ++nativeOperationIdRef.current;
+            void sheet.dismiss(dismissAnimatedRef.current).catch(() => {
+                if (operationId !== nativeOperationIdRef.current ||
+                    phaseRef.current !== 'dismissing') {
+                    return;
+                }
+                recoverNativeOperation('dismiss');
+            });
             return;
         }
-        if (activeLifecycleRef.current) {
+        if (!activeLifecycleRef.current)
+            return;
+        if (usesManualBackdrop) {
+            startManualModalDismiss(false);
+        }
+        else {
             finishClosedLifecycle(false);
         }
-    }
+    }, [
+        finishClosedLifecycle,
+        recoverNativeOperation,
+        startManualModalDismiss,
+        usesManualBackdrop,
+    ]);
+    React.useEffect(() => {
+        if (isOpen) {
+            activeLifecycleRef.current = true;
+            requestedOpenIndexRef.current = controlledDetentIndex !== null && controlledDetentIndex !== void 0 ? controlledDetentIndex : requestedOpenIndexRef.current;
+            if (!shellMounted) {
+                setShellMounted(true);
+            }
+            if (usesManualBackdrop && manualModalPhaseRef.current === 'hidden') {
+                manualCloseShouldSyncRef.current = false;
+                manualModalPhaseRef.current = 'showing';
+                setManualModalReady(false);
+                setManualModalVisible(true);
+            }
+            return;
+        }
+        if (shellMounted) {
+            const reason = hasRequestedCloseReasonRef.current ? closeReasonRef.current : 'system';
+            hasRequestedCloseReasonRef.current = false;
+            requestDismiss(reason);
+        }
+    }, [
+        controlledDetentIndex,
+        isOpen,
+        requestDismiss,
+        shellMounted,
+        usesManualBackdrop,
+    ]);
+    React.useEffect(() => {
+        if (!isOpen || !shellMounted)
+            return undefined;
+        if (usesManualBackdrop && !manualModalReady)
+            return undefined;
+        const present = () => {
+            if (!isOpenRef.current || phaseRef.current !== 'idle')
+                return;
+            if (usesManualBackdrop &&
+                manualModalPhaseRef.current !== 'shown') {
+                return;
+            }
+            const sheet = nativeRef.current;
+            if (!sheet)
+                return;
+            const targetIndex = normalizeDetentIndex(controlledDetentIndex !== null && controlledDetentIndex !== void 0 ? controlledDetentIndex : requestedOpenIndexRef.current, nativeDetents.length);
+            pendingDismissRef.current = false;
+            phaseRef.current = 'presenting';
+            setSheetState('opening');
+            setCurrentDetentIndex(targetIndex);
+            const operationId = ++nativeOperationIdRef.current;
+            void sheet.present(targetIndex, presentAnimatedRef.current).catch(() => {
+                if (operationId !== nativeOperationIdRef.current ||
+                    phaseRef.current !== 'presenting') {
+                    return;
+                }
+                recoverNativeOperation('present');
+            });
+        };
+        if (usesManualBackdrop) {
+            present();
+            return undefined;
+        }
+        const rafId = requestAnimationFrame(present);
+        return () => cancelAnimationFrame(rafId);
+    }, [
+        controlledDetentIndex,
+        isOpen,
+        manualModalReady,
+        nativeDetents.length,
+        recoverNativeOperation,
+        shellMounted,
+        usesManualBackdrop,
+    ]);
     const openSheet = React.useCallback(async (options) => {
         var _a, _b;
         const targetIndex = normalizeDetentIndex((_a = options === null || options === void 0 ? void 0 : options.detentIndex) !== null && _a !== void 0 ? _a : requestedOpenIndexRef.current, nativeDetents.length);
@@ -378,14 +487,50 @@ exports.NativeBottomSheet = React.forwardRef(function NativeBottomSheet({ open:
         if (pendingDismissRef.current || !isOpenRef.current) {
             requestDismiss(closeReasonRef.current);
         }
-    }, [nativeDetents, onOpenComplete, semanticDetents]);
+    }, [nativeDetents, onOpenComplete, requestDismiss, semanticDetents]);
     const handleDidDismiss = React.useCallback(() => {
         const wasRequestedDismiss = phaseRef.current === 'dismissing' || pendingDismissRef.current;
         const shouldSyncOpenState = isOpenRef.current && !wasRequestedDismiss;
         if (shouldSyncOpenState) {
             closeReasonRef.current = closeReasonRef.current === 'system' ? 'gesture' : closeReasonRef.current;
         }
-        finishClosedLifecycle(shouldSyncOpenState);
+        if (usesManualBackdrop) {
+            startManualModalDismiss(shouldSyncOpenState);
+        }
+        else {
+            finishClosedLifecycle(shouldSyncOpenState);
+        }
+    }, [finishClosedLifecycle, startManualModalDismiss, usesManualBackdrop]);
+    const handleManualModalShow = React.useCallback(() => {
+        if (manualModalPhaseRef.current !== 'showing')
+            return;
+        if (!isOpenRef.current) {
+            startManualModalDismiss(false);
+            return;
+        }
+        manualModalPhaseRef.current = 'shown';
+        // onShow is the native readiness barrier for presenting the nested TrueSheet.
+        setManualModalReady(true);
+    }, [startManualModalDismiss]);
+    const handleManualModalDismiss = React.useCallback(() => {
+        const shouldSyncOpenState = manualCloseShouldSyncRef.current;
+        const shouldReopen = isOpenRef.current && !shouldSyncOpenState;
+        const reopenAnimated = presentAnimatedRef.current;
+        manualModalPhaseRef.current = 'hidden';
+        manualCloseShouldSyncRef.current = false;
+        setManualModalReady(false);
+        setManualModalVisible(false);
+        // Only onDismiss guarantees that UIKit has removed the outer presenter.
+        finishClosedLifecycle(shouldSyncOpenState, shouldReopen);
+        if (!shouldReopen)
+            return;
+        activeLifecycleRef.current = true;
+        hasRequestedCloseReasonRef.current = false;
+        presentAnimatedRef.current = reopenAnimated;
+        phaseRef.current = 'idle';
+        manualModalPhaseRef.current = 'showing';
+        setSheetState('opening');
+        setManualModalVisible(true);
     }, [finishClosedLifecycle]);
     const handleDetentChange = React.useCallback((event) => {
         const payload = createDetentPayload(event.nativeEvent, semanticDetents, nativeDetents);
@@ -425,7 +570,7 @@ exports.NativeBottomSheet = React.forwardRef(function NativeBottomSheet({ open:
     if (!shellMounted)
         return null;
     if (usesManualBackdrop) {
-        return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: true, transparent: true, animationType: "none", statusBarTranslucent: true, presentationStyle: "overFullScreen", onRequestClose: handleBackdropPress, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modalRoot, pointerEvents: "box-none", children: [manualBackdropMounted ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: backdropAccessibilityLabel, disabled: disabled || !dismissible || !backdropConfig.dismissOnPress, onPress: handleBackdropPress, style: react_native_1.StyleSheet.absoluteFill, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: [
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: manualModalVisible, transparent: true, animationType: "none", statusBarTranslucent: true, presentationStyle: "overFullScreen", onShow: handleManualModalShow, onDismiss: handleManualModalDismiss, onRequestClose: handleBackdropPress, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modalRoot, pointerEvents: "box-none", children: [manualBackdropMounted ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: backdropAccessibilityLabel, disabled: disabled || !dismissible || !backdropConfig.dismissOnPress, onPress: handleBackdropPress, style: react_native_1.StyleSheet.absoluteFill, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: [
                                 react_native_1.StyleSheet.absoluteFill,
                                 {
                                     backgroundColor: backdropConfig.color,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zkit-ui",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/ui/Sheet/nativeBottom.tsx

@@ -92,6 +92,7 @@ export type NativeBottomSheetProps = {
 };
 
 type NativePhase = 'idle' | 'presenting' | 'presented' | 'dismissing';
+type ManualModalPhase = 'hidden' | 'showing' | 'shown' | 'hiding';
 type ResolvedBackdrop = Required<SheetBackdropConfig>;
 
 const DEFAULT_DETENTS: readonly SheetDetent[] = ['content'];
@@ -272,7 +273,7 @@ export const NativeBottomSheet = React.forwardRef<NativeBottomSheetRef, NativeBo
     const [shellMounted, setShellMounted] = React.useState(isOpen);
 
     const nativeRef = React.useRef<TrueSheet>(null);
-    const phaseRef = React.useRef<NativePhase>(isOpen ? 'presenting' : 'idle');
+    const phaseRef = React.useRef<NativePhase>('idle');
     const pendingDismissRef = React.useRef(false);
     const activeLifecycleRef = React.useRef(isOpen);
     const isOpenRef = React.useRef(isOpen);
@@ -282,8 +283,18 @@ export const NativeBottomSheet = React.forwardRef<NativeBottomSheetRef, NativeBo
     const presentAnimatedRef = React.useRef(true);
     const dismissAnimatedRef = React.useRef(true);
     const closeReasonRef = React.useRef<SheetCloseReason>('system');
+    const hasRequestedCloseReasonRef = React.useRef(false);
+    const nativeOperationIdRef = React.useRef(0);
     const backdropConfig = React.useMemo(() => resolveBackdrop(backdrop), [backdrop]);
     const usesManualBackdrop = Platform.OS === 'ios' && backdropConfig.visible;
+    // The outer RN Modal owns a separate native presentation lifecycle on iOS.
+    // Keep it mounted through onDismiss so a rapid reopen cannot overlap that dismissal.
+    const [manualModalVisible, setManualModalVisible] = React.useState(usesManualBackdrop && isOpen);
+    const [manualModalReady, setManualModalReady] = React.useState(false);
+    const manualModalPhaseRef = React.useRef<ManualModalPhase>(
+      usesManualBackdrop && isOpen ? 'showing' : 'hidden'
+    );
+    const manualCloseShouldSyncRef = React.useRef(false);
     const backdropOpacity = React.useRef(
       new Animated.Value(usesManualBackdrop && isOpen ? backdropConfig.opacity : 0)
     ).current;
@@ -301,44 +312,6 @@ export const NativeBottomSheet = React.forwardRef<NativeBottomSheetRef, NativeBo
       currentDetentIndexRef.current = currentDetentIndex;
     }, [currentDetentIndex]);
 
-    React.useEffect(() => {
-      if (isOpen) {
-        activeLifecycleRef.current = true;
-        requestedOpenIndexRef.current = controlledDetentIndex ?? requestedOpenIndexRef.current;
-        if (!shellMounted) setShellMounted(true);
-        return;
-      }
-
-      if (shellMounted) {
-        requestDismiss('system');
-      }
-    }, [controlledDetentIndex, isOpen, shellMounted]);
-
-    React.useEffect(() => {
-      if (!isOpen || !shellMounted) return undefined;
-
-      const rafId = requestAnimationFrame(() => {
-        if (!isOpenRef.current) return;
-        if (phaseRef.current !== 'idle' && phaseRef.current !== 'presenting') return;
-
-        const sheet = nativeRef.current;
-        if (!sheet) return;
-
-        const targetIndex = normalizeDetentIndex(
-          controlledDetentIndex ?? requestedOpenIndexRef.current,
-          nativeDetents.length
-        );
-
-        pendingDismissRef.current = false;
-        phaseRef.current = 'presenting';
-        setSheetState('opening');
-        setCurrentDetentIndex(targetIndex);
-        silentlyCatchPromise(sheet.present(targetIndex, presentAnimatedRef.current));
-      });
-
-      return () => cancelAnimationFrame(rafId);
-    }, [controlledDetentIndex, isOpen, nativeDetents.length, shellMounted]);
-
     React.useEffect(() => {
       if (controlledDetentIndex == null) return;
       requestedOpenIndexRef.current = controlledDetentIndex;
@@ -399,12 +372,14 @@ export const NativeBottomSheet = React.forwardRef<NativeBottomSheetRef, NativeBo
           presentAnimatedRef.current = true;
           activeLifecycleRef.current = true;
           pendingDismissRef.current = false;
+          hasRequestedCloseReasonRef.current = false;
           if (!isOpenControlled) setInnerOpen(true);
           emitOpenChange(true, 'api', requestedOpenIndexRef.current);
           return;
         }
 
         closeReasonRef.current = reason === 'api' ? 'api' : reason;
+        hasRequestedCloseReasonRef.current = true;
         if (!isOpenControlled) setInnerOpen(false);
         emitOpenChange(false, reason, currentDetentIndexRef.current);
       },
@@ -412,11 +387,13 @@ export const NativeBottomSheet = React.forwardRef<NativeBottomSheetRef, NativeBo
     );
 
     const finishClosedLifecycle = React.useCallback(
-      (shouldSyncOpenState: boolean) => {
+      (shouldSyncOpenState: boolean, keepShellMounted = false) => {
+        nativeOperationIdRef.current += 1;
         phaseRef.current = 'idle';
         pendingDismissRef.current = false;
         presentAnimatedRef.current = true;
         dismissAnimatedRef.current = true;
+        setManualModalReady(false);
         setSheetState('closed');
 
         if (shouldSyncOpenState) {
@@ -424,7 +401,9 @@ export const NativeBottomSheet = React.forwardRef<NativeBottomSheetRef, NativeBo
           emitOpenChange(false, closeReasonRef.current, currentDetentIndexRef.current);
         }
 
-        setShellMounted(false);
+        if (!keepShellMounted) {
+          setShellMounted(false);
+        }
 
         if (activeLifecycleRef.current) {
           activeLifecycleRef.current = false;
@@ -437,35 +416,195 @@ export const NativeBottomSheet = React.forwardRef<NativeBottomSheetRef, NativeBo
       [emitOpenChange, isOpenControlled, onCloseComplete]
     );
 
-    function requestDismiss(reason: SheetCloseReason) {
-      const phase = phaseRef.current;
-      closeReasonRef.current = reason;
+    const startManualModalDismiss = React.useCallback(
+      (shouldSyncOpenState: boolean) => {
+        manualCloseShouldSyncRef.current =
+          manualCloseShouldSyncRef.current || shouldSyncOpenState;
+        nativeOperationIdRef.current += 1;
+        phaseRef.current = 'idle';
+        pendingDismissRef.current = false;
+        setManualModalReady(false);
+        setSheetState('closing');
+
+        if (manualModalPhaseRef.current === 'hidden') {
+          finishClosedLifecycle(manualCloseShouldSyncRef.current);
+          manualCloseShouldSyncRef.current = false;
+          return;
+        }
+
+        if (manualModalPhaseRef.current !== 'hiding') {
+          manualModalPhaseRef.current = 'hiding';
+          setManualModalVisible(false);
+        }
+      },
+      [finishClosedLifecycle]
+    );
+
+    const recoverNativeOperation = React.useCallback(
+      (operation: 'present' | 'dismiss') => {
+        if (operation === 'present') {
+          closeReasonRef.current = 'system';
+        }
+        const shouldSyncOpenState = isOpenRef.current;
+
+        if (usesManualBackdrop) {
+          startManualModalDismiss(shouldSyncOpenState);
+          return;
+        }
+
+        finishClosedLifecycle(shouldSyncOpenState);
+      },
+      [finishClosedLifecycle, startManualModalDismiss, usesManualBackdrop]
+    );
+
+    const requestDismiss = React.useCallback(
+      (reason: SheetCloseReason) => {
+        const phase = phaseRef.current;
 
-      if (phase === 'dismissing') return;
+        if (
+          phase === 'dismissing' ||
+          (usesManualBackdrop && manualModalPhaseRef.current === 'hiding')
+        ) {
+          return;
+        }
 
-      if (phase === 'presenting') {
-        pendingDismissRef.current = true;
+        if (phase === 'presenting') {
+          if (!pendingDismissRef.current) {
+            closeReasonRef.current = reason;
+          }
+          pendingDismissRef.current = true;
+          return;
+        }
+
+        closeReasonRef.current = reason;
+
+        if (phase === 'presented') {
+          const sheet = nativeRef.current;
+          if (!sheet) {
+            if (usesManualBackdrop) {
+              startManualModalDismiss(false);
+            } else {
+              finishClosedLifecycle(false);
+            }
+            return;
+          }
+
+          pendingDismissRef.current = false;
+          phaseRef.current = 'dismissing';
+          setSheetState('closing');
+          const operationId = ++nativeOperationIdRef.current;
+          void sheet.dismiss(dismissAnimatedRef.current).catch(() => {
+            if (
+              operationId !== nativeOperationIdRef.current ||
+              phaseRef.current !== 'dismissing'
+            ) {
+              return;
+            }
+            recoverNativeOperation('dismiss');
+          });
+          return;
+        }
+
+        if (!activeLifecycleRef.current) return;
+
+        if (usesManualBackdrop) {
+          startManualModalDismiss(false);
+        } else {
+          finishClosedLifecycle(false);
+        }
+      },
+      [
+        finishClosedLifecycle,
+        recoverNativeOperation,
+        startManualModalDismiss,
+        usesManualBackdrop,
+      ]
+    );
+
+    React.useEffect(() => {
+      if (isOpen) {
+        activeLifecycleRef.current = true;
+        requestedOpenIndexRef.current = controlledDetentIndex ?? requestedOpenIndexRef.current;
+
+        if (!shellMounted) {
+          setShellMounted(true);
+        }
+
+        if (usesManualBackdrop && manualModalPhaseRef.current === 'hidden') {
+          manualCloseShouldSyncRef.current = false;
+          manualModalPhaseRef.current = 'showing';
+          setManualModalReady(false);
+          setManualModalVisible(true);
+        }
         return;
       }
 
-      if (phase === 'presented') {
-        const sheet = nativeRef.current;
-        if (!sheet) {
-          finishClosedLifecycle(false);
+      if (shellMounted) {
+        const reason = hasRequestedCloseReasonRef.current ? closeReasonRef.current : 'system';
+        hasRequestedCloseReasonRef.current = false;
+        requestDismiss(reason);
+      }
+    }, [
+      controlledDetentIndex,
+      isOpen,
+      requestDismiss,
+      shellMounted,
+      usesManualBackdrop,
+    ]);
+
+    React.useEffect(() => {
+      if (!isOpen || !shellMounted) return undefined;
+      if (usesManualBackdrop && !manualModalReady) return undefined;
+
+      const present = () => {
+        if (!isOpenRef.current || phaseRef.current !== 'idle') return;
+        if (
+          usesManualBackdrop &&
+          manualModalPhaseRef.current !== 'shown'
+        ) {
           return;
         }
 
+        const sheet = nativeRef.current;
+        if (!sheet) return;
+
+        const targetIndex = normalizeDetentIndex(
+          controlledDetentIndex ?? requestedOpenIndexRef.current,
+          nativeDetents.length
+        );
+
         pendingDismissRef.current = false;
-        phaseRef.current = 'dismissing';
-        setSheetState('closing');
-        silentlyCatchPromise(sheet.dismiss(dismissAnimatedRef.current));
-        return;
-      }
+        phaseRef.current = 'presenting';
+        setSheetState('opening');
+        setCurrentDetentIndex(targetIndex);
+        const operationId = ++nativeOperationIdRef.current;
+        void sheet.present(targetIndex, presentAnimatedRef.current).catch(() => {
+          if (
+            operationId !== nativeOperationIdRef.current ||
+            phaseRef.current !== 'presenting'
+          ) {
+            return;
+          }
+          recoverNativeOperation('present');
+        });
+      };
 
-      if (activeLifecycleRef.current) {
-        finishClosedLifecycle(false);
+      if (usesManualBackdrop) {
+        present();
+        return undefined;
       }
-    }
+
+      const rafId = requestAnimationFrame(present);
+      return () => cancelAnimationFrame(rafId);
+    }, [
+      controlledDetentIndex,
+      isOpen,
+      manualModalReady,
+      nativeDetents.length,
+      recoverNativeOperation,
+      shellMounted,
+      usesManualBackdrop,
+    ]);
 
     const openSheet = React.useCallback(
       async (options?: SheetOpenOptions) => {
@@ -541,7 +680,7 @@ export const NativeBottomSheet = React.forwardRef<NativeBottomSheetRef, NativeBo
           requestDismiss(closeReasonRef.current);
         }
       },
-      [nativeDetents, onOpenComplete, semanticDetents]
+      [nativeDetents, onOpenComplete, requestDismiss, semanticDetents]
     );
 
     const handleDidDismiss = React.useCallback(() => {
@@ -550,7 +689,48 @@ export const NativeBottomSheet = React.forwardRef<NativeBottomSheetRef, NativeBo
       if (shouldSyncOpenState) {
         closeReasonRef.current = closeReasonRef.current === 'system' ? 'gesture' : closeReasonRef.current;
       }
-      finishClosedLifecycle(shouldSyncOpenState);
+
+      if (usesManualBackdrop) {
+        startManualModalDismiss(shouldSyncOpenState);
+      } else {
+        finishClosedLifecycle(shouldSyncOpenState);
+      }
+    }, [finishClosedLifecycle, startManualModalDismiss, usesManualBackdrop]);
+
+    const handleManualModalShow = React.useCallback(() => {
+      if (manualModalPhaseRef.current !== 'showing') return;
+
+      if (!isOpenRef.current) {
+        startManualModalDismiss(false);
+        return;
+      }
+
+      manualModalPhaseRef.current = 'shown';
+      // onShow is the native readiness barrier for presenting the nested TrueSheet.
+      setManualModalReady(true);
+    }, [startManualModalDismiss]);
+
+    const handleManualModalDismiss = React.useCallback(() => {
+      const shouldSyncOpenState = manualCloseShouldSyncRef.current;
+      const shouldReopen = isOpenRef.current && !shouldSyncOpenState;
+      const reopenAnimated = presentAnimatedRef.current;
+
+      manualModalPhaseRef.current = 'hidden';
+      manualCloseShouldSyncRef.current = false;
+      setManualModalReady(false);
+      setManualModalVisible(false);
+      // Only onDismiss guarantees that UIKit has removed the outer presenter.
+      finishClosedLifecycle(shouldSyncOpenState, shouldReopen);
+
+      if (!shouldReopen) return;
+
+      activeLifecycleRef.current = true;
+      hasRequestedCloseReasonRef.current = false;
+      presentAnimatedRef.current = reopenAnimated;
+      phaseRef.current = 'idle';
+      manualModalPhaseRef.current = 'showing';
+      setSheetState('opening');
+      setManualModalVisible(true);
     }, [finishClosedLifecycle]);
 
     const handleDetentChange = React.useCallback(
@@ -638,11 +818,13 @@ export const NativeBottomSheet = React.forwardRef<NativeBottomSheetRef, NativeBo
     if (usesManualBackdrop) {
       return (
         <Modal
-          visible
+          visible={manualModalVisible}
           transparent
           animationType="none"
           statusBarTranslucent
           presentationStyle="overFullScreen"
+          onShow={handleManualModalShow}
+          onDismiss={handleManualModalDismiss}
           onRequestClose={handleBackdropPress}
         >
           <View style={styles.modalRoot} pointerEvents="box-none">