@multiplatform.one/components 7.7.2 → 7.7.4

package/src/SheetModal/index.native.tsx

@@ -62,19 +62,6 @@ export function SheetModal({
     if (backdropArmed) close();
   }, [backdropArmed, close]);
 
-  useEffect(() => {
-    if (!open) {
-      setBackdropArmed(false);
-      if (armTimerRef.current) {
-        clearTimeout(armTimerRef.current);
-        armTimerRef.current = null;
-      }
-    }
-    return () => {
-      if (armTimerRef.current) clearTimeout(armTimerRef.current);
-    };
-  }, [open]);
-
   // MPO-64: the sheet ends above the keyboard rather than running under it.
   const available = Math.max(0, windowHeight - keyboardInset);
   const maxHeight = Math.max(
@@ -127,11 +114,9 @@ export function SheetModal({
   travelRef.current = travel;
   detentsRef.current = detents;
 
-  useEffect(() => {
-    if (open) return;
-    translateY.setValue(travelRef.current);
-    restRef.current = travelRef.current;
-  }, [open, translateY]);
+  // Async callbacks belong to one committed presentation, never its successor.
+  const presentationRef = useRef(0);
+  const activeRef = useRef(false);
 
   const settleTo = useCallback(
     (toValue: number, velocity = 0) => {
@@ -143,7 +128,10 @@ export function SheetModal({
         stiffness: 320,
         mass: 0.9,
         overshootClamping: true,
-        useNativeDriver: true,
+        // MPO-256: JS driver. A native-driven Animated node inside a core RN
+        // Modal does not advance on the New Architecture, and the drag path
+        // already writes this value from JS.
+        useNativeDriver: false,
       }).start();
     },
     [translateY],
@@ -151,6 +139,8 @@ export function SheetModal({
 
   const dismiss = useCallback(
     (velocity = 0) => {
+      if (!activeRef.current) return;
+      const presentation = presentationRef.current;
       restRef.current = travelRef.current;
       Animated.spring(translateY, {
         toValue: travelRef.current,
@@ -159,9 +149,9 @@ export function SheetModal({
         stiffness: 400,
         mass: 0.9,
         overshootClamping: true,
-        useNativeDriver: true,
+        useNativeDriver: false,
       }).start(({ finished }) => {
-        if (finished) close();
+        if (finished && activeRef.current && presentation === presentationRef.current) close();
       });
     },
     [close, translateY],
@@ -207,9 +197,25 @@ export function SheetModal({
     [dismiss, settleTo, translateY],
   );
 
-  const handleModalShow = useCallback(() => {
+  /*
+   * MPO-256 — the entrance runs from an effect on `open` as well as from
+   * `onShow`, whichever gets here first, guarded so the second is a no-op.
+   * Wired to `onShow` ALONE, the sheet stays parked at `travel` for good
+   * whenever that callback does not arrive: one sheet-height below the
+   * screen, every row in the accessibility tree and none of them reachable.
+   */
+  const enteredRef = useRef(false);
+  const enter = useCallback(() => {
+    if (!activeRef.current || enteredRef.current) return;
+    const presentation = presentationRef.current;
+    enteredRef.current = true;
     if (armTimerRef.current) clearTimeout(armTimerRef.current);
-    armTimerRef.current = setTimeout(() => setBackdropArmed(true), 280);
+    armTimerRef.current = setTimeout(() => {
+      if (activeRef.current && presentation === presentationRef.current) {
+        armTimerRef.current = null;
+        setBackdropArmed(true);
+      }
+    }, 280);
     // MPO-62: the modal fades (backdrop dims IN PLACE); only the panel slides.
     // MPO-71: the sheet is already parked off-screen before the present, so
     // this setValue only normalises the start to exactly `travel` once the
@@ -221,10 +227,37 @@ export function SheetModal({
       toValue: 0,
       duration: 280,
       easing: Easing.out(Easing.cubic),
-      useNativeDriver: true,
-    }).start();
+      useNativeDriver: false,
+    }).start(({ finished }) => {
+      if (finished && activeRef.current && presentation === presentationRef.current)
+        translateY.setValue(0);
+    });
   }, [translateY]);
 
+  useEffect(() => {
+    presentationRef.current += 1;
+    activeRef.current = open;
+    if (open) {
+      enter();
+    } else {
+      setBackdropArmed(false);
+      const parked = travelRef.current || 10000;
+      translateY.setValue(parked);
+      restRef.current = parked;
+    }
+    return () => {
+      // Invalidate first: stopping an animation can synchronously finish it.
+      activeRef.current = false;
+      presentationRef.current += 1;
+      enteredRef.current = false;
+      if (armTimerRef.current) {
+        clearTimeout(armTimerRef.current);
+        armTimerRef.current = null;
+      }
+      translateY.stopAnimation();
+    };
+  }, [open, enter, translateY]);
+
   return (
     <Modal
       visible={open}
@@ -232,7 +265,7 @@ export function SheetModal({
       animationType="fade"
       statusBarTranslucent
       onRequestClose={close}
-      onShow={handleModalShow}
+      onShow={enter}
     >
       <RNView style={{ flex: 1, justifyContent: "flex-end", paddingBottom: keyboardInset }}>
         <Pressable

package/types/SheetModal/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/SheetModal/index.native.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAsBH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAU/C,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,GACX,EAAE,eAAe,2CAgRjB"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../src/SheetModal/index.native.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAsBH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAU/C,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,UAAU,GACX,EAAE,eAAe,2CAiTjB"}