@momo-kits/foundation 0.163.1-beta.4 → 0.163.1-beta.6

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,32 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import {
+  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,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import { BlurView } from '@sbaiahmed1/react-native-blur';
 import type { SharedValue } from 'react-native-reanimated';
 import { useSharedValue } from 'react-native-reanimated';
 import {
@@ -18,6 +39,45 @@ import { HeaderBackground } from './Components/HeaderBackground';
 import { HeaderLeft } from './Components/HeaderLeft';
 import { HeaderRight } from './Components/HeaderRight';
 
+const forStackTransitionWithOverlay = (
+  props: StackCardInterpolationProps,
+): StackCardInterpolatedStyle => {
+  const { cardStyle, shadowStyle } =
+    CardStyleInterpolators.forHorizontalIOS(props);
+
+  return {
+    cardStyle,
+    shadowStyle,
+    overlayStyle: {
+      opacity: props.current.progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+        extrapolate: 'clamp',
+      }),
+    },
+  };
+};
+
+/**
+ * blur intensity stays fixed so only the wrapper's opacity animates per
+ * frame; animating blurAmount itself would re-render the native blur view
+ * on every frame of the transition
+ */
+const renderStackOverlay = ({
+  style,
+}: {
+  style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+}) => (
+  <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, style]}>
+    <BlurView
+      style={StyleSheet.absoluteFill}
+      blurType="xlight"
+      blurAmount={2}
+      overlayColor="rgba(253, 234, 244, 0.3)"
+    />
+  </Animated.View>
+);
+
 /**
  * default options for stack screen
  */
@@ -38,8 +98,11 @@ 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,
+    cardOverlay: renderStackOverlay,
   };
 };
 
@@ -54,9 +117,20 @@ 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 ||
+  typeof params.onBackHandler === 'function' ||
+  typeof params.onPressLeftHeader === 'function';
+
 /**
  * build react-navigation options
  */
@@ -125,6 +199,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 +311,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;
@@ -271,9 +401,11 @@ export {
   getStackOptions,
   getModalOptions,
   getOptions,
+  getStackDepth,
   exportHeaderTitle,
   setAutomationID,
   useComponentId,
   useAppState,
+  useNativeCanGoBack,
   useNormalizedSharedValue,
 };

package/package.json

@@ -1,35 +1,36 @@
 {
-    "name": "@momo-kits/foundation",
-    "version": "0.163.1-beta.4",
-    "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.6",
+  "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",
+    "@sbaiahmed1/react-native-blur": "6.0.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"
+}