@momo-kits/foundation 0.164.1-beta.7 → 0.164.1-beta.9

package/Application/BottomTab/index.tsx

@@ -153,7 +153,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
               initialParams,
               bottomTab: 'nested',
             }}
-            options={{ ...getStackOptions() }}
+            options={{ ...getStackOptions({ swipeBack: false }) }}
           />
         </Stack.Navigator>
       </Animated.View>
@@ -188,7 +188,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
                 initialParams,
                 bottomTab: 'default',
               }}
-              options={{ ...getStackOptions(), ...options }}
+              options={{ ...getStackOptions({ swipeBack: false }), ...options }}
             />
           </Stack.Navigator>
         </NavigationContainer>

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';
@@ -57,8 +59,10 @@ const forStackTransitionWithOverlay = (
 /**
  * default options for stack screen
  */
-const getStackOptions = (): StackNavigationOptions => {
-  return {
+const getStackOptions = ({
+  swipeBack = true,
+}: { swipeBack?: boolean } = {}): StackNavigationOptions => {
+  const base: StackNavigationOptions = {
     headerTitleAlign: 'left',
     headerTitle: props => <HeaderTitle {...props} />,
     headerTitleContainerStyle: {
@@ -74,6 +78,25 @@ const getStackOptions = (): StackNavigationOptions => {
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
+  };
+
+  /**
+   * A bottom tab stack holds a single route, so the card transition never runs and
+   * `CardContainer` pins `gestureEnabled` to false at index 0 regardless. What does bite is
+   * `cardOverlayEnabled`: `current.progress` rests at 1, so the overlay would sit at its full
+   * 0.6 forever instead of only during a push, tinting any tab screen that paints no
+   * background of its own. This branch is the option set from before swipe back, unchanged.
+   */
+  if (!swipeBack) {
+    return {
+      ...base,
+      gestureEnabled: false,
+      ...TransitionPresets.SlideFromRightIOS,
+    };
+  }
+
+  return {
+    ...base,
     gestureEnabled: Platform.OS === 'ios',
     ...TransitionPresets.SlideFromRightIOS,
     cardStyleInterpolator: forStackTransitionWithOverlay,
@@ -369,6 +392,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 +507,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.9",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},