@momo-kits/foundation 0.163.1-beta.16 → 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,7 +45,7 @@ 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,
   };
 };
@@ -54,9 +61,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 +143,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 +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;
@@ -271,9 +345,11 @@ export {
   getStackOptions,
   getModalOptions,
   getOptions,
+  getStackDepth,
   exportHeaderTitle,
   setAutomationID,
   useComponentId,
   useAppState,
+  useNativeCanGoBack,
   useNormalizedSharedValue,
 };

package/Layout/Screen.tsx

@@ -26,6 +26,7 @@ import {
   ViewProps,
 } from 'react-native';
 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';
 import {
@@ -40,7 +41,7 @@ import styles from './styles';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
 import { exportHeaderTitle, getOptions } from '../Application/utils';
-import { useBottomSafeAreaInset, validateChildren } from './utils';
+import { validateChildren } from './utils';
 import Section from './Section';
 import {
   HeaderBackground,
@@ -194,9 +195,7 @@ const Screen = forwardRef(
     const { width: widthDevice } = useWindowDimensions();
     const { theme, navigator } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
-    // AI-GENERATED START: keyboard-aware bottom inset (DS-747)
-    const bottomInset = useBottomSafeAreaInset();
-    // AI-GENERATED END: keyboard-aware bottom inset (DS-747)
+    const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
 
     /**
@@ -239,6 +238,7 @@ const Screen = forwardRef(
     let handleScroll;
     let Component: any = View;
 
+    const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
     let keyboardOffset = heightHeader - bottomInset;
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
       keyboardOffset = -bottomInset;

package/Layout/utils.ts

@@ -1,6 +1,5 @@
-import React, { Fragment, ReactElement, useEffect, useState } from 'react';
-import { Keyboard, Platform, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import React, { Fragment, ReactElement } from 'react';
+import { useWindowDimensions } from 'react-native';
 
 /**
  * validate children type
@@ -45,72 +44,4 @@ const useGridSystem = () => {
   return { numberOfColumns };
 };
 
-// AI-GENERATED START: keyboard-aware bottom safe-area inset (DS-747)
-/**
- * Android 16 (API 36) ignores `android:windowOptOutEdgeToEdgeEnforcement`, so the host
- * app is always edge-to-edge and `insets.bottom` reports the navigation bar height
- * instead of 0. Android <= 15 still honours the opt-out, which is why the footer only
- * jitters on Android 16.
- */
-const IS_EDGE_TO_EDGE_ENFORCED =
-  Platform.OS === 'android' && Number(Platform.Version) >= 36;
-
-/**
- * Tracks IME visibility. On Android `keyboardDidShow` is emitted as soon as the IME
- * becomes visible, ahead of the root view being resized for it.
- */
-const useIsKeyboardVisible = () => {
-  const [isKeyboardVisible, setIsKeyboardVisible] = useState(
-    () => IS_EDGE_TO_EDGE_ENFORCED && Keyboard.isVisible(),
-  );
-
-  useEffect(() => {
-    if (!IS_EDGE_TO_EDGE_ENFORCED) {
-      return;
-    }
-
-    const showSubscription = Keyboard.addListener('keyboardDidShow', () =>
-      setIsKeyboardVisible(true),
-    );
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', () =>
-      setIsKeyboardVisible(false),
-    );
-
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-
-  return isKeyboardVisible;
-};
-
-/**
- * Bottom safe-area inset for chrome anchored to the bottom edge (footer, floating
- * button, scroll padding).
- *
- * `react-native-safe-area-context` recomputes its insets from an `onPreDraw` pass, so
- * the drop to 0 that happens once the IME covers the navigation bar only reaches JS
- * *after* the root view has already shrunk, and then only as a state update. For those
- * frames the footer keeps padding for a navigation bar the keyboard already covers, so
- * it lifts off the keyboard and snaps back down when the new inset lands. Zeroing the
- * inset on keyboard visibility removes that intermediate state.
- *
- * The keyboard flag is only allowed to *remove* inset, never to restore it: on hide it
- * flips back before the root view grows again, and `insets.bottom` is still 0 at that
- * point, so the restore stays driven by the inset itself and the footer does not jump
- * the other way.
- */
-const useBottomSafeAreaInset = () => {
-  const insets = useSafeAreaInsets();
-  const isKeyboardVisible = useIsKeyboardVisible();
-
-  if (Platform.OS === 'ios') {
-    return Math.min(insets.bottom, 21);
-  }
-
-  return isKeyboardVisible ? 0 : insets.bottom;
-};
-// AI-GENERATED END: keyboard-aware bottom safe-area inset (DS-747)
-
-export { useBottomSafeAreaInset, useGridSystem, validateChildren };
+export { useGridSystem, validateChildren };

package/package.json

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