@momo-kits/foundation 0.164.1-beta.7 → 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 } from './utils';
+import { SwipeBackHaptic, useAppState } from './utils';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
@@ -413,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

@@ -6,6 +6,7 @@ import React, {
   useRef,
 } from 'react';
 import {
+  CardAnimationContext,
   CardStyleInterpolators,
   StackNavigationOptions,
   TransitionPresets,
@@ -16,6 +17,7 @@ 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';
@@ -369,6 +371,110 @@ const useNormalizedSharedValue = (
   return fallback;
 };
 
+/**
+ * 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> | undefined,
+): Animated.Value | undefined => {
+  const parent = (progress as { _parent?: unknown } | undefined)?._parent as
+    | Animated.Value
+    | undefined;
+
+  return typeof parent?.addListener === 'function' &&
+    typeof parent?.removeListener === 'function'
+    ? parent
+    : undefined;
+};
+
+const readAnimatedValue = (node: unknown, fallback: number): number => {
+  const value = (node as { __getValue?: () => unknown } | undefined)?.__getValue?.();
+  return typeof value === 'number' ? value : fallback;
+};
+
+/**
+ * Haptic tick for the iOS swipe back gesture.
+ *
+ * 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.
+ *
+ * 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 SwipeBackHaptic = () => {
+  const { navigator } = useContext<any>(ApplicationContext);
+  const animation = useContext(CardAnimationContext);
+  const hasFired = useRef(false);
+
+  useEffect(() => {
+    if (Platform.OS !== 'ios' || !animation) {
+      return;
+    }
+
+    const { swiping, inverted, current } = animation;
+    const gesture = getSwipeGestureValue(current?.progress);
+    if (!gesture || typeof swiping?.addListener !== 'function') {
+      return;
+    }
+
+    let isSwiping = readAnimatedValue(swiping, 0) === 1;
+
+    /**
+     * sign, not magnitude: a leftward overdrag reports a negative translation and must
+     * not count as progress toward dismissal
+     */
+    const direction = readAnimatedValue(inverted, 1);
+
+    const swipingListener = swiping.addListener(({ value }) => {
+      isSwiping = value === 1;
+      if (!isSwiping) {
+        hasFired.current = false;
+      }
+    });
+
+    const gestureListener = gesture.addListener(({ value: translation }) => {
+      if (!isSwiping) {
+        return;
+      }
+
+      if (translation * direction < SWIPE_BACK_HAPTIC_THRESHOLD) {
+        hasFired.current = false;
+        return;
+      }
+
+      if (!hasFired.current) {
+        hasFired.current = true;
+        navigator?.maxApi?.triggerEventVibration?.('light');
+      }
+    });
+
+    return () => {
+      gesture.removeListener(gestureListener);
+      swiping.removeListener(swipingListener);
+    };
+  }, [animation, navigator]);
+
+  return null;
+};
+
 export {
   getStackOptions,
   getModalOptions,
@@ -380,4 +486,5 @@ export {
   useAppState,
   useNativeCanGoBack,
   useNormalizedSharedValue,
+  SwipeBackHaptic,
 };

package/package.json

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