@momo-kits/foundation 0.163.1-beta.15 → 0.163.1-beta.17

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

@@ -1,11 +1,18 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import {
   StackNavigationOptions,
   TransitionPresets,
 } 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 {
@@ -38,9 +45,6 @@ const getStackOptions = (): StackNavigationOptions => {
     headerLeft: (props: any) => <HeaderLeft {...props} />,
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
-    /**
-     * swipe back for iOS only, Android keeps the hardware back button
-     */
     gestureEnabled: Platform.OS === 'ios',
     ...TransitionPresets.SlideFromRightIOS,
   };
@@ -57,9 +61,6 @@ const getModalOptions = (): StackNavigationOptions => {
     cardOverlayEnabled: true,
     animation: 'none',
     presentation: 'transparentModal',
-    /**
-     * modal & bottom sheet dismiss through their own overlay/pan gesture
-     */
     gestureEnabled: false,
   };
 };
@@ -254,6 +255,55 @@ 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);
+      }
+    },
+    [],
+  );
+};
+
 /**
  * Union of the two animation runtimes an internal foundation component might
  * receive. Public Screen props still accept React Native Animated.Value only;
@@ -295,9 +345,11 @@ export {
   getStackOptions,
   getModalOptions,
   getOptions,
+  getStackDepth,
   exportHeaderTitle,
   setAutomationID,
   useComponentId,
   useAppState,
+  useNativeCanGoBack,
   useNormalizedSharedValue,
 };

package/package.json

@@ -1,35 +1,35 @@
 {
-    "name": "@momo-kits/foundation",
-    "version": "0.163.1-beta.15",
-    "description": "React Native Component Kits",
-    "main": "index.ts",
-    "scripts": {},
-    "keywords": [
-        "@momo-kits/foundation"
-    ],
-    "dependencies": {
-        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-        "@react-navigation/bottom-tabs": "7.4.2",
-        "@react-navigation/core": "7.12.1",
-        "@react-navigation/elements": "2.5.2",
-        "@react-navigation/native": "7.1.14",
-        "@react-navigation/routers": "7.4.1",
-        "@react-navigation/stack": "7.4.2",
-        "react-native-gesture-handler": "2.27.1",
-        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-        "react-native-reanimated": "4.2.2",
-        "react-native-safe-area-context": "5.5.2",
-        "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.2.4"
-    },
-    "peerDependencies": {
-        "react-native": "*"
-    },
-    "devDependencies": {
-        "@types/color": "3.0.6"
-    },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "license": "MoMo"
-}
+  "name": "@momo-kits/foundation",
+  "version": "0.163.1-beta.17",
+  "description": "React Native Component Kits",
+  "main": "index.ts",
+  "scripts": {},
+  "keywords": [
+    "@momo-kits/foundation"
+  ],
+  "dependencies": {
+    "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
+    "@react-navigation/bottom-tabs": "7.4.2",
+    "@react-navigation/core": "7.12.1",
+    "@react-navigation/elements": "2.5.2",
+    "@react-navigation/native": "7.1.14",
+    "@react-navigation/routers": "7.4.1",
+    "@react-navigation/stack": "7.4.2",
+    "react-native-gesture-handler": "2.27.1",
+    "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
+    "react-native-reanimated": "4.2.2",
+    "react-native-safe-area-context": "5.5.2",
+    "@shopify/flash-list": "2.1.0",
+    "lottie-react-native": "7.2.4"
+  },
+  "peerDependencies": {
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@types/color": "3.0.6"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MoMo"
+}