@momo-kits/foundation 0.164.1-beta.6 → 0.164.1-beta.8

package/Application/StackScreen.tsx

@@ -6,7 +6,7 @@ import Navigation from './Navigation';
 import { ApplicationContext, MiniAppContext, ScreenContext } from '../Context';
 import { GridSystem } from '../Layout';
 import { version } from '../package.json';
-import { useAppState, useSwipeBackHaptic } from './utils';
+import { SwipeBackHaptic, useAppState } from './utils';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
@@ -51,7 +51,6 @@ const StackScreen: React.FC<any> = props => {
   const navigation = useRef(new Navigation(props.navigation, context)).current;
   const heightHeader = useHeaderHeight();
   const { isBackgroundToForeground } = useAppState();
-  useSwipeBackHaptic();
 
   const data = {
     ...initialParams,
@@ -414,6 +413,9 @@ const StackScreen: React.FC<any> = props => {
         <Component heightHeader={heightHeader} {...data} />
         {showGrid && <GridSystem />}
         <TooltipPortalHost />
+        {/* a leaf on purpose: it subscribes to CardAnimationContext, which changes on every
+            Card render, and must not pull this screen into those renders */}
+        <SwipeBackHaptic />
       </TooltipPortalProvider>
     </ScreenContext.Provider>
   );

package/Application/utils.tsx

@@ -17,12 +17,12 @@ import type {
 } from '@react-navigation/stack';
 import type { NavigationState, PartialState } from '@react-navigation/native';
 import type { HeaderTitleProps, NavigationOptions } from './types';
+import { ApplicationContext } from '../Context';
 import { Colors, Spacing } from '../Consts';
 import { Animated, AppState, NativeModules, Platform } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import { useSharedValue } from 'react-native-reanimated';
 import {
-  ApplicationContext,
   MiniAppContext,
   ScreenContext,
   TrackingScopeContext,
@@ -335,43 +335,64 @@ const useNativeCanGoBack = () => {
 };
 
 /**
- * fraction of screen width at which releasing commits the pop. deliberately
- * pinned to react-navigation's own rule: Card.tsx (GestureState.END,
- * @react-navigation/stack 7.4.2) closes the card when
- * `(translation + velocity * gestureVelocityImpact) * inverted > distance / 2`
- * with `distance = layout.width` for a horizontal gesture, and exposes no
- * option to override it. so the tick means "release now and you go back"
- * instead of marking a distance of its own — keep the two in sync.
- *
- * mid drag only translation is known, velocity exists solely at release, so a
- * short fast flick can commit without ever crossing this and pops with no
- * tick. that asymmetry is intended: modelling velocity per frame would tick
- * on swipes that then do not commit, which is the worse error
+ * Union of the two animation runtimes an internal foundation component might
+ * receive. Public Screen props still accept React Native Animated.Value only;
+ * this type keeps lower-level header/floating components compatible while they
+ * render with reanimated.
  */
-const SWIPE_BACK_HAPTIC_COMMIT_RATIO = 0.5;
+export type AnimatedCompatValue = Animated.Value | SharedValue<number>;
 
-const readAnimatedValue = (node: unknown, fallback: number): number => {
-  const getValue = (node as { __getValue?: () => unknown } | undefined)
-    ?.__getValue;
-  if (typeof getValue !== 'function') {
-    return fallback;
-  }
+const isRNAnimatedValue = (v: unknown): v is Animated.Value =>
+  !!v &&
+  typeof (v as Animated.Value).setValue === 'function' &&
+  typeof (v as Animated.Value).interpolate === 'function';
 
-  const value = getValue.call(node);
-  return typeof value === 'number' ? value : fallback;
+const isSharedValue = (v: unknown): v is SharedValue<number> =>
+  !!v && !isRNAnimatedValue(v) && 'value' in (v as object);
+
+const useNormalizedSharedValue = (
+  input?: AnimatedCompatValue,
+): SharedValue<number> => {
+  const fallback = useSharedValue(0);
+
+  useEffect(() => {
+    if (!isRNAnimatedValue(input)) {
+      return;
+    }
+    const id = input.addListener(({ value }) => {
+      fallback.value = value;
+    });
+    return () => input.removeListener(id);
+  }, [input, fallback]);
+
+  if (isSharedValue(input)) {
+    return input;
+  }
+  return fallback;
 };
 
 /**
- * `current.progress` is built as `gesture.interpolate(...)`, so its parent is
- * the raw pan translation the finger drives. Private react-navigation / RN
- * shape, verified against @react-navigation/stack 7.4.2 + react-native 0.80.1
- * — duck-typed so a rename degrades to "no haptic" instead of a crash.
+ * Travel, in points, at which the swipe back gesture ticks. Flat and well short of
+ * react-navigation's own `distance / 2` commit rule: the tick marks "the gesture is
+ * recognised", not "you are past the point of no return".
+ */
+const SWIPE_BACK_HAPTIC_THRESHOLD = 50;
+
+/**
+ * `current.progress` is `gesture.interpolate(...)` built by CardStack
+ * (@react-navigation/stack 7.4.2, views/Stack/CardStack.tsx `getProgressFromGesture`).
+ * Only `Animated.Value.addListener` bridges native driver updates back to js, so the raw
+ * translation has to be read off the interpolation's parent.
+ *
+ * Reaches into a private field. Every hop is optional and duck typed, so a shape change in
+ * a future @react-navigation/stack degrades to "no haptic" rather than a crash.
  */
 const getSwipeGestureValue = (
-  progress?: Animated.AnimatedInterpolation<number>,
+  progress: Animated.AnimatedInterpolation<number> | undefined,
 ): Animated.Value | undefined => {
-  const parent = (progress as { _parent?: Animated.Value } | undefined)
-    ?._parent;
+  const parent = (progress as { _parent?: unknown } | undefined)?._parent as
+    | Animated.Value
+    | undefined;
 
   return typeof parent?.addListener === 'function' &&
     typeof parent?.removeListener === 'function'
@@ -379,30 +400,28 @@ const getSwipeGestureValue = (
     : undefined;
 };
 
+const readAnimatedValue = (node: unknown, fallback: number): number => {
+  const value = (node as { __getValue?: () => unknown } | undefined)?.__getValue?.();
+  return typeof value === 'number' ? value : fallback;
+};
+
 /**
- * one light tick once the swipe back passes the point where releasing commits
- * the pop. iOS only, mirroring `gestureEnabled` in getStackOptions.
+ * Haptic tick for the iOS swipe back gesture.
  *
- * both listeners are installed on mount and never lazily inside the gesture:
- * on the New Architecture `addListener` queues `startListeningToAnimatedNodeValue`
- * via `queueOperationBlock`, and that queue is only drained by a React mount
- * commit — which never happens during a native driven pan. subscribing when the
- * swipe starts installs an observer that the release flush tears down again
- * before a single frame is delivered, so it must stay on mount.
+ * Deliberately a leaf that renders nothing. Consuming `CardAnimationContext` re-renders on
+ * every `Card` render, and an earlier version put that on `StackScreen` itself — which then
+ * re-rendered the whole screen mid gesture and cost the pop: `Card` defers `onClose()` by
+ * 32ms and clears that timer from `animate()`, which `componentDidUpdate` re-enters on any
+ * render in the window. Keeping the subscription in a null leaf isolates it.
  *
- * `gesture` also drives the programmatic push and pop animations, so it is the
- * JS `isSwiping` flag, not the subscription lifetime, that keeps the tick
- * exclusive to a real finger drag.
+ * Both listeners are installed on mount, never lazily inside the gesture: on the New
+ * Architecture `addListener` queues `startListeningToAnimatedNodeValue` via
+ * `queueOperationBlock`, and that queue is only drained by a React mount commit — which
+ * never happens during a native driven pan.
  */
-const useSwipeBackHaptic = () => {
+const SwipeBackHaptic = () => {
   const { navigator } = useContext<any>(ApplicationContext);
   const animation = useContext(CardAnimationContext);
-
-  /**
-   * the latch has to outlive the effect. `animation` identity changes on every
-   * navigator render, so a `hasFired` local re-arms several times per drag and
-   * the tick then repeats on every frame past the threshold
-   */
   const hasFired = useRef(false);
 
   useEffect(() => {
@@ -410,71 +429,33 @@ const useSwipeBackHaptic = () => {
       return;
     }
 
-    const { swiping, inverted, current, layouts } = animation;
+    const { swiping, inverted, current } = animation;
     const gesture = getSwipeGestureValue(current?.progress);
     if (!gesture || typeof swiping?.addListener !== 'function') {
       return;
     }
 
-    /**
-     * `animation` identity is not stable, so this effect can re-run mid swipe.
-     * seed from the live value instead of waiting for a 0 -> 1 transition that
-     * has already been missed
-     */
     let isSwiping = readAnimatedValue(swiping, 0) === 1;
 
     /**
-     * sign, not magnitude: a leftward overdrag reports a negative
-     * translation and must not count as progress toward dismissal
+     * sign, not magnitude: a leftward overdrag reports a negative translation and must
+     * not count as progress toward dismissal
      */
     const direction = readAnimatedValue(inverted, 1);
 
-    /**
-     * plain JS numbers, not animated nodes (`StackCardInterpolationProps`).
-     * screen layout can still be unmeasured on an early render, and a zero
-     * width would put the threshold at 0 and tick the moment the finger moves
-     */
-    const commitThreshold =
-      (layouts?.screen?.width ?? 0) * SWIPE_BACK_HAPTIC_COMMIT_RATIO;
-
-    /**
-     * TEMPORARY DIAGNOSTIC (DS-760) — remove once the swipe-back no-pop is understood.
-     *
-     * The test device cannot run Xcode, so this borrows the one channel proven to reach it.
-     * On release past the commit threshold react-navigation should pop; if this screen is
-     * still mounted shortly after, the pop was requested and then swallowed — `Card` clears
-     * its 32ms `pendingGestureCallback` from `animate()`, and `componentDidUpdate` re-enters
-     * `animate()` for any re-render in that window.
-     *
-     * A `heavy` tick after release therefore means "gesture completed, pop lost". Silence
-     * means the gesture never reached the threshold, or was cancelled before END.
-     */
-    let lastTravel = 0;
-    let pendingPopProbe: ReturnType<typeof setTimeout> | undefined;
-
     const swipingListener = swiping.addListener(({ value }) => {
-      const wasSwiping = isSwiping;
       isSwiping = value === 1;
-      if (isSwiping) {
-        return;
-      }
-      hasFired.current = false;
-      if (wasSwiping && commitThreshold > 0 && lastTravel >= commitThreshold) {
-        pendingPopProbe = setTimeout(() => {
-          navigator?.maxApi?.triggerEventVibration?.('heavy');
-        }, 500);
+      if (!isSwiping) {
+        hasFired.current = false;
       }
-      lastTravel = 0;
     });
 
     const gestureListener = gesture.addListener(({ value: translation }) => {
-      if (!isSwiping || commitThreshold <= 0) {
+      if (!isSwiping) {
         return;
       }
 
-      lastTravel = translation * direction;
-
-      if (lastTravel < commitThreshold) {
+      if (translation * direction < SWIPE_BACK_HAPTIC_THRESHOLD) {
         hasFired.current = false;
         return;
       }
@@ -486,51 +467,12 @@ const useSwipeBackHaptic = () => {
     });
 
     return () => {
-      // unmount cancels the probe: the screen popped, which is the success case
-      if (pendingPopProbe !== undefined) {
-        clearTimeout(pendingPopProbe);
-      }
       gesture.removeListener(gestureListener);
       swiping.removeListener(swipingListener);
     };
   }, [animation, navigator]);
-};
 
-/**
- * Union of the two animation runtimes an internal foundation component might
- * receive. Public Screen props still accept React Native Animated.Value only;
- * this type keeps lower-level header/floating components compatible while they
- * render with reanimated.
- */
-export type AnimatedCompatValue = Animated.Value | SharedValue<number>;
-
-const isRNAnimatedValue = (v: unknown): v is Animated.Value =>
-  !!v &&
-  typeof (v as Animated.Value).setValue === 'function' &&
-  typeof (v as Animated.Value).interpolate === 'function';
-
-const isSharedValue = (v: unknown): v is SharedValue<number> =>
-  !!v && !isRNAnimatedValue(v) && 'value' in (v as object);
-
-const useNormalizedSharedValue = (
-  input?: AnimatedCompatValue,
-): SharedValue<number> => {
-  const fallback = useSharedValue(0);
-
-  useEffect(() => {
-    if (!isRNAnimatedValue(input)) {
-      return;
-    }
-    const id = input.addListener(({ value }) => {
-      fallback.value = value;
-    });
-    return () => input.removeListener(id);
-  }, [input, fallback]);
-
-  if (isSharedValue(input)) {
-    return input;
-  }
-  return fallback;
+  return null;
 };
 
 export {
@@ -544,5 +486,5 @@ export {
   useAppState,
   useNativeCanGoBack,
   useNormalizedSharedValue,
-  useSwipeBackHaptic,
+  SwipeBackHaptic,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.164.1-beta.6",
+    "version": "0.164.1-beta.8",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},