@momo-kits/foundation 0.161.2-beta.7 → 0.161.2-reanimated.1

package/Application/Components/BackgroundImageView.tsx

@@ -1,11 +1,5 @@
 import React, { FC, useContext } from 'react';
-import { Platform, StyleSheet } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedStyle,
-  type SharedValue,
-} from 'react-native-reanimated';
+import { Animated, Platform, StyleSheet } from 'react-native';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
 import { ApplicationContext } from '../../Context';
@@ -14,26 +8,16 @@ type BackgroundImageViewProps = {
   useShadowHeader: boolean;
   headerBackground?: string;
   heightHeader: number | `${number}%`;
-  animatedValue: SharedValue<number>;
+  opacityBackground: Animated.AnimatedInterpolation<any>;
 };
 
 const BackgroundImageView: FC<BackgroundImageViewProps> = ({
   useShadowHeader = true,
   headerBackground = null,
   heightHeader,
-  animatedValue,
+  opacityBackground,
 }) => {
   const { theme } = useContext(ApplicationContext);
-
-  const opacityStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      animatedValue.value,
-      [0, 52],
-      [0, 1],
-      Extrapolation.CLAMP,
-    ),
-  }));
-
   if (Platform.OS === 'android') {
     return (
       <Animated.View
@@ -43,8 +27,8 @@ const BackgroundImageView: FC<BackgroundImageViewProps> = ({
           {
             height: heightHeader,
             backgroundColor: theme.colors.background.surface,
+            opacity: opacityBackground,
           },
-          opacityStyle,
         ]}
       >
         {headerBackground && (
@@ -67,8 +51,8 @@ const BackgroundImageView: FC<BackgroundImageViewProps> = ({
           {
             height: heightHeader,
             backgroundColor: theme.colors.background.surface,
+            opacity: opacityBackground,
           },
-          opacityStyle,
         ]}
       />
       <Animated.View
@@ -76,8 +60,8 @@ const BackgroundImageView: FC<BackgroundImageViewProps> = ({
           styles.hidden,
           {
             height: heightHeader,
+            opacity: opacityBackground,
           },
-          opacityStyle,
         ]}
       >
         {headerBackground && (

package/Application/Components/HeaderAnimated.tsx

@@ -1,49 +1,46 @@
-import { StyleSheet } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import { Animated, StyleSheet } from 'react-native';
 import { type HeaderAnimatedProps } from '../types';
 import React from 'react';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
 
+/**
+ * default header banner for header animated
+ */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
   useScale = true,
   children,
 }) => {
-  const animatedStyle = useAnimatedStyle(() => {
-    const scale = useScale
-      ? interpolate(
-          animatedValue.value,
-          [-300, 0, 300],
-          [4, 1, 1],
-          Extrapolation.CLAMP,
-        )
-      : 1;
-    const opacity = interpolate(
-      animatedValue.value,
-      [0, 150, 300],
-      [1, 0.5, 0],
-      Extrapolation.CLAMP,
-    );
-    const translateY = interpolate(
-      animatedValue.value,
-      [-300, 0],
-      [-80, -2],
-      Extrapolation.CLAMP,
-    );
-    return {
-      opacity,
-      transform: [{ scale }, { translateY }],
-    };
+  const scale = useScale
+    ? animatedValue.interpolate({
+        inputRange: [-300, 0, 300],
+        outputRange: [4, 1, 1],
+        extrapolate: 'clamp',
+      })
+    : 1;
+  const opacity = animatedValue.interpolate({
+    inputRange: [0, 150, 300],
+    outputRange: [1, 0.5, 0],
+    extrapolate: 'clamp',
+  });
+  const translateY = animatedValue.interpolate({
+    inputRange: [-300, 0],
+    outputRange: [-80, -2],
+    extrapolate: 'clamp',
   });
 
   return (
-    <Animated.View style={[styles.container, animatedStyle]}>
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          opacity: opacity,
+          transform: [{ scale }, { translateY }],
+        },
+      ]}
+    >
       {children ?? (
         <Image
           source={{

package/Application/Components/HeaderBackground.tsx

@@ -1,15 +1,19 @@
 import LinearGradient from 'react-native-linear-gradient';
-import { StyleSheet, View } from 'react-native';
+import { Animated, StyleSheet, View } from 'react-native';
 import React, { useContext } from 'react';
-import Animated, { useSharedValue } 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';
 
+const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
+
+/**
+ * header background for default
+ */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
-  animatedValue,
+  animatedValue = new Animated.Value(0),
   useGradient = true,
   useShadowHeader = true,
   gradientColor: customGradientColor,
@@ -19,35 +23,37 @@ 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 showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
+  const opacityBackground = animatedValue?.interpolate({
+    inputRange: [0, 52],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+
   return (
     <View style={[Styles.flex, showBaseLineDebug && styles.debugBaseLine]}>
       <BackgroundImageView
         useShadowHeader={useShadowHeader}
         heightHeader={'100%'}
-        animatedValue={sv}
+        opacityBackground={opacityBackground}
         headerBackground={headerImage}
       />
       <View style={styles.gradientContainer}>
         {useGradient && !!gradientColor && (
-          <Animated.View style={styles.extendedHeader}>
-            <LinearGradient
-              colors={[gradientColor, gradientColor + '00']}
-              style={StyleSheet.absoluteFill}
-            >
-              {!!headerImage && (
-                <Image
-                  style={styles.headerBackground}
-                  source={{ uri: headerImage }}
-                  loading={false}
-                />
-              )}
-            </LinearGradient>
-          </Animated.View>
+          <LinearGradientAnimated
+            colors={[gradientColor, gradientColor + '00']}
+            style={styles.extendedHeader}
+          >
+            {!!headerImage && (
+              <Image
+                style={styles.headerBackground}
+                source={{ uri: headerImage }}
+                loading={false}
+              />
+            )}
+          </LinearGradientAnimated>
         )}
       </View>
     </View>

package/Application/Components/HeaderExtendHeader.tsx

@@ -1,14 +1,7 @@
-import React, { Ref, useContext } from 'react';
+import React, { Ref, useContext, useEffect, useRef } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import { Dimensions, Platform, StyleSheet, View } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedStyle,
-  useSharedValue,
-  type SharedValue,
-} from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
+import { Animated, Dimensions, Platform, StyleSheet, View } from 'react-native';
 import { HeaderType } from '../../Layout/types';
 import { InputRef, InputSearch } from '../../Input';
 import Navigation from '../Navigation';
@@ -21,10 +14,15 @@ const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
 
 const { width: screenWidth } = Dimensions.get('window');
+const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
 
+/**
+ * Header extended with background image
+ * @constructor
+ */
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
-  animatedValue: SharedValue<number>;
+  animatedValue: Animated.Value;
   heightHeader: number;
   headerRightWidth: number;
   inputSearchProps?: SearchHeaderProps;
@@ -40,132 +38,118 @@ const HeaderExtendHeader: React.FC<{
   headerRightWidth = 73,
   inputSearchProps,
   inputSearchRef,
-  useShadowHeader: useShadowHeaderProp = true,
+  useShadowHeader = true,
   gradientColor: customGradientColor,
   headerBackground: customBackground,
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const fallback = useSharedValue(0);
-  const sv = animatedValue ?? fallback;
+  const animated = useRef(new Animated.Value(0));
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
 
-  let useShadowHeader = useShadowHeaderProp;
-  if (inputSearchProps && Platform.OS === 'android') {
-    useShadowHeader = false;
-  }
-
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const heightStyle = useAnimatedStyle(() => ({
-    height: interpolate(
-      sv.value,
-      [0, 100],
-      [heightHeader + 52, heightHeader],
-      Extrapolation.CLAMP,
-    ),
-  }));
+  const opacityBackground = animatedValue?.interpolate({
+    inputRange: [0, 52],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+  const opacityGradient = animatedValue?.interpolate({
+    inputRange: [0, 52],
+    outputRange: [1, 0],
+    extrapolate: 'clamp',
+  });
 
-  const gradientOpacityStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(sv.value, [0, 52], [1, 0], Extrapolation.CLAMP),
-  }));
+  useEffect(() => {
+    const listener = animatedValue.addListener(({ value }) => {
+      animated.current.setValue(value);
+    });
+    return () => {
+      animatedValue?.removeListener(listener);
+    };
+  }, [animatedValue]);
 
-  const searchTranslateStyle = useAnimatedStyle(() => ({
-    transform: [
-      {
-        translateX: interpolate(
-          sv.value,
-          [0, 100],
-          [SCREEN_PADDING, leftPosition],
-          Extrapolation.CLAMP,
-        ),
-      },
-    ],
-    width: interpolate(
-      sv.value,
-      [0, 100],
-      [
-        screenWidth - SCREEN_PADDING * 2,
-        screenWidth - leftPosition - 12 - headerRightWidth,
-      ],
-      Extrapolation.CLAMP,
-    ),
-  }));
+  const height = animated.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: [heightHeader + 52, heightHeader],
+    extrapolate: 'clamp',
+  });
 
-  const searchBackgroundStyle = useAnimatedStyle(() => {
-    const t = Math.min(Math.max(sv.value / 100, 0), 1);
-    return { backgroundColor: t === 0
-      ? theme.colors.background.surface
-      : theme.colors.background.default };
+  const translateX = animated.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: [SCREEN_PADDING, leftPosition],
+    extrapolate: 'clamp',
   });
 
-  const extendedHeightStyle = useAnimatedStyle(() => ({
-    height: interpolate(
-      sv.value,
-      [0, 100],
-      [heightHeader + 52, heightHeader],
-      Extrapolation.CLAMP,
-    ),
-  }));
+  const backgroundColor = animated.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: [
+      theme.colors.background.surface,
+      theme.colors.background.default,
+    ],
+    extrapolate: 'clamp',
+  });
+
+  if (inputSearchProps && Platform.OS === 'android') {
+    useShadowHeader = false;
+  }
 
   if (inputSearchProps) {
     return (
       <View style={[{ zIndex: 0 }, showBaseLineDebug && styles.debugBaseLine]}>
-        <Animated.View style={heightStyle} />
+        <Animated.View style={{ height: height }} />
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
-          animatedValue={sv}
+          opacityBackground={opacityBackground}
           headerBackground={headerBackground}
         />
         <Animated.View
           style={[
             styles.headerBox,
-            headerType === 'extended'
-              ? heightStyle
-              : { height: heightHeader },
+            { height: headerType === 'extended' ? height : heightHeader },
           ]}
         >
           {!!gradientColor && (
-            <Animated.View
-              style={[styles.extendedHeader, gradientOpacityStyle]}
+            <LinearGradientAnimated
+              colors={[gradientColor, gradientColor + '00']}
+              style={[styles.extendedHeader, { opacity: opacityGradient }]}
             >
-              <LinearGradient
-                colors={[gradientColor, gradientColor + '00']}
-                style={StyleSheet.absoluteFill}
-              >
-                {!!theme.assets?.headerBackground && (
-                  <Image
-                    style={styles.headerBackground}
-                    source={{ uri: theme.assets?.headerBackground }}
-                    loading={false}
-                  />
-                )}
-              </LinearGradient>
-            </Animated.View>
+              {!!theme.assets?.headerBackground && (
+                <Image
+                  style={styles.headerBackground}
+                  source={{ uri: theme.assets?.headerBackground }}
+                  loading={false}
+                />
+              )}
+            </LinearGradientAnimated>
           )}
         </Animated.View>
         <Animated.View
-          style={[
-            {
-              justifyContent: 'flex-end',
-              position: 'absolute',
-              zIndex: 2,
-            },
-            heightStyle,
-          ]}
+          style={{
+            justifyContent: 'flex-end',
+            height,
+            position: 'absolute',
+            zIndex: 2,
+          }}
         >
           <Animated.View
-            style={[{ marginVertical: Spacing.S }, searchTranslateStyle]}
+            style={{
+              transform: [{ translateX }],
+              marginVertical: Spacing.S,
+              width: animated.current.interpolate({
+                inputRange: [0, 100],
+                outputRange: [
+                  screenWidth - SCREEN_PADDING * 2,
+                  screenWidth - leftPosition - 12 - headerRightWidth,
+                ],
+                extrapolate: 'clamp',
+              }),
+            }}
           >
-            <Animated.View
-              style={[
-                { borderRadius: Radius.XL },
-                searchBackgroundStyle,
-              ]}
-            >
+            <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
               <InputSearch
                 {...inputSearchProps}
                 ref={inputSearchRef}
@@ -185,26 +169,22 @@ const HeaderExtendHeader: React.FC<{
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
-          animatedValue={sv}
+          opacityBackground={opacityBackground}
           headerBackground={headerBackground}
         />
         {!!gradientColor && (
-          <Animated.View
-            style={[styles.extendedHeader, gradientOpacityStyle, extendedHeightStyle]}
+          <LinearGradientAnimated
+            colors={[gradientColor, gradientColor + '00']}
+            style={[styles.extendedHeader, { opacity: opacityGradient }]}
           >
-            <LinearGradient
-              colors={[gradientColor, gradientColor + '00']}
-              style={StyleSheet.absoluteFill}
-            >
-              {!!headerBackground && (
-                <Image
-                  style={styles.headerBackground}
-                  source={{ uri: headerBackground }}
-                  loading={false}
-                />
-              )}
-            </LinearGradient>
-          </Animated.View>
+            {!!headerBackground && (
+              <Image
+                style={styles.headerBackground}
+                source={{ uri: headerBackground }}
+                loading={false}
+              />
+            )}
+          </LinearGradientAnimated>
         )}
         <View style={{ height: heightHeader }} />
       </View>

package/Application/Components/HeaderTitle.tsx

@@ -1,16 +1,11 @@
 import React, { useContext } from 'react';
 import {
+  Animated,
   Dimensions,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedStyle,
-  type SharedValue,
-} from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { exportFontFamily, Text, useScaleSize } from '../../Text';
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
@@ -23,45 +18,21 @@ import { Image } from '../../Image';
 import { Icon } from '../../Icon';
 import { Skeleton } from '../../Skeleton';
 
-type HeaderTitleInterpolate = {
-  inputRange: number[];
-  outputRange: number[];
-};
-
-type HeaderTitleExtraProps = {
-  animatedValue?: SharedValue<number>;
-  interpolate?: HeaderTitleInterpolate;
-  tintColor?: string;
-  children?: React.ReactNode;
-};
-
 /**
  * default header title used for nav
  */
-const HeaderTitle: React.FC<HeaderTitleExtraProps & { [key: string]: any }> = props => {
+const HeaderTitle: React.FC<any> = props => {
   const context = useContext<any>(MiniAppContext);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const interpolateConfig = props.interpolate ?? {
-    inputRange: [0, 200],
-    outputRange: [0, 1],
-  };
-  const animatedValue = props.animatedValue;
-
-  const animatedStyle = useAnimatedStyle(() => {
-    if (!animatedValue) {
-      return { opacity: 1 };
-    }
-    return {
-      opacity: interpolate(
-        animatedValue.value,
-        interpolateConfig.inputRange,
-        interpolateConfig.outputRange,
-        Extrapolation.CLAMP,
-      ),
-    };
-  });
+  const opacity = props.animatedValue?.interpolate(
+    props.interpolate ?? {
+      inputRange: [0, 200],
+      outputRange: [0, 1],
+      extrapolate: 'clamp',
+    },
+  );
 
   return (
     <View
@@ -86,9 +57,9 @@ const HeaderTitle: React.FC<HeaderTitleExtraProps & { [key: string]: any }> = pr
           },
           {
             fontFamily: exportFontFamily('bold', 'action_xs_bold'),
+            opacity,
             color: props.tintColor,
           },
-          animatedStyle,
         ]}
         numberOfLines={1}
       />

package/Application/Components/SearchHeader.tsx

@@ -1,16 +1,13 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
 import {
+  Animated,
   Dimensions,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
@@ -31,18 +28,28 @@ 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 animated = useRef(new Animated.Value(0));
     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);
-      return {
-        backgroundColor: t === 0
-          ? theme.colors.background.surface
-          : theme.colors.background.default,
+    useEffect(() => {
+      const listener = animatedValue?.addListener(({ value }) => {
+        animated.current.setValue(value);
+      });
+      return () => {
+        if (listener) {
+          animatedValue?.removeListener(listener);
+        }
       };
+    }, [animatedValue]);
+
+    const backgroundColor = animated.current?.interpolate({
+      inputRange: [0, 100],
+      outputRange: [
+        theme.colors.background.surface,
+        theme.colors.background.default,
+      ],
+      extrapolate: 'clamp',
     });
 
     const goBack = () => {
@@ -84,9 +91,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
             },
           ]}
         >
-          <Animated.View
-            style={[{ borderRadius: Radius.XL }, backgroundStyle]}
-          >
+          <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
             <InputSearch
               ref={ref}
               {...props}

package/Application/types.ts

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

package/Application/utils.tsx

@@ -5,8 +5,7 @@ import {
 } from '@react-navigation/stack';
 import type { HeaderTitleProps, NavigationOptions } from './types';
 import { Colors, Spacing } from '../Consts';
-import { AppState, Platform } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
+import { Animated, AppState, Platform } from 'react-native';
 import {
   MiniAppContext,
   ScreenContext,
@@ -61,7 +60,7 @@ const getModalOptions = (): StackNavigationOptions => {
  */
 const getOptions = (
   params: NavigationOptions,
-  animatedValue?: SharedValue<number>,
+  animatedValue?: Animated.Value,
 ) => {
   let options: StackNavigationOptions = {};
 
@@ -132,7 +131,7 @@ const getOptions = (
 
 const exportHeaderTitle = (
   params: NavigationOptions,
-  animatedValue?: SharedValue<number>,
+  animatedValue?: Animated.Value,
 ): StackNavigationOptions => {
   if (typeof params.headerTitle === 'object') {
     return {

package/Layout/FloatingButton.tsx

@@ -1,18 +1,17 @@
-import React, { useContext, useEffect, useState } from 'react';
 import {
+  default as React,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
   LayoutChangeEvent,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import Animated, {
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-  runOnJS,
-  type SharedValue,
-} from 'react-native-reanimated';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize } from '../Text';
@@ -24,7 +23,7 @@ export interface FloatingButtonProps {
   icon?: string;
   iconColor?: string;
   size?: 'small' | 'large';
-  animatedValue?: SharedValue<number>;
+  animatedValue?: Animated.Value;
   bottom?: number;
   renderComponent?: () => React.ReactNode;
 }
@@ -43,67 +42,68 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const { theme } = useContext(ApplicationContext);
   const scaledFontSize = useScaleSize(16);
   const scaledLineHeight = useScaleSize(22);
-  const maxWidth = useSharedValue(0);
+  const maxWidth = useRef(0);
   const minWidth = size === 'small' ? 36 : 48;
-  const opacityAnimated = useSharedValue(0);
-  const widthAnimated = useSharedValue<number | null>(null);
-  const lastOffset = useSharedValue(0);
-  const lastDirection = useSharedValue<string | null>(null);
-  const [showText, setShowText] = useState(true);
+  const [opacityAnimated] = useState(new Animated.Value(0)); // Initial opacity set to 0
+  const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
+  const lastOffset = useRef(0);
+  const lastDirection = useRef<string>(null);
+  const [showText, setShowText] = React.useState(true);
 
   useEffect(() => {
     if (!label) return;
-    opacityAnimated.value = withTiming(1, { duration: 100 });
-  }, [label, opacityAnimated]);
 
-  useAnimatedReaction(
-    () => animatedValue?.value ?? 0,
-    (value) => {
-      'worklet';
-      if (!label || !animatedValue) return;
-      if (value !== lastOffset.value && value > 0) {
-        const direction = value > lastOffset.value ? 'down' : 'up';
-        lastOffset.value = value;
-        if (lastDirection.value !== direction) {
-          lastDirection.value = direction;
+    Animated.timing(opacityAnimated, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
+    const listener = animatedValue?.addListener(({ value }) => {
+      if (value !== lastOffset.current && value > 0) {
+        const direction = value > lastOffset.current ? 'down' : 'up';
+        lastOffset.current = value;
+        if (lastDirection.current !== direction) {
+          lastDirection.current = direction;
           if (direction === 'down') {
-            opacityAnimated.value = withTiming(0, { duration: 100 });
-            widthAnimated.value = withTiming(
-              minWidth,
-              { duration: 100 },
-              (finished) => {
-                if (finished) runOnJS(setShowText)(false);
-              },
-            );
+            Animated.timing(opacityAnimated, {
+              toValue: 0,
+              duration: 100,
+              useNativeDriver: true,
+            }).start();
+            Animated.timing(widthAnimated!, {
+              toValue: minWidth,
+              duration: 100,
+              useNativeDriver: false,
+            }).start(() => setShowText(false));
           } else {
-            opacityAnimated.value = withTiming(1, { duration: 100 });
-            widthAnimated.value = withTiming(
-              maxWidth.value,
-              { duration: 100 },
-              (finished) => {
-                if (finished) runOnJS(setShowText)(true);
-              },
-            );
+            Animated.timing(opacityAnimated, {
+              toValue: 1,
+              duration: 100,
+              useNativeDriver: true,
+            }).start();
+            Animated.timing(widthAnimated!, {
+              toValue: maxWidth.current,
+              duration: 100,
+              useNativeDriver: false,
+            }).start(() => setShowText(true));
           }
         }
       }
-    },
-    [label, animatedValue, minWidth],
-  );
-
-  const containerStyle = useAnimatedStyle(() => ({
-    width: widthAnimated.value ?? undefined,
-  }));
+    });
 
-  const labelStyle = useAnimatedStyle(() => ({
-    opacity: opacityAnimated.value,
-  }));
+    return () => {
+      if (listener) {
+        animatedValue?.removeListener(listener);
+      }
+    };
+  }, [animatedValue, label, minWidth, opacityAnimated, widthAnimated]);
 
   const handleLayout = (event: LayoutChangeEvent) => {
     const layout = event.nativeEvent.layout;
-    if (widthAnimated.value != null) return;
-    maxWidth.value = layout.width;
-    widthAnimated.value = layout.width;
+    if (widthAnimated) return;
+    maxWidth.current = layout.width;
+    setWidthAnimated(new Animated.Value(layout.width));
   };
 
   if (renderComponent) {
@@ -132,11 +132,11 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         {
           right: position === 'right' ? 12 : undefined,
           alignSelf: position === 'center' ? 'center' : 'flex-end',
+          width: widthAnimated,
           height: size === 'small' ? 36 : 48,
           backgroundColor: theme.colors.primary,
           bottom,
         },
-        containerStyle,
       ]}
     >
       <TouchableOpacity
@@ -156,9 +156,9 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
               {
                 fontSize: scaledFontSize,
                 lineHeight: scaledLineHeight,
+                opacity: opacityAnimated,
                 color: 'white',
               },
-              labelStyle,
             ]}
             numberOfLines={1}
           >

package/Layout/Screen.tsx

@@ -12,6 +12,7 @@ import React, {
   useRef,
 } from 'react';
 import {
+  Animated,
   KeyboardAvoidingView,
   NativeScrollEvent,
   NativeSyntheticEvent,
@@ -24,13 +25,6 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import Animated, {
-  runOnJS,
-  useAnimatedScrollHandler,
-  useSharedValue,
-  withTiming,
-  type SharedValue,
-} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
@@ -144,7 +138,7 @@ export interface ScreenProps extends ViewProps {
   /**
    * Optional. Animated value for header.
    */
-  animatedValue?: SharedValue<number>;
+  animatedValue?: Animated.Value;
 
   /**
    * Optional. If `true`, use shadow header.
@@ -201,12 +195,13 @@ const Screen = forwardRef(
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
-    const internalAnimatedValue = useSharedValue(0);
-    const animatedValue = customAnimatedValue ?? internalAnimatedValue;
+    const animatedValue = useRef<Animated.Value>(
+      customAnimatedValue || new Animated.Value(0),
+    );
     const currentTint = useRef<string | undefined>(undefined);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';
 
-    let handleScroll: any;
+    let handleScroll;
     let Component: any = View;
 
     let keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
@@ -253,8 +248,9 @@ const Screen = forwardRef(
                     interpolate={{
                       inputRange: [0, 50],
                       outputRange: [1, 0],
+                      extrapolate: 'clamp',
                     }}
-                    animatedValue={animatedValue}
+                    animatedValue={animatedValue.current}
                   />
                 ),
               };
@@ -269,7 +265,7 @@ const Screen = forwardRef(
               headerBackground: (props: any) => (
                 <HeaderBackground
                   {...props}
-                  animatedValue={animatedValue}
+                  animatedValue={animatedValue.current}
                   useShadowHeader={useShadowHeader}
                   headerBackground={headerBackground}
                   gradientColor={gradientColor}
@@ -288,8 +284,9 @@ const Screen = forwardRef(
                     interpolate={{
                       inputRange: [0, 50],
                       outputRange: [1, 0],
+                      extrapolate: 'clamp',
                     }}
-                    animatedValue={animatedValue}
+                    animatedValue={animatedValue.current}
                   />
                 ),
               };
@@ -324,7 +321,7 @@ const Screen = forwardRef(
           headerBackground: (props: any) => (
             <HeaderBackground
               {...props}
-              animatedValue={animatedValue}
+              animatedValue={animatedValue.current}
               useGradient={false}
               useShadowHeader={useShadowHeader}
               headerBackground={headerBackground}
@@ -362,8 +359,9 @@ const Screen = forwardRef(
             interpolate={{
               inputRange: [0, 50],
               outputRange: [1, 0],
+              extrapolate: 'clamp',
             }}
-            animatedValue={animatedValue}
+            animatedValue={animatedValue.current}
           />
         ),
       };
@@ -392,7 +390,7 @@ const Screen = forwardRef(
         headerLeft: (props: any) =>
           params?.hiddenBack ? null : <HeaderLeft {...props} />,
         headerTitle: () => (
-          <SearchHeader {...params} animatedValue={animatedValue} />
+          <SearchHeader {...params} animatedValue={animatedValue.current} />
         ),
       };
 
@@ -443,51 +441,45 @@ 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>) => {
+            scrollViewProps?.onScroll?.(e);
+            if (animatedHeader) {
+              const offsetY = e.nativeEvent.contentOffset.y;
+              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);
+              }
+            }
+          },
+        },
+      );
     }
 
     /**
@@ -497,7 +489,11 @@ 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();
         ref?.scrollTo?.({ y: 0, animated: true });
       }
       scrollViewProps?.onScrollEndDrag?.(e);
@@ -513,7 +509,7 @@ const Screen = forwardRef(
             style={[styles.screenBanner, { maxHeight: 210 + layoutOffset }]}
           >
             {animatedHeader?.component({
-              animatedValue: animatedValue,
+              animatedValue: animatedValue.current,
             })}
           </View>
         );
@@ -580,7 +576,7 @@ const Screen = forwardRef(
           headerType={headerType}
           heightHeader={heightHeader}
           headerRightWidth={headerRightWidth}
-          animatedValue={animatedValue}
+          animatedValue={animatedValue.current}
           inputSearchProps={inputSearchProps}
           navigation={navigation}
           inputSearchRef={inputSearchRef}
@@ -618,7 +614,7 @@ const Screen = forwardRef(
             <View>
               <FloatingButton
                 {...floatingButtonProps}
-                animatedValue={animatedValue}
+                animatedValue={animatedValue.current}
                 bottom={
                   Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
                 }

package/package.json

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