@momo-kits/foundation 0.163.1-beta.3 → 0.163.1-beta.5

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

@@ -315,6 +315,7 @@ const StackScreen: React.FC<any> = props => {
     <ScreenContext.Provider
       value={{
         screenName,
+        bottomTab: !!bottomTab,
         onElementLoad: (item: any) => {
           /**
            * widget handle

package/Application/utils.tsx

@@ -1,11 +1,23 @@
-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 } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import { useSharedValue } from 'react-native-reanimated';
 import {
@@ -18,6 +30,26 @@ 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: {
+      backgroundColor: '#FDEAF4',
+      opacity: props.current.progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 0.3],
+        extrapolate: 'clamp',
+      }),
+    },
+  };
+};
+
 /**
  * default options for stack screen
  */
@@ -38,8 +70,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 +88,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 +170,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 +282,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 +372,11 @@ export {
   getStackOptions,
   getModalOptions,
   getOptions,
+  getStackDepth,
   exportHeaderTitle,
   setAutomationID,
   useComponentId,
   useAppState,
+  useNativeCanGoBack,
   useNormalizedSharedValue,
 };

package/Layout/Screen.tsx

@@ -25,10 +25,7 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import {
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
@@ -166,13 +163,6 @@ export interface ScreenProps extends ViewProps {
   trackingParams?: ScreenTrackingParams;
 }
 
-/**
- * Scroll distance (px) over which the animated search header collapses from its
- * expanded to its docked state — the input range consumed by `HeaderExtendHeader`
- * and the settle threshold in `handleScrollEnd`.
- */
-const SEARCH_HEADER_COLLAPSE_DISTANCE = 100;
-
 const Screen = forwardRef(
   (
     {
@@ -202,8 +192,8 @@ const Screen = forwardRef(
     ref: any,
   ) => {
     const screenRef = useRef<View | ScrollView>(null);
-    const { width: widthDevice, height: heightDevice } = useWindowDimensions();
-    const { theme } = useContext(ApplicationContext);
+    const { width: widthDevice } = useWindowDimensions();
+    const { theme, navigator } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
@@ -242,7 +232,8 @@ const Screen = forwardRef(
     }, [customAnimatedValue, internalShared]);
 
     const currentTint = useRef<string | undefined>(undefined);
-    const isTab = navigation?.instance?.getState?.()?.type === 'tab';
+    
+    const isTab = !!screen?.bottomTab;
 
     let handleScroll;
     let Component: any = View;
@@ -657,23 +648,9 @@ const Screen = forwardRef(
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}
             scrollEventThrottle={16}
-            style={[
-              Styles.flex,
-              !scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
-            ]}
+            style={[Styles.flex]}
             contentContainerStyle={[
               scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
-              // The animated search header collapses as the body scrolls. When the
-              // body is short (e.g. no search history) the ScrollView is barely
-              // scrollable, so overscroll bounce feeds the scroll-driven animation
-              // and the input jitters on its way up to the header. A ScrollView
-              // frame can never exceed the window, so forcing the content to be at
-              // least one screen plus the collapse distance guarantees the animation
-              // always has room to complete smoothly, independent of body content.
-              scrollable &&
-                inputSearchProps && {
-                  minHeight: heightDevice + SEARCH_HEADER_COLLAPSE_DISTANCE,
-                },
               scrollViewProps?.contentContainerStyle,
             ]}
           >
@@ -687,9 +664,7 @@ const Screen = forwardRef(
               <FloatingButton
                 {...floatingButtonProps}
                 animatedValue={sharedValue}
-                bottom={
-                  Footer || isTab ? 12 : bottomInset + Spacing.S
-                }
+                bottom={Footer || isTab ? 12 : bottomInset + Spacing.S}
               />
             </View>
           )}

package/package.json

@@ -1,35 +1,35 @@
 {
-    "name": "@momo-kits/foundation",
-    "version": "0.163.1-beta.3",
-    "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.5",
+  "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"
+}