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

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 { useAppState, useSwipeBackHaptic } from './utils';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
@@ -51,6 +51,7 @@ 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,

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,14 +1,28 @@
-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 { 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 {
+  ApplicationContext,
   MiniAppContext,
   ScreenContext,
   TrackingScopeContext,
@@ -18,6 +32,30 @@ 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
  */
@@ -38,8 +76,10 @@ const getStackOptions = (): StackNavigationOptions => {
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
-    gestureEnabled: false,
+    gestureEnabled: Platform.OS === 'ios',
     ...TransitionPresets.SlideFromRightIOS,
+    cardStyleInterpolator: forStackTransitionWithOverlay,
+    cardOverlayEnabled: true,
   };
 };
 
@@ -54,9 +94,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 +173,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 +285,160 @@ 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);
+
+  return useCallback(
+    (state?: NavigationState | PartialState<NavigationState>) => {
+      const canDismiss = getStackDepth(state) === 0;
+      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);
+      }
+    },
+    [],
+  );
+};
+
+/**
+ * finger travel that reads as "swipe back recognised". flat px on purpose:
+ * scaling it by screen width would move the tick to a different physical
+ * thumb distance on every device
+ */
+const SWIPE_BACK_HAPTIC_THRESHOLD = 100;
+
+const readAnimatedValue = (node: unknown, fallback: number): number => {
+  const getValue = (node as { __getValue?: () => unknown } | undefined)
+    ?.__getValue;
+  if (typeof getValue !== 'function') {
+    return fallback;
+  }
+
+  const value = getValue.call(node);
+  return typeof value === 'number' ? value : 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.
+ */
+const getSwipeGestureValue = (
+  progress?: Animated.AnimatedInterpolation<number>,
+): Animated.Value | undefined => {
+  const parent = (progress as { _parent?: Animated.Value } | undefined)
+    ?._parent;
+
+  return typeof parent?.addListener === 'function' &&
+    typeof parent?.removeListener === 'function'
+    ? parent
+    : undefined;
+};
+
+/**
+ * one light tick once the swipe back has travelled far enough to read as
+ * recognised. iOS only, mirroring `gestureEnabled` in getStackOptions.
+ *
+ * the listener is scoped to the `swiping === 1` window on purpose: the same
+ * animated value also drives the programmatic push and pop animations, so an
+ * unscoped listener would buzz on every navigation.
+ */
+const useSwipeBackHaptic = () => {
+  const { navigator } = useContext<any>(ApplicationContext);
+  const animation = useContext(CardAnimationContext);
+
+  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 hasFired = false;
+    let gestureListener: string | undefined;
+
+    const detachGesture = () => {
+      if (gestureListener !== undefined) {
+        gesture.removeListener(gestureListener);
+        gestureListener = undefined;
+      }
+      hasFired = false;
+    };
+
+    const swipingListener = swiping.addListener(({ value }) => {
+      if (value !== 1) {
+        detachGesture();
+        return;
+      }
+
+      if (gestureListener !== undefined) {
+        return;
+      }
+
+      /**
+       * sign, not magnitude: a leftward overdrag reports a negative
+       * translation and must not count as progress toward dismissal
+       */
+      const direction = readAnimatedValue(inverted, 1);
+      gestureListener = gesture.addListener(({ value: translation }) => {
+        if (translation * direction < SWIPE_BACK_HAPTIC_THRESHOLD) {
+          hasFired = false;
+          return;
+        }
+
+        if (!hasFired) {
+          hasFired = true;
+          navigator?.maxApi?.triggerEventVibration?.('light');
+        }
+      });
+    });
+
+    return () => {
+      detachGesture();
+      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;
@@ -271,9 +480,12 @@ export {
   getStackOptions,
   getModalOptions,
   getOptions,
+  getStackDepth,
   exportHeaderTitle,
   setAutomationID,
   useComponentId,
   useAppState,
+  useNativeCanGoBack,
   useNormalizedSharedValue,
+  useSwipeBackHaptic,
 };

package/package.json

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