@momo-kits/foundation 0.164.1-beta.1 → 0.164.1-beta.10

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/NavigationContainer.tsx

@@ -16,7 +16,7 @@ import { DeviceEventEmitter } from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
-import { getModalOptions, getStackOptions } from './utils';
+import { getModalOptions, getStackOptions, useNativeCanGoBack } from './utils';
 import { NavigationContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import Localize from './Localize';
@@ -93,6 +93,7 @@ const Navigation: React.FC<any> = ({
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
   const insets = useSafeAreaInsets();
+  const syncCanGoBack = useNativeCanGoBack();
 
   let headerBackground = context?.designSystemConfig?.config?.headerBar;
   let headerGradient = theme.colors?.gradient;
@@ -192,7 +193,9 @@ const Navigation: React.FC<any> = ({
           ref={navigationRef}
           onReady={() => {
             isReady.current = true;
+            syncCanGoBack(navigationRef.current?.getRootState?.());
           }}
+          onStateChange={syncCanGoBack}
         >
           <Stack.Navigator
             initialRouteName="Stack"

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/WidgetContainer.tsx

@@ -1,7 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
-import ScaleSizeProvider from './ScaleSizeProvider';
 import { WidgetContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import Localize from './Localize';

package/Application/utils.tsx

@@ -1,11 +1,25 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import {
+  CardAnimationContext,
+  CardStyleInterpolators,
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
+import type {
+  StackCardInterpolatedStyle,
+  StackCardInterpolationProps,
+} 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, Platform } from 'react-native';
+import { Animated, AppState, NativeModules, Platform } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import { useSharedValue } from 'react-native-reanimated';
 import {
@@ -18,11 +32,37 @@ import { HeaderBackground } from './Components/HeaderBackground';
 import { HeaderLeft } from './Components/HeaderLeft';
 import { HeaderRight } from './Components/HeaderRight';
 
+const forStackTransitionWithOverlay = (
+  props: StackCardInterpolationProps,
+): StackCardInterpolatedStyle => {
+  const { cardStyle } = CardStyleInterpolators.forHorizontalIOS(props);
+  return {
+    cardStyle,
+    shadowStyle: {
+      shadowOpacity: props.current.progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 0.3],
+        extrapolate: 'clamp',
+      }),
+    },
+    overlayStyle: {
+      backgroundColor: '#FDEAF4',
+      opacity: props.current.progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 0.6],
+        extrapolate: 'clamp',
+      }),
+    },
+  };
+};
+
 /**
  * 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: {
@@ -38,8 +78,29 @@ const getStackOptions = (): StackNavigationOptions => {
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
-    gestureEnabled: false,
+  };
+
+  /**
+   * 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,
+    cardOverlayEnabled: true,
   };
 };
 
@@ -54,9 +115,17 @@ const getModalOptions = (): StackNavigationOptions => {
     cardOverlayEnabled: true,
     animation: 'none',
     presentation: 'transparentModal',
+    gestureEnabled: false,
   };
 };
 
+/**
+ * screen owns its back flow (guard popup, custom handler or no back button),
+ * so swipe back must not bypass it
+ */
+const hasCustomBackHandling = (params: NavigationOptions) =>
+  params.preventBack !== undefined || params.hiddenBack === true;
+
 /**
  * build react-navigation options
  */
@@ -125,6 +194,13 @@ const getOptions = (
     };
   }
 
+  /**
+   * only ever turns swipe back off, screens opt in via gestureEnabled
+   */
+  if (params.gestureEnabled === undefined && hasCustomBackHandling(params)) {
+    options.gestureEnabled = false;
+  }
+
   return {
     ...params,
     ...options,
@@ -230,6 +306,65 @@ const useAppState = () => {
   };
 };
 
+/**
+ * screens the focused navigation branch can still pop.
+ * only stack navigators count, switching bottom tab is not a back step
+ */
+const getStackDepth = (
+  state?: NavigationState | PartialState<NavigationState>,
+): number => {
+  const routes = state?.routes;
+  if (!routes?.length) {
+    return 0;
+  }
+
+  const index = state?.index ?? routes.length - 1;
+  const depth = state?.type === 'stack' ? index : 0;
+
+  return depth + getStackDepth(routes[index]?.state);
+};
+
+/**
+ * report back ownership to the native container: `true` when the mini app sits
+ * on its root screen and native may dismiss the rootview, `false` while
+ * react-navigation still has screens (or a modal / bottom sheet) to pop.
+ */
+const useNativeCanGoBack = () => {
+  const lastValue = useRef<boolean | undefined>(undefined);
+
+  const report = useCallback((canDismiss: boolean) => {
+    if (lastValue.current === canDismiss) {
+      return;
+    }
+
+    const setCanGoBack = NativeModules?.MiniAppModule?.setCanGoBack;
+    if (typeof setCanGoBack !== 'function') {
+      return;
+    }
+
+    lastValue.current = canDismiss;
+    try {
+      setCanGoBack(canDismiss);
+    } catch (error) {
+      console.warn('[NavigationContainer] setCanGoBack failed:', error);
+    }
+  }, []);
+
+  /**
+   * The flag lives on the host, not in this tree, so leaving it at `false` on unmount
+   * strands every mini app opened afterwards: the host keeps believing react-navigation
+   * still has screens to pop, and goes on routing back into a container that is gone.
+   * Hand ownership back on the way out.
+   */
+  useEffect(() => () => report(true), [report]);
+
+  return useCallback(
+    (state?: NavigationState | PartialState<NavigationState>) =>
+      report(getStackDepth(state) === 0),
+    [report],
+  );
+};
+
 /**
  * Union of the two animation runtimes an internal foundation component might
  * receive. Public Screen props still accept React Native Animated.Value only;
@@ -267,13 +402,120 @@ 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,
   getOptions,
+  getStackDepth,
   exportHeaderTitle,
   setAutomationID,
   useComponentId,
   useAppState,
+  useNativeCanGoBack,
   useNormalizedSharedValue,
+  SwipeBackHaptic,
 };

package/package.json

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