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

package/Application/utils.tsx

@@ -38,10 +38,7 @@ 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',
+    gestureEnabled: false,
     ...TransitionPresets.SlideFromRightIOS,
   };
 };
@@ -57,23 +54,9 @@ const getModalOptions = (): StackNavigationOptions => {
     cardOverlayEnabled: true,
     animation: 'none',
     presentation: 'transparentModal',
-    /**
-     * modal & bottom sheet dismiss through their own overlay/pan gesture
-     */
-    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
  */
@@ -142,13 +125,6 @@ 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,

package/Layout/Screen.tsx

@@ -26,7 +26,6 @@ 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 {
@@ -41,7 +40,7 @@ import styles from './styles';
 import { HeaderType } from './types';
 import { InputRef } from '../Input';
 import { exportHeaderTitle, getOptions } from '../Application/utils';
-import { validateChildren } from './utils';
+import { useBottomSafeAreaInset, validateChildren } from './utils';
 import Section from './Section';
 import {
   HeaderBackground,
@@ -195,7 +194,9 @@ const Screen = forwardRef(
     const { width: widthDevice } = useWindowDimensions();
     const { theme, navigator } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
-    const insets = useSafeAreaInsets();
+    // AI-GENERATED START: keyboard-aware bottom inset (DS-747)
+    const bottomInset = useBottomSafeAreaInset();
+    // AI-GENERATED END: keyboard-aware bottom inset (DS-747)
     const heightHeader = useHeaderHeight();
 
     /**
@@ -238,7 +239,6 @@ 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,5 +1,6 @@
-import React, { Fragment, ReactElement } from 'react';
-import { useWindowDimensions } from 'react-native';
+import React, { Fragment, ReactElement, useEffect, useState } from 'react';
+import { Keyboard, Platform, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 /**
  * validate children type
@@ -44,4 +45,72 @@ const useGridSystem = () => {
   return { numberOfColumns };
 };
 
-export { useGridSystem, validateChildren };
+// 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 };

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.16",
+  "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"
+}