@momo-kits/foundation 0.163.1-beta.13 → 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';
@@ -51,13 +56,6 @@ import {
   SearchHeader,
 } from '../Application';
 
-/**
- * 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;
-
 export interface ScreenProps extends ViewProps {
   /**
    * ReactNode representing the content of the screen.
@@ -199,12 +197,30 @@ 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();
 
+    /**
+     * 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
@@ -239,7 +255,7 @@ const Screen = forwardRef(
     }, [customAnimatedValue, internalShared]);
 
     const currentTint = useRef<string | undefined>(undefined);
-
+    
     const isTab = !!screen?.bottomTab;
 
     let handleScroll;
@@ -251,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
      */
@@ -658,17 +693,6 @@ const Screen = forwardRef(
             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,
             ]}
           >
@@ -688,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.13",
+    "version": "0.163.1-beta.14",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},