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

package/Layout/Screen.tsx

@@ -25,7 +25,12 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import { useSharedValue, withTiming } from 'react-native-reanimated';
+import Reanimated, {
+  useAnimatedKeyboard,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
@@ -198,6 +203,24 @@ const Screen = forwardRef(
     const insets = useSafeAreaInsets();
     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
@@ -244,6 +267,25 @@ const Screen = forwardRef(
       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
      */
@@ -670,17 +712,15 @@ const Screen = forwardRef(
           )}
 
           {Footer && (
-            <View
+            <Reanimated.View
               style={[
                 styles.shadow,
-                {
-                  paddingBottom: bottomInset + Spacing.S,
-                  backgroundColor: theme.colors.background.surface,
-                },
+                { backgroundColor: theme.colors.background.surface },
+                footerAnimatedStyle,
               ]}
             >
               <Section>{Footer}</Section>
-            </View>
+            </Reanimated.View>
           )}
         </KeyboardAvoidingView>
       </View>

package/package.json

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