@momo-kits/foundation 0.161.2-test.1 → 0.162.1-beta.2

package/Application/BottomSheet.tsx

@@ -37,10 +37,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  // AI-GENERATED START: iOS caps at 21pt (home indicator), Android uses full nav bar height
   const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
   const keyboardOffset = heightHeader - bottomInset;
-  // AI-GENERATED END
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 

package/Application/BottomTab/index.tsx

@@ -296,9 +296,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
           activeTintColor={theme.colors.primary}
           style={[
             {
-              // AI-GENERATED START: iOS caps at 21pt (home indicator), Android uses full nav bar height
               height: 64 + (Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom),
-              // AI-GENERATED END
             },
           ]}
         />

package/Application/Components/HeaderAnimated.tsx

@@ -8,6 +8,7 @@ import { type HeaderAnimatedProps } from '../types';
 import React from 'react';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
+import { useNormalizedSharedValue } from '../utils';
 
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
@@ -15,23 +16,19 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   useScale = true,
   children,
 }) => {
+  const sharedValue = useNormalizedSharedValue(animatedValue);
   const animatedStyle = useAnimatedStyle(() => {
     const scale = useScale
-      ? interpolate(
-          animatedValue.value,
-          [-300, 0, 300],
-          [4, 1, 1],
-          Extrapolation.CLAMP,
-        )
+      ? interpolate(sharedValue.value, [-300, 0, 300], [4, 1, 1], Extrapolation.CLAMP)
       : 1;
     const opacity = interpolate(
-      animatedValue.value,
+      sharedValue.value,
       [0, 150, 300],
       [1, 0.5, 0],
       Extrapolation.CLAMP,
     );
     const translateY = interpolate(
-      animatedValue.value,
+      sharedValue.value,
       [-300, 0],
       [-80, -2],
       Extrapolation.CLAMP,

package/Application/Components/HeaderBackground.tsx

@@ -1,12 +1,13 @@
 import LinearGradient from 'react-native-linear-gradient';
 import { StyleSheet, View } from 'react-native';
 import React, { useContext } from 'react';
-import Animated, { useSharedValue } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { HeaderBackgroundProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Colors, Styles } from '../../Consts';
 import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';
+import { useNormalizedSharedValue } from '../utils';
 
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
@@ -19,8 +20,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   const context = useContext<any>(MiniAppContext);
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerImage = headerBackground ?? theme.assets?.headerBackground;
-  const fallback = useSharedValue(0);
-  const sv = animatedValue ?? fallback;
+  const sharedValue = useNormalizedSharedValue(animatedValue);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -29,7 +29,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       <BackgroundImageView
         useShadowHeader={useShadowHeader}
         heightHeader={'100%'}
-        animatedValue={sv}
+        animatedValue={sharedValue}
         headerBackground={headerImage}
       />
       <View style={styles.gradientContainer}>

package/Application/Components/HeaderExtendHeader.tsx

@@ -5,8 +5,6 @@ import Animated, {
   Extrapolation,
   interpolate,
   useAnimatedStyle,
-  useSharedValue,
-  type SharedValue,
 } from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { HeaderType } from '../../Layout/types';
@@ -16,6 +14,10 @@ import { Colors, Radius, Spacing } from '../../Consts';
 import { Image } from '../../Image';
 import { SearchHeaderProps } from '../types';
 import BackgroundImageView from './BackgroundImageView';
+import {
+  AnimatedCompatValue,
+  useNormalizedSharedValue,
+} from '../utils';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
@@ -24,7 +26,7 @@ const { width: screenWidth } = Dimensions.get('window');
 
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
-  animatedValue: SharedValue<number>;
+  animatedValue: AnimatedCompatValue;
   heightHeader: number;
   headerRightWidth: number;
   inputSearchProps?: SearchHeaderProps;
@@ -46,8 +48,7 @@ const HeaderExtendHeader: React.FC<{
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const fallback = useSharedValue(0);
-  const sv = animatedValue ?? fallback;
+  const sharedValue = useNormalizedSharedValue(animatedValue);
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
@@ -61,7 +62,7 @@ const HeaderExtendHeader: React.FC<{
 
   const heightStyle = useAnimatedStyle(() => ({
     height: interpolate(
-      sv.value,
+      sharedValue.value,
       [0, 100],
       [heightHeader + 52, heightHeader],
       Extrapolation.CLAMP,
@@ -69,14 +70,14 @@ const HeaderExtendHeader: React.FC<{
   }));
 
   const gradientOpacityStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(sv.value, [0, 52], [1, 0], Extrapolation.CLAMP),
+    opacity: interpolate(sharedValue.value, [0, 52], [1, 0], Extrapolation.CLAMP),
   }));
 
   const searchTranslateStyle = useAnimatedStyle(() => ({
     transform: [
       {
         translateX: interpolate(
-          sv.value,
+          sharedValue.value,
           [0, 100],
           [SCREEN_PADDING, leftPosition],
           Extrapolation.CLAMP,
@@ -84,7 +85,7 @@ const HeaderExtendHeader: React.FC<{
       },
     ],
     width: interpolate(
-      sv.value,
+      sharedValue.value,
       [0, 100],
       [
         screenWidth - SCREEN_PADDING * 2,
@@ -95,7 +96,7 @@ const HeaderExtendHeader: React.FC<{
   }));
 
   const searchBackgroundStyle = useAnimatedStyle(() => {
-    const t = Math.min(Math.max(sv.value / 100, 0), 1);
+    const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);
     return { backgroundColor: t === 0
       ? theme.colors.background.surface
       : theme.colors.background.default };
@@ -103,7 +104,7 @@ const HeaderExtendHeader: React.FC<{
 
   const extendedHeightStyle = useAnimatedStyle(() => ({
     height: interpolate(
-      sv.value,
+      sharedValue.value,
       [0, 100],
       [heightHeader + 52, heightHeader],
       Extrapolation.CLAMP,
@@ -117,7 +118,7 @@ const HeaderExtendHeader: React.FC<{
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
-          animatedValue={sv}
+          animatedValue={sharedValue}
           headerBackground={headerBackground}
         />
         <Animated.View
@@ -185,7 +186,7 @@ const HeaderExtendHeader: React.FC<{
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
-          animatedValue={sv}
+          animatedValue={sharedValue}
           headerBackground={headerBackground}
         />
         {!!gradientColor && (

package/Application/Components/HeaderLeft.tsx

@@ -86,7 +86,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const styles = StyleSheet.create({
   headerLeft: {
-    marginLeft: 8,
+    marginLeft: 12,
   },
 });
 

package/Application/Components/HeaderTitle.tsx

@@ -9,7 +9,6 @@ import Animated, {
   Extrapolation,
   interpolate,
   useAnimatedStyle,
-  type SharedValue,
 } from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { exportFontFamily, Text, useScaleSize } from '../../Text';
@@ -22,6 +21,10 @@ import {
 import { Image } from '../../Image';
 import { Icon } from '../../Icon';
 import { Skeleton } from '../../Skeleton';
+import {
+  AnimatedCompatValue,
+  useNormalizedSharedValue,
+} from '../utils';
 
 type HeaderTitleInterpolate = {
   inputRange: number[];
@@ -29,7 +32,7 @@ type HeaderTitleInterpolate = {
 };
 
 type HeaderTitleExtraProps = {
-  animatedValue?: SharedValue<number>;
+  animatedValue?: AnimatedCompatValue;
   interpolate?: HeaderTitleInterpolate;
   tintColor?: string;
   children?: React.ReactNode;
@@ -47,15 +50,16 @@ const HeaderTitle: React.FC<HeaderTitleExtraProps & { [key: string]: any }> = pr
     inputRange: [0, 200],
     outputRange: [0, 1],
   };
-  const animatedValue = props.animatedValue;
+  const hasAnimated = props.animatedValue != null;
+  const sharedValue = useNormalizedSharedValue(props.animatedValue);
 
   const animatedStyle = useAnimatedStyle(() => {
-    if (!animatedValue) {
+    if (!hasAnimated) {
       return { opacity: 1 };
     }
     return {
       opacity: interpolate(
-        animatedValue.value,
+        sharedValue.value,
         interpolateConfig.inputRange,
         interpolateConfig.outputRange,
         Extrapolation.CLAMP,

package/Application/Components/SearchHeader.tsx

@@ -6,14 +6,12 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
+import { useNormalizedSharedValue } from '../utils';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -31,13 +29,12 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const BACK_WIDTH = 28;
     const { width: screenWidth } = Dimensions.get('window');
 
-    const fallback = useSharedValue(0);
-    const sv = animatedValue ?? fallback;
+    const sharedValue = useNormalizedSharedValue(animatedValue);
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
     const headerRightWidth = props?.headerRightWidth ?? 73;
 
     const backgroundStyle = useAnimatedStyle(() => {
-      const t = Math.min(Math.max(sv.value / 100, 0), 1);
+      const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);
       return {
         backgroundColor: t === 0
           ? theme.colors.background.surface

package/Application/NavigationContainer.tsx

@@ -19,7 +19,7 @@ import Navigator from './Navigator';
 import ScaleSizeProvider from './ScaleSizeProvider';
 import { getModalOptions, getStackOptions } from './utils';
 import { NavigationContainerProps } from './types';
-import { ApplicationContext, MiniAppContext } from '../Context';
+import { ApplicationContext, FontScaleConfig, MiniAppContext } from '../Context';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
@@ -29,6 +29,29 @@ import { HeaderBackground } from './Components/HeaderBackground';
 
 const Stack = createStackNavigator();
 
+const FONT_SCALE_OBSERVER_KEY = 'font_scale_config';
+
+// AI-GENERATED START: parse the font_scale_config first-frame seed read straight from async storage (string | {response} | object)
+const parseSeedFontScaleConfig = (raw: any): FontScaleConfig | undefined => {
+  let data = raw;
+  if (typeof data === 'string') {
+    try {
+      data = JSON.parse(data);
+    } catch {
+      return undefined;
+    }
+  }
+  data = data?.response ?? data;
+  if (!data || (data.useOSFontScale === undefined && data.userScaleRate === undefined)) {
+    return undefined;
+  }
+  return {
+    useOSFontScale: data.useOSFontScale,
+    userScaleRate: data.userScaleRate,
+  };
+};
+// AI-GENERATED END: parse the font_scale_config first-frame seed read straight from async storage (string | {response} | object)
+
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme = defaultTheme,
@@ -45,6 +68,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState<any>({});
+  // AI-GENERATED START: self-seed first-frame font scale by reading font_scale_config straight from async storage
+  const [observerFontScaleConfig, setObserverFontScaleConfig] = useState<
+    FontScaleConfig | undefined
+  >(() => parseSeedFontScaleConfig(maxApi?.getItem?.(FONT_SCALE_OBSERVER_KEY)) ?? context?.fontScaleConfig);
+  // AI-GENERATED END: self-seed first-frame font scale by reading font_scale_config straight from async storage
 
   const mergedContext = {
     ...context,
@@ -55,10 +83,24 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     },
   };
 
+  useEffect(() => {
+    const sub = maxApi?.observer?.(
+      FONT_SCALE_OBSERVER_KEY,
+      (data: FontScaleConfig) => {
+        setObserverFontScaleConfig(data ?? undefined);
+      },
+    );
+    return () => {
+      sub?.remove?.();
+    };
+  }, [maxApi]);
+
   return (
     <SafeAreaProvider>
       <MiniAppContext.Provider value={mergedContext}>
-        <ScaleSizeProvider scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}>
+        <ScaleSizeProvider
+          fontScaleConfig={observerFontScaleConfig}
+        >
           <Navigation
             screen={screen}
             theme={theme}

package/Application/ScaleSizeProvider.tsx

@@ -1,13 +1,15 @@
-import React, { FC } from 'react';
+import React, { FC, useContext } from 'react';
 import { ScaleSizeContext } from '../Context';
 import { ScaleSizeProviderProps } from './types';
 
 const ScaleSizeProvider: FC<ScaleSizeProviderProps> = ({
-  scaleSizeMaxRate,
+  fontScaleConfig,
   children,
 }) => {
+  // Inherit the config from an upper layer (e.g. app root) when the host doesn't set it via MiniAppContext.
+  const parent = useContext(ScaleSizeContext);
   return (
-    <ScaleSizeContext.Provider value={{ scaleSizeMaxRate }}>
+    <ScaleSizeContext.Provider value={fontScaleConfig ?? parent}>
       {children}
     </ScaleSizeContext.Provider>
   );

package/Application/WidgetContainer.tsx

@@ -78,7 +78,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
       <SafeAreaProvider>
         <MiniAppContext.Provider value={mergedContext}>
           <ScaleSizeProvider
-            scaleSizeMaxRate={mergedContext?.scaleSizeMaxRate}
+            fontScaleConfig={mergedContext?.fontScaleConfig}
           >
           <ApplicationContext.Provider
             value={{

package/Application/types.ts

@@ -2,6 +2,7 @@ import { EventArg } from '@react-navigation/core';
 import { StackNavigationOptions } from '@react-navigation/stack';
 import React, { ReactNode } from 'react';
 import {
+  Animated,
   TouchableOpacityProps,
   ViewProps,
   ViewStyle,
@@ -9,6 +10,7 @@ import {
 import type { SharedValue } from 'react-native-reanimated';
 import { PopupNotifyProps } from '../Popup/types';
 import { InputRef, InputSearchProps } from '../Input';
+import { FontScaleConfig } from '../Context';
 import Navigation from './Navigation';
 
 export type NavigationProps = {
@@ -108,7 +110,7 @@ export type Theme = {
 };
 
 export type ScaleSizeProviderProps = {
-  scaleSizeMaxRate?: number;
+  fontScaleConfig?: FontScaleConfig;
   children: ViewProps['children'];
 };
 
@@ -258,7 +260,7 @@ export interface HeaderBackProps extends NavigationButtonProps {
 }
 
 export type HeaderBackgroundProps = {
-  animatedValue?: SharedValue<number>;
+  animatedValue?: Animated.Value | SharedValue<number>;
   useGradient?: boolean;
   useShadowHeader?: boolean;
   backgroundColor?: string;
@@ -298,7 +300,7 @@ export type TitleJourneyProps = {
 };
 
 export interface HeaderAnimatedProps extends ViewProps {
-  animatedValue: SharedValue<number>;
+  animatedValue: Animated.Value | SharedValue<number>;
   image: string;
   useScale?: boolean;
 }
@@ -342,7 +344,7 @@ export type AnimatedHeader = {
 
 export interface SearchHeaderProps extends InputSearchProps {
   ref?: React.RefObject<InputRef>;
-  animatedValue?: SharedValue<number>;
+  animatedValue?: Animated.Value | SharedValue<number>;
   headerRightWidth?: 0 | 74 | 110 | number;
   leftPosition?: 12 | 48 | number;
   renderButtons?: () => ReactNode;

package/Application/utils.tsx

@@ -5,8 +5,9 @@ import {
 } from '@react-navigation/stack';
 import type { HeaderTitleProps, NavigationOptions } from './types';
 import { Colors, Spacing } from '../Consts';
-import { AppState, Platform } from 'react-native';
+import { Animated, AppState, Platform } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
+import { useSharedValue } from 'react-native-reanimated';
 import {
   MiniAppContext,
   ScreenContext,
@@ -229,6 +230,43 @@ const useAppState = () => {
   };
 };
 
+/**
+ * Union of the two animation runtimes an internal foundation component might
+ * receive. Public Screen props still accept React Native Animated.Value only;
+ * this type keeps lower-level header/floating components compatible while they
+ * render with reanimated.
+ */
+export type AnimatedCompatValue = Animated.Value | SharedValue<number>;
+
+const isRNAnimatedValue = (v: unknown): v is Animated.Value =>
+  !!v &&
+  typeof (v as Animated.Value).setValue === 'function' &&
+  typeof (v as Animated.Value).interpolate === 'function';
+
+const isSharedValue = (v: unknown): v is SharedValue<number> =>
+  !!v && !isRNAnimatedValue(v) && 'value' in (v as object);
+
+const useNormalizedSharedValue = (
+  input?: AnimatedCompatValue,
+): SharedValue<number> => {
+  const fallback = useSharedValue(0);
+
+  useEffect(() => {
+    if (!isRNAnimatedValue(input)) {
+      return;
+    }
+    const id = input.addListener(({ value }) => {
+      fallback.value = value;
+    });
+    return () => input.removeListener(id);
+  }, [input, fallback]);
+
+  if (isSharedValue(input)) {
+    return input;
+  }
+  return fallback;
+};
+
 export {
   getStackOptions,
   getModalOptions,
@@ -237,4 +275,5 @@ export {
   setAutomationID,
   useComponentId,
   useAppState,
+  useNormalizedSharedValue,
 };

package/Context/index.ts

@@ -9,9 +9,12 @@ const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
 const SkeletonContext = createContext({ loading: false });
-const ScaleSizeContext = createContext<{ scaleSizeMaxRate?: number }>({
-  scaleSizeMaxRate: undefined,
-});
+// Single source of truth: holds both the OS flag and the user-adjusted rate.
+export type FontScaleConfig = {
+  useOSFontScale?: boolean;
+  userScaleRate?: number;
+};
+const ScaleSizeContext = createContext<FontScaleConfig>({});
 const TrackingScopeContext = createContext<{ scopeName?: string }>({
   scopeName: undefined,
 });

package/Layout/FloatingButton.tsx

@@ -11,11 +11,14 @@ import Animated, {
   useSharedValue,
   withTiming,
   runOnJS,
-  type SharedValue,
 } from 'react-native-reanimated';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize } from '../Text';
+import {
+  AnimatedCompatValue,
+  useNormalizedSharedValue,
+} from '../Application/utils';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -24,7 +27,7 @@ export interface FloatingButtonProps {
   icon?: string;
   iconColor?: string;
   size?: 'small' | 'large';
-  animatedValue?: SharedValue<number>;
+  animatedValue?: AnimatedCompatValue;
   bottom?: number;
   renderComponent?: () => React.ReactNode;
 }
@@ -41,6 +44,8 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   bottom = 12,
 }: FloatingButtonProps) => {
   const { theme } = useContext(ApplicationContext);
+  const enabled = animatedValue != null;
+  const sharedValue = useNormalizedSharedValue(animatedValue);
   const scaledFontSize = useScaleSize(16);
   const scaledLineHeight = useScaleSize(22);
   const maxWidth = useSharedValue(0);
@@ -57,10 +62,10 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   }, [label, opacityAnimated]);
 
   useAnimatedReaction(
-    () => animatedValue?.value ?? 0,
+    () => sharedValue.value,
     (value) => {
       'worklet';
-      if (!label || !animatedValue) return;
+      if (!label || !enabled) return;
       if (value !== lastOffset.value && value > 0) {
         const direction = value > lastOffset.value ? 'down' : 'up';
         lastOffset.value = value;
@@ -88,7 +93,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         }
       }
     },
-    [label, animatedValue, minWidth],
+    [label, enabled, minWidth],
   );
 
   const containerStyle = useAnimatedStyle(() => ({

package/Layout/Screen.tsx

@@ -12,6 +12,7 @@ import React, {
   useRef,
 } from 'react';
 import {
+  Animated,
   KeyboardAvoidingView,
   NativeScrollEvent,
   NativeSyntheticEvent,
@@ -24,12 +25,9 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import Animated, {
-  runOnJS,
-  useAnimatedScrollHandler,
+import {
   useSharedValue,
   withTiming,
-  type SharedValue,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ApplicationContext, ScreenContext } from '../Context';
@@ -142,9 +140,10 @@ export interface ScreenProps extends ViewProps {
   inputSearchRef?: Ref<InputRef>;
 
   /**
-   * Optional. Animated value for header.
+   * Optional. React Native animated value for header.
+   * Internally, Screen mirrors it into a reanimated shared value.
    */
-  animatedValue?: SharedValue<number>;
+  animatedValue?: Animated.Value;
 
   /**
    * Optional. If `true`, use shadow header.
@@ -201,20 +200,47 @@ const Screen = forwardRef(
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
-    const internalAnimatedValue = useSharedValue(0);
-    const animatedValue = customAnimatedValue ?? internalAnimatedValue;
+
+    /**
+     * Dual animation source:
+     * - `animatedValue` is a react-native `Animated.Value` driven natively by the
+     *   scroll event. It is what legacy consumers receive (`animatedValue`).
+     * - `sharedValue` is a reanimated `SharedValue` consumed by every internal
+     *   foundation component (and offered to modern consumers). It is kept in
+     *   sync from the scroll `listener` (see below), which fires on the JS
+     *   thread even when the scroll uses the native driver.
+     *   If a legacy value is driven outside of Screen, its listener also
+     *   mirrors JS-driven updates into the shared value.
+     * Consumers pass only `Animated.Value`; the reanimated shared value stays
+     * an internal implementation detail.
+     */
+    const animatedValue = useRef<Animated.Value>(
+      customAnimatedValue ?? new Animated.Value(0),
+    );
+    const internalShared = useSharedValue(0);
+    const sharedValue = internalShared;
+
+    useEffect(() => {
+      if (!customAnimatedValue) {
+        return;
+      }
+
+      const listenerId = customAnimatedValue.addListener(({ value }) => {
+        internalShared.value = value;
+      });
+
+      return () => {
+        customAnimatedValue.removeListener(listenerId);
+      };
+    }, [customAnimatedValue, internalShared]);
+
     const currentTint = useRef<string | undefined>(undefined);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';
 
-    let handleScroll: any;
+    let handleScroll;
     let Component: any = View;
 
-    // AI-GENERATED START
-    // On iOS the home indicator is ~34pt but visual safe area needs only ~21pt cap.
-    // On Android 15+ edge-to-edge the nav bar can be 48dp — no cap needed.
     const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
-    // AI-GENERATED END
-
     let keyboardOffset = heightHeader - bottomInset;
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
       keyboardOffset = -bottomInset;
@@ -260,7 +286,7 @@ const Screen = forwardRef(
                       inputRange: [0, 50],
                       outputRange: [1, 0],
                     }}
-                    animatedValue={animatedValue}
+                    animatedValue={sharedValue}
                   />
                 ),
               };
@@ -275,7 +301,7 @@ const Screen = forwardRef(
               headerBackground: (props: any) => (
                 <HeaderBackground
                   {...props}
-                  animatedValue={animatedValue}
+                  animatedValue={sharedValue}
                   useShadowHeader={useShadowHeader}
                   headerBackground={headerBackground}
                   gradientColor={gradientColor}
@@ -295,7 +321,7 @@ const Screen = forwardRef(
                       inputRange: [0, 50],
                       outputRange: [1, 0],
                     }}
-                    animatedValue={animatedValue}
+                    animatedValue={sharedValue}
                   />
                 ),
               };
@@ -309,6 +335,7 @@ const Screen = forwardRef(
         headerBackground,
         inputSearchProps,
         navigation?.instance,
+        sharedValue,
         useShadowHeader,
       ],
     );
@@ -330,7 +357,7 @@ const Screen = forwardRef(
           headerBackground: (props: any) => (
             <HeaderBackground
               {...props}
-              animatedValue={animatedValue}
+              animatedValue={sharedValue}
               useGradient={false}
               useShadowHeader={useShadowHeader}
               headerBackground={headerBackground}
@@ -351,7 +378,13 @@ const Screen = forwardRef(
 
         navigation?.instance?.setOptions(options);
       },
-      [gradientColor, headerBackground, navigation?.instance, useShadowHeader],
+      [
+        gradientColor,
+        headerBackground,
+        navigation?.instance,
+        sharedValue,
+        useShadowHeader,
+      ],
     );
 
     /**
@@ -369,13 +402,13 @@ const Screen = forwardRef(
               inputRange: [0, 50],
               outputRange: [1, 0],
             }}
-            animatedValue={animatedValue}
+            animatedValue={sharedValue}
           />
         ),
       };
 
       navigation?.instance?.setOptions(options);
-    }, [navigation?.instance]);
+    }, [navigation?.instance, sharedValue]);
 
     /**
      * export search header
@@ -398,7 +431,7 @@ const Screen = forwardRef(
         headerLeft: (props: any) =>
           params?.hiddenBack ? null : <HeaderLeft {...props} />,
         headerTitle: () => (
-          <SearchHeader {...params} animatedValue={animatedValue} />
+          <SearchHeader {...params} animatedValue={sharedValue} />
         ),
       };
 
@@ -449,51 +482,47 @@ const Screen = forwardRef(
       });
     });
 
-    const onTintColorChange = useCallback(
-      (offsetY: number) => {
-        if (!animatedHeader) return;
-        let color = animatedHeader?.headerTintColor ?? Colors.black_17;
-        if (offsetY > 50) {
-          color = Colors.black_17;
-        }
-        if (color !== currentTint.current) {
-          currentTint.current = color;
-          navigation?.setOptions({
-            headerTintColor: color,
-          });
-          let barStyle: StatusBarStyle = 'dark-content';
-          if (currentTint.current === Colors.black_01) {
-            barStyle = 'light-content';
-          }
-          StatusBar.setBarStyle(barStyle, true);
-        }
-      },
-      [animatedHeader, navigation],
-    );
-
-    const emitOnScroll = useCallback(
-      (offsetY: number) => {
-        scrollViewProps?.onScroll?.({
-          nativeEvent: { contentOffset: { x: 0, y: offsetY } },
-        } as NativeSyntheticEvent<NativeScrollEvent>);
-      },
-      [scrollViewProps],
-    );
-
-    const scrollHandler = useAnimatedScrollHandler({
-      onScroll: (event) => {
-        animatedValue.value = event.contentOffset.y;
-        runOnJS(emitOnScroll)(event.contentOffset.y);
-        runOnJS(onTintColorChange)(event.contentOffset.y);
-      },
-    });
-
     /**
      * animated when use scroll && animated value
      */
     if (scrollable) {
       Component = Animated.ScrollView;
-      handleScroll = scrollHandler;
+      handleScroll = Animated.event(
+        [
+          {
+            nativeEvent: {
+              contentOffset: { y: animatedValue.current as Animated.Value },
+            },
+          },
+        ],
+        {
+          useNativeDriver: true,
+          listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+            const offsetY = e.nativeEvent.contentOffset.y;
+            // keep the reanimated source in sync for the internal components.
+            sharedValue.value = offsetY;
+            scrollViewProps?.onScroll?.(e);
+            if (animatedHeader) {
+              let color = animatedHeader?.headerTintColor ?? Colors.black_17;
+              if (offsetY > 50) {
+                color = Colors.black_17;
+              }
+              if (color !== currentTint.current) {
+                currentTint.current = color;
+                navigation?.setOptions({
+                  headerTintColor: color,
+                });
+
+                let barStyle: StatusBarStyle = 'dark-content';
+                if (currentTint.current === Colors.black_01) {
+                  barStyle = 'light-content';
+                }
+                StatusBar.setBarStyle(barStyle, true);
+              }
+            }
+          },
+        },
+      );
     }
 
     /**
@@ -503,7 +532,12 @@ const Screen = forwardRef(
     const handleScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
       const offsetY = e.nativeEvent.contentOffset.y;
       if (inputSearchProps && offsetY < 100 && offsetY > 0) {
-        animatedValue.value = withTiming(0, { duration: 300 });
+        Animated.timing(animatedValue.current, {
+          toValue: 0,
+          useNativeDriver: true,
+          duration: 300,
+        }).start();
+        sharedValue.value = withTiming(0, { duration: 300 });
         ref?.scrollTo?.({ y: 0, animated: true });
       }
       scrollViewProps?.onScrollEndDrag?.(e);
@@ -519,7 +553,10 @@ const Screen = forwardRef(
             style={[styles.screenBanner, { maxHeight: 210 + layoutOffset }]}
           >
             {animatedHeader?.component({
-              animatedValue: animatedValue,
+              // legacy consumers read `animatedValue` (Animated.Value),
+              // modern consumers read `sharedValue` (SharedValue).
+              animatedValue: animatedValue.current,
+              sharedValue: sharedValue,
             })}
           </View>
         );
@@ -586,7 +623,7 @@ const Screen = forwardRef(
           headerType={headerType}
           heightHeader={heightHeader}
           headerRightWidth={headerRightWidth}
-          animatedValue={animatedValue}
+          animatedValue={sharedValue}
           inputSearchProps={inputSearchProps}
           navigation={navigation}
           inputSearchRef={inputSearchRef}
@@ -613,7 +650,14 @@ const Screen = forwardRef(
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}
             scrollEventThrottle={16}
-            style={Styles.flex}
+            style={[
+              Styles.flex,
+              !scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
+            ]}
+            contentContainerStyle={[
+              scrollable && !Footer && !isTab && { paddingBottom: bottomInset },
+              scrollViewProps?.contentContainerStyle,
+            ]}
           >
             {renderAnimatedHeader()}
 
@@ -624,7 +668,7 @@ const Screen = forwardRef(
             <View>
               <FloatingButton
                 {...floatingButtonProps}
-                animatedValue={animatedValue}
+                animatedValue={sharedValue}
                 bottom={
                   Footer || isTab ? 12 : bottomInset + Spacing.S
                 }

package/Text/utils.ts

@@ -7,13 +7,18 @@ const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
 
-const useScaleSize = (size: number, scaleRate?: number) => {
-  const { scaleSizeMaxRate = MAX_FONT_SCALE } = useContext(ScaleSizeContext);
+const useScaleSize = (size: number, userScaleRate?: number) => {
+  const { useOSFontScale = true, userScaleRate: ctxRate } =
+    useContext(ScaleSizeContext);
   const fontScale = PixelRatio.getFontScale();
   const { width } = useWindowDimensions();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
-  const maxScaleRate = scaleRate ?? scaleSizeMaxRate;
+  const customRate = userScaleRate ?? ctxRate ?? 1;
+
+  if (!useOSFontScale) {
+    return customRate > 1 ? customRate * size : size;
+  }
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
@@ -27,8 +32,8 @@ const useScaleSize = (size: number, scaleRate?: number) => {
 
   if (fontScale > 1) {
     fontSizeOSScale = Math.min(
-      fontSizeOSScale * fontScale,
-      fontSizeOSScale * maxScaleRate,
+      fontScale * fontSizeOSScale,
+      fontSizeOSScale * MAX_FONT_SCALE,
     );
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.161.2-test.1",
+    "version": "0.162.1-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},