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

package/Layout/Screen.tsx

@@ -25,13 +25,7 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import Reanimated, {
-  useAnimatedKeyboard,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
 import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
 import {
@@ -46,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,
@@ -200,27 +194,11 @@ 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();
 
-    /**
-     * On Android, the native root view already pads for the full IME inset
-     * (which itself includes the navigation bar's height) as soon as the
-     * keyboard shows. `useSafeAreaInsets()`'s own bottom recompute is JS-thread
-     * work (its own native listener, then a bridge crossing, then a React
-     * re-render) and always lands at least one frame after that native padding
-     * change, so any JS-driven correction (state + re-render, regardless of
-     * which event triggers it) has the same lag — the nav bar height gets
-     * counted twice for that window, visible as the footer overshooting
-     * before settling back down.
-     * `useAnimatedKeyboard()` sidesteps this: its worklet callback updates a
-     * shared value directly from the same native WindowInsetsAnimation
-     * callback driving the keyboard's own motion, on the UI thread, with no
-     * bridge crossing — so the footer's compensating style below can react
-     * in the same frame instead of a JS tick later.
-     */
-    const keyboard = useAnimatedKeyboard();
-
     /**
      * Dual animation source:
      * - `animatedValue` is a react-native `Animated.Value` driven natively by the
@@ -261,31 +239,11 @@ 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;
     }
 
-    /**
-     * Android only: while the keyboard is up, MainActivity's own native inset
-     * listener already accounts for the full space it needs (keyboard height
-     * plus nav bar) on the root view, so the footer here should only add its
-     * usual Spacing.S gap — not `bottomInset` on top, which would double-count
-     * the nav bar for as long as the keyboard is visible.
-     *
-     * `isAndroid` is read here (not inside the worklet) because referencing
-     * `Platform.OS` directly inside `useAnimatedStyle` captures the whole
-     * `Platform` module into the worklet closure — Reanimated then fails
-     * trying to serialize that module object for the UI thread.
-     */
-    const isAndroid = Platform.OS === 'android';
-    const footerAnimatedStyle = useAnimatedStyle(() => {
-      const paddingBottom =
-        isAndroid && keyboard.height.value > 0 ? Spacing.S : bottomInset + Spacing.S;
-      return { paddingBottom };
-    });
-
     /**
      * inject params for screen tracking
      */
@@ -712,15 +670,17 @@ const Screen = forwardRef(
           )}
 
           {Footer && (
-            <Reanimated.View
+            <View
               style={[
                 styles.shadow,
-                { backgroundColor: theme.colors.background.surface },
-                footerAnimatedStyle,
+                {
+                  paddingBottom: bottomInset + Spacing.S,
+                  backgroundColor: theme.colors.background.surface,
+                },
               ]}
             >
               <Section>{Footer}</Section>
-            </Reanimated.View>
+            </View>
           )}
         </KeyboardAvoidingView>
       </View>

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