@momo-kits/foundation 0.161.2-beta.9 → 0.161.2-reanimated.2

package/Application/BottomSheet.tsx

@@ -37,8 +37,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
-  const keyboardOffset = heightHeader - bottomInset;
+  const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -312,7 +311,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           {useBottomInset && (
             <View
               style={{
-                height: bottomInset,
+                height: Math.min(insets.bottom, 21),
                 backgroundColor: backgroundColor,
               }}
             />

package/Application/BottomTab/index.tsx

@@ -296,7 +296,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
           activeTintColor={theme.colors.primary}
           style={[
             {
-              height: 64 + (Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom),
+              height: 64 + Math.min(insets.bottom, 21),
             },
           ]}
         />

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 './useAnimatedCompat';
 
 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 './useAnimatedCompat';
 
 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 './useAnimatedCompat';
 
 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/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 './useAnimatedCompat';
 
 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 './useAnimatedCompat';
 
 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/Components/useAnimatedCompat.ts

@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+import { Animated } from 'react-native';
+import { useSharedValue, type SharedValue } from 'react-native-reanimated';
+
+/**
+ * Union of the two animation runtimes a consumer might hand to a foundation
+ * component. react-native `Animated.Value` (legacy) and reanimated
+ * `SharedValue` are different objects and cannot be used interchangeably, so
+ * foundation components normalize whatever they receive into a `SharedValue`
+ * via {@link useNormalizedSharedValue} before rendering with reanimated.
+ */
+export type AnimatedCompatValue = Animated.Value | SharedValue<number>;
+
+/**
+ * A react-native `Animated.Value` exposes `setValue`/`interpolate` methods; a
+ * reanimated `SharedValue` does not.
+ */
+export const isRNAnimatedValue = (v: unknown): v is Animated.Value =>
+  !!v &&
+  typeof (v as Animated.Value).setValue === 'function' &&
+  typeof (v as Animated.Value).interpolate === 'function';
+
+/**
+ * Heuristic: a reanimated `SharedValue` carries a `value` accessor but none of
+ * the `Animated.Value` methods.
+ */
+export const isSharedValue = (v: unknown): v is SharedValue<number> =>
+  !!v && !isRNAnimatedValue(v) && 'value' in (v as object);
+
+/**
+ * Normalize an incoming animated value (either runtime, or nothing) into a
+ * reanimated `SharedValue<number>` that foundation components can drive with
+ * `useAnimatedStyle`/`interpolate`.
+ *
+ * - SharedValue  → returned as-is (zero overhead, shares the same UI-thread cell)
+ * - Animated.Value → bridged: a JS-thread `addListener` mirrors its value into
+ *   an internal SharedValue. NOTE: when the source `Animated.Value` is driven
+ *   by `Animated.event(..., { useNativeDriver: true })`, `addListener` does NOT
+ *   fire per frame, so the bridge stays flat. For the Screen-driven case the
+ *   bridge is fed from the scroll `listener` instead (see Screen.tsx); this
+ *   hook's listener is the safety net for standalone / JS-driven usage.
+ * - undefined    → a fresh internal SharedValue stuck at 0
+ */
+export function 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;
+}

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,
@@ -258,7 +259,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 +299,7 @@ export type TitleJourneyProps = {
 };
 
 export interface HeaderAnimatedProps extends ViewProps {
-  animatedValue: SharedValue<number>;
+  animatedValue: Animated.Value | SharedValue<number>;
   image: string;
   useScale?: boolean;
 }
@@ -342,7 +343,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/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/Components/useAnimatedCompat';
 
 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,9 +25,7 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import Animated, {
-  runOnJS,
-  useAnimatedScrollHandler,
+import {
   useSharedValue,
   withTiming,
   type SharedValue,
@@ -48,6 +47,10 @@ import { InputRef } from '../Input';
 import { exportHeaderTitle, getOptions } from '../Application/utils';
 import { validateChildren } from './utils';
 import Section from './Section';
+import {
+  isRNAnimatedValue,
+  isSharedValue,
+} from '../Application/Components/useAnimatedCompat';
 import {
   HeaderBackground,
   HeaderExtendHeader,
@@ -142,9 +145,10 @@ export interface ScreenProps extends ViewProps {
   inputSearchRef?: Ref<InputRef>;
 
   /**
-   * Optional. Animated value for header.
+   * Optional. Animated value for header. Accepts either a react-native
+   * `Animated.Value` (legacy) or a reanimated `SharedValue<number>`.
    */
-  animatedValue?: SharedValue<number>;
+  animatedValue?: Animated.Value | SharedValue<number>;
 
   /**
    * Optional. If `true`, use shadow header.
@@ -201,18 +205,36 @@ 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 so both runtimes are supported without crashing:
+     * - `rnValue` 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.
+     * A consumer may also pass one of the two in; we reuse whichever matches.
+     */
+    const rnValue = useRef<Animated.Value>(
+      isRNAnimatedValue(customAnimatedValue)
+        ? customAnimatedValue
+        : new Animated.Value(0),
+    );
+    const internalShared = useSharedValue(0);
+    const sharedValue = isSharedValue(customAnimatedValue)
+      ? customAnimatedValue
+      : internalShared;
+
     const currentTint = useRef<string | undefined>(undefined);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';
 
-    let handleScroll: any;
+    let handleScroll;
     let Component: any = View;
 
-    const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
-    let keyboardOffset = heightHeader - bottomInset;
+    let keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
-      keyboardOffset = -bottomInset;
+      keyboardOffset = -Math.min(insets.bottom, 21);
     }
 
     /**
@@ -255,7 +277,7 @@ const Screen = forwardRef(
                       inputRange: [0, 50],
                       outputRange: [1, 0],
                     }}
-                    animatedValue={animatedValue}
+                    animatedValue={sharedValue}
                   />
                 ),
               };
@@ -270,7 +292,7 @@ const Screen = forwardRef(
               headerBackground: (props: any) => (
                 <HeaderBackground
                   {...props}
-                  animatedValue={animatedValue}
+                  animatedValue={sharedValue}
                   useShadowHeader={useShadowHeader}
                   headerBackground={headerBackground}
                   gradientColor={gradientColor}
@@ -290,7 +312,7 @@ const Screen = forwardRef(
                       inputRange: [0, 50],
                       outputRange: [1, 0],
                     }}
-                    animatedValue={animatedValue}
+                    animatedValue={sharedValue}
                   />
                 ),
               };
@@ -304,6 +326,7 @@ const Screen = forwardRef(
         headerBackground,
         inputSearchProps,
         navigation?.instance,
+        sharedValue,
         useShadowHeader,
       ],
     );
@@ -325,7 +348,7 @@ const Screen = forwardRef(
           headerBackground: (props: any) => (
             <HeaderBackground
               {...props}
-              animatedValue={animatedValue}
+              animatedValue={sharedValue}
               useGradient={false}
               useShadowHeader={useShadowHeader}
               headerBackground={headerBackground}
@@ -346,7 +369,13 @@ const Screen = forwardRef(
 
         navigation?.instance?.setOptions(options);
       },
-      [gradientColor, headerBackground, navigation?.instance, useShadowHeader],
+      [
+        gradientColor,
+        headerBackground,
+        navigation?.instance,
+        sharedValue,
+        useShadowHeader,
+      ],
     );
 
     /**
@@ -364,13 +393,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
@@ -393,7 +422,7 @@ const Screen = forwardRef(
         headerLeft: (props: any) =>
           params?.hiddenBack ? null : <HeaderLeft {...props} />,
         headerTitle: () => (
-          <SearchHeader {...params} animatedValue={animatedValue} />
+          <SearchHeader {...params} animatedValue={sharedValue} />
         ),
       };
 
@@ -444,51 +473,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: rnValue.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);
+              }
+            }
+          },
+        },
+      );
     }
 
     /**
@@ -498,7 +523,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(rnValue.current, {
+          toValue: 0,
+          useNativeDriver: true,
+          duration: 300,
+        }).start();
+        sharedValue.value = withTiming(0, { duration: 300 });
         ref?.scrollTo?.({ y: 0, animated: true });
       }
       scrollViewProps?.onScrollEndDrag?.(e);
@@ -514,7 +544,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: rnValue.current,
+              sharedValue: sharedValue,
             })}
           </View>
         );
@@ -581,7 +614,7 @@ const Screen = forwardRef(
           headerType={headerType}
           heightHeader={heightHeader}
           headerRightWidth={headerRightWidth}
-          animatedValue={animatedValue}
+          animatedValue={sharedValue}
           inputSearchProps={inputSearchProps}
           navigation={navigation}
           inputSearchRef={inputSearchRef}
@@ -619,9 +652,9 @@ const Screen = forwardRef(
             <View>
               <FloatingButton
                 {...floatingButtonProps}
-                animatedValue={animatedValue}
+                animatedValue={sharedValue}
                 bottom={
-                  Footer || isTab ? 12 : bottomInset + Spacing.S
+                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
                 }
               />
             </View>
@@ -632,7 +665,7 @@ const Screen = forwardRef(
               style={[
                 styles.shadow,
                 {
-                  paddingBottom: bottomInset + Spacing.S,
+                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
               ]}

package/package.json

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