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

package/Application/BottomSheet.tsx

@@ -20,7 +20,7 @@ import { Icon } from '../Icon';
 import { useHeaderHeight } from '@react-navigation/elements';
 import Animated, {
   Easing,
-  Extrapolate,
+  Extrapolation,
   interpolate,
   runOnJS,
   useAnimatedStyle,
@@ -242,7 +242,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         translateY.value,
         [0, heightDevice],
         [1, 0],
-        Extrapolate.CLAMP,
+        Extrapolation.CLAMP,
       ),
     };
   });

package/Application/BottomTab/BottomTabBar.tsx

@@ -2,13 +2,17 @@ import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { CommonActions, Route } from '@react-navigation/native';
 import React, { useCallback, useContext } from 'react';
 import {
-  Animated,
   Platform,
   StyleSheet,
   TouchableOpacity,
   useWindowDimensions,
   View,
 } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Colors, Radius, Styles } from '../../Consts';
 import { Icon } from '../../Icon';
@@ -57,8 +61,13 @@ export default function BottomTabBar({
   const useFloating = floatingButton && state.routes.length % 2 === 0;
   const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
   // const buildLink = useLinkBuilder();
-  const indicatorAnimated = React.useRef(new Animated.Value(0)).current;
+  const indicatorAnimated = useSharedValue(0);
   const insets = useSafeAreaInsets();
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: itemWidth,
+    transform: [{ translateX: indicatorAnimated.value }],
+  }));
   const paddingBottom = getPaddingBottom(insets);
   const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
 
@@ -199,11 +208,7 @@ export default function BottomTabBar({
     if (useFloating && index > (state.routes.length - 1) / 2) {
       index += 1;
     }
-    Animated.timing(indicatorAnimated, {
-      toValue: itemWidth * index,
-      useNativeDriver: true,
-      duration: 200,
-    }).start();
+    indicatorAnimated.value = withTiming(itemWidth * index, { duration: 200 });
   }, [
     state.index,
     itemWidth,
@@ -232,7 +237,7 @@ export default function BottomTabBar({
   };
 
   return (
-    <Animated.View
+    <View
       style={[
         floatingButton ? styles.tabBarFloatingButton : styles.tabBar,
         {
@@ -250,12 +255,7 @@ export default function BottomTabBar({
       <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
         {useFloating && floatingButton?.container}
         <Animated.View
-          style={{
-            width: itemWidth,
-            position: 'absolute',
-            top: 0,
-            transform: [{ translateX: indicatorAnimated }],
-          }}
+          style={[{ position: 'absolute', top: 0 }, indicatorStyle]}
         >
           <View
             style={[
@@ -266,7 +266,7 @@ export default function BottomTabBar({
         </Animated.View>
         {renderTabBar()}
       </View>
-    </Animated.View>
+    </View>
   );
 }
 

package/Application/BottomTab/index.tsx

@@ -5,16 +5,20 @@ import {
   useFocusEffect,
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
+import React, { useContext, useEffect, useLayoutEffect } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
-  Animated,
   Platform,
   StatusBar,
   StyleSheet,
   useWindowDimensions,
   View,
 } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { Colors } from '../../Consts';
 import { Icon } from '../../Icon';
 import { exportFontFamily, Text } from '../../Text';
@@ -35,11 +39,16 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
-  const opacity = useRef(new Animated.Value(opacityValue)).current;
-  const scale = useRef(new Animated.Value(scaleValue)).current;
+  const opacity = useSharedValue(opacityValue);
+  const scale = useSharedValue(scaleValue);
   const screenName = screen?.name || screen?.type?.name || 'Invalid';
   const { isBackgroundToForeground } = useAppState();
 
+  const tabAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ scale: scale.value }],
+  }));
+
   const onScreenNavigated = (pre: string, current: string) => {
     if (!isBackgroundToForeground) {
       const data: any = {
@@ -69,18 +78,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   useFocusEffect(
     React.useCallback(
       () => {
-        Animated.parallel([
-          Animated.timing(opacity, {
-            toValue: 1,
-            duration: 200,
-            useNativeDriver: true,
-          }),
-          Animated.timing(scale, {
-            toValue: 1,
-            duration: 200,
-            useNativeDriver: true,
-          }),
-        ]).start();
+        opacity.value = withTiming(1, { duration: 200 });
+        scale.value = withTiming(1, { duration: 200 });
 
         setTimeout(() => {
           navigator?.maxApi?.getDataObserver?.(
@@ -96,18 +95,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
         return () => {
           if (navigation.getState().index !== route?.params.index) {
-            Animated.parallel([
-              Animated.timing(opacity, {
-                toValue: opacityValue,
-                duration: 200,
-                useNativeDriver: true,
-              }),
-              Animated.timing(scale, {
-                toValue: scaleValue,
-                duration: 200,
-                useNativeDriver: true,
-              }),
-            ]).start();
+            opacity.value = withTiming(opacityValue, { duration: 200 });
+            scale.value = withTiming(scaleValue, { duration: 200 });
           }
         };
       },
@@ -147,15 +136,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
   if (nested) {
     return (
-      <Animated.View
-        style={[
-          styles.container,
-          {
-            opacity,
-            transform: [{ scale }],
-          },
-        ]}
-      >
+      <Animated.View style={[styles.container, tabAnimatedStyle]}>
         <Stack.Navigator
           screenOptions={{
             headerStyle: {
@@ -228,10 +209,15 @@ const BottomTab: React.FC<BottomTabProps> = ({
   const dimensions = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
-  const indicatorAnimated = useRef(new Animated.Value(0));
-  const activeIndex = useRef(initialIndex > 0 ? initialIndex : 0);
+  const indicatorAnimated = useSharedValue(0);
+  const activeIndex = React.useRef(initialIndex > 0 ? initialIndex : 0);
   const itemWidth = dimensions.width / tabs.length;
 
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: itemWidth,
+    transform: [{ translateX: indicatorAnimated.value }],
+  }));
+
   useLayoutEffect(() => {
     navigation?.setOptions({
       headerShown: false,
@@ -241,20 +227,16 @@ const BottomTab: React.FC<BottomTabProps> = ({
   }, [navigation]);
 
   useEffect(() => {
-    Animated.timing(indicatorAnimated.current, {
-      toValue: itemWidth * activeIndex.current,
-      useNativeDriver: true,
+    indicatorAnimated.value = withTiming(itemWidth * activeIndex.current, {
       duration: 200,
-    }).start();
-  }, [itemWidth]);
+    });
+  }, [itemWidth, indicatorAnimated]);
 
   const onFocus = (e: any) => {
     activeIndex.current = tabs.findIndex(i => e.target.includes(i.name));
-    Animated.timing(indicatorAnimated.current, {
-      toValue: itemWidth * activeIndex.current,
-      useNativeDriver: true,
+    indicatorAnimated.value = withTiming(itemWidth * activeIndex.current, {
       duration: 200,
-    }).start();
+    });
   };
 
   const handler: {
@@ -294,13 +276,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             ]}
           >
             <Animated.View
-              style={[
-                styles.indicatorContainer,
-                {
-                  width: itemWidth,
-                  transform: [{ translateX: indicatorAnimated.current }],
-                },
-              ]}
+              style={[styles.indicatorContainer, indicatorStyle]}
             >
               <View
                 style={[

package/Badge/BadgeDotAnimation.tsx

@@ -1,93 +1,75 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, View } from 'react-native';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
 import { BadgeDotProps } from './types';
 import styles from './styles';
 
 const DURATION = 500;
 
 const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
-  // Refs for animated values
-  const scaleAnim = useRef(new Animated.Value(1)).current;
-  const waveScaleAnim = useRef(new Animated.Value(1)).current;
-  const waveOpacityAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useSharedValue(1);
+  const waveScaleAnim = useSharedValue(1);
+  const waveOpacityAnim = useSharedValue(0);
 
   const dotStyle =
     size === 'small' ? styles.dotAnimationSmall : styles.dotAnimation;
   const waveStyle = size === 'small' ? styles.waveSmall : styles.wave;
 
   useEffect(() => {
-    // Infinite loop animation for the scale and wave effect
-    const animation = Animated.loop(
-      Animated.parallel([
-        // Dot pulse animation
-        Animated.sequence([
-          Animated.spring(scaleAnim, {
-            toValue: 1, // Scale up slightly
-            friction: 5, // Controls the "bounciness" of the spring
-            tension: 30, // Controls the "stiffness" of the spring
-            useNativeDriver: true,
-          }),
-          Animated.spring(scaleAnim, {
-            toValue: 1.1,
-            friction: 5,
-            tension: 30,
-            useNativeDriver: true,
-          }),
-        ]), // Wave animation
-        Animated.sequence([
-          Animated.timing(waveScaleAnim, {
-            toValue: 2.5,
-            duration: DURATION * 3,
-            useNativeDriver: true,
-          }),
-          Animated.timing(waveScaleAnim, {
-            toValue: 1, // Reset wave size
-            duration: 0,
-            useNativeDriver: true,
-          }),
-        ]), // Wave opacity animation
-        Animated.sequence([
-          Animated.timing(waveOpacityAnim, {
-            toValue: 0.3, // Wave becomes visible
-            duration: DURATION * 2,
-            useNativeDriver: true,
-          }),
-          Animated.timing(waveOpacityAnim, {
-            toValue: 0, // Wave fades out
-            duration: DURATION,
-            useNativeDriver: true,
-          }),
-        ]),
-      ]),
-    );
-    animation.start();
+    const springCfg = { damping: 5, stiffness: 30, mass: 1 };
 
+    scaleAnim.value = withRepeat(
+      withSequence(
+        withSpring(1, springCfg),
+        withSpring(1.1, springCfg),
+      ),
+      -1,
+      false,
+    );
+    waveScaleAnim.value = withRepeat(
+      withSequence(
+        withTiming(2.5, { duration: DURATION * 3 }),
+        withTiming(1, { duration: 0 }),
+      ),
+      -1,
+      false,
+    );
+    waveOpacityAnim.value = withRepeat(
+      withSequence(
+        withTiming(0.3, { duration: DURATION * 2 }),
+        withTiming(0, { duration: DURATION }),
+      ),
+      -1,
+      false,
+    );
     return () => {
-      animation.stop();
+      cancelAnimation(scaleAnim);
+      cancelAnimation(waveScaleAnim);
+      cancelAnimation(waveOpacityAnim);
     };
   }, [scaleAnim, waveOpacityAnim, waveScaleAnim]);
 
+  const waveAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: waveScaleAnim.value }],
+    opacity: waveOpacityAnim.value,
+  }));
+
+  const dotAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scaleAnim.value }],
+  }));
+
   return (
     <View style={[styles.dotAnimationContainer, style]}>
-      {/* Wave Animation */}
-      <Animated.View
-        style={[
-          waveStyle,
-          {
-            transform: [{ scale: waveScaleAnim }],
-            opacity: waveOpacityAnim,
-          },
-        ]}
-      />
-      {/* Dot Animation */}
-      <Animated.View
-        style={[
-          dotStyle,
-          {
-            transform: [{ scale: scaleAnim }],
-          },
-        ]}
-      />
+      <Animated.View style={[waveStyle, waveAnimatedStyle]} />
+      <Animated.View style={[dotStyle, dotAnimatedStyle]} />
     </View>
   );
 };

package/Button/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useContext, useRef } from 'react';
 import {
-  Animated,
   StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
@@ -29,8 +28,6 @@ import Reanimated, {
   withTiming,
 } from 'react-native-reanimated';
 
-const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
-
 export interface ButtonProps extends TouchableOpacityProps {
   /**
    * Defines the visual style of the button.
@@ -359,7 +356,7 @@ const Button: FC<ButtonProps> = ({
           {renderTitle()}
           {renderIcon('right')}
           {gradientPros && (
-            <AnimationLinear {...gradientPros} style={styles.gradientView} />
+            <LinearGradient {...gradientPros} style={styles.gradientView} />
           )}
           {gradientPros && <View style={styles.strokeView} />}
         </Reanimated.View>

package/Input/InputOTP.tsx

@@ -8,13 +8,22 @@ import React, {
   useState,
 } from 'react';
 import {
-  Animated,
   PixelRatio,
   TextInput,
   TextInputFocusEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
 import { useComponentId } from '../Application';
 import { Spacing, Styles } from '../Consts';
 import { useScaleSize, Text } from '../Text';
@@ -32,37 +41,43 @@ import {
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   const DURATION = 300;
   const { theme } = useContext(ApplicationContext);
-  const opacity = useRef(new Animated.Value(0)).current;
+  const opacity = useSharedValue(0);
 
   useEffect(() => {
-    Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: DURATION,
-          useNativeDriver: true,
-        }),
-        Animated.delay(DURATION * 2),
-        Animated.timing(opacity, {
-          toValue: 0,
-          duration: DURATION,
-          useNativeDriver: true,
-        }),
-      ]),
-    ).start();
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: DURATION, easing: Easing.linear }),
+        withDelay(
+          DURATION * 2,
+          withTiming(0, { duration: DURATION, easing: Easing.linear }),
+        ),
+      ),
+      -1,
+      false,
+    );
+    return () => {
+      cancelAnimation(opacity);
+    };
   }, [opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
   const spacingStyle = !isNaN(Number(length)) &&
     index !== Number(length) - 1 && { marginRight: Spacing.L };
 
   return (
     <View style={[Styles.rowCenter, spacingStyle]}>
       <Animated.View
-        style={{
-          height: useScaleSize(12),
-          width: 1,
-          backgroundColor: theme.colors.primary,
-          opacity,
-        }}
+        style={[
+          {
+            height: useScaleSize(12),
+            width: 1,
+            backgroundColor: theme.colors.primary,
+          },
+          animatedStyle,
+        ]}
       />
       <Text color={theme.colors.text.hint} typography={'body_default_regular'}>
         -

package/Loader/ProgressBar.tsx

@@ -1,5 +1,10 @@
-import React, { FC, useContext, useEffect, useRef } from 'react';
-import { Animated, View } from 'react-native';
+import React, { FC, useContext, useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import styles from './styles';
 import { ProgressBarProps } from './types';
 import { ApplicationContext } from '../Context';
@@ -7,20 +12,15 @@ import { Radius } from '../Consts';
 
 const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
   const { theme } = useContext(ApplicationContext);
-  const animation = useRef(new Animated.Value(0)).current;
+  const animation = useSharedValue(0);
 
   useEffect(() => {
-    Animated.timing(animation, {
-      toValue: percent,
-      duration: 200,
-      useNativeDriver: false,
-    }).start();
+    animation.value = withTiming(percent, { duration: 200 });
   }, [percent, animation]);
 
-  const width = animation.interpolate({
-    inputRange: [0, 100],
-    outputRange: ['0%', '100%'],
-  });
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: `${Math.min(Math.max(animation.value, 0), 100)}%`,
+  }));
 
   return (
     <View
@@ -31,12 +31,14 @@ const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
       ]}
     >
       <Animated.View
-        style={{
-          height: 4,
-          borderRadius: Radius.XXS,
-          width,
-          backgroundColor: theme.colors.primary,
-        }}
+        style={[
+          {
+            height: 4,
+            borderRadius: Radius.XXS,
+            backgroundColor: theme.colors.primary,
+          },
+          animatedStyle,
+        ]}
       />
     </View>
   );

package/Pagination/Dot.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useContext } from 'react';
-import { Animated } from 'react-native';
+import { View } from 'react-native';
 import styles from './styles';
 import { DotProps } from './types';
 import { ApplicationContext } from '../Context';
@@ -13,7 +13,7 @@ const Dot: FC<DotProps> = ({ active, style }) => {
         { backgroundColor: theme.colors.background.pressed },
       ];
 
-  return <Animated.View style={[style, dotStyle]} />;
+  return <View style={[style, dotStyle]} />;
 };
 
 export default Dot;

package/Pagination/PaginationScroll.tsx

@@ -1,5 +1,12 @@
-import React, { FC, useContext, useRef, useState } from 'react';
-import { Animated, View } from 'react-native';
+import React, { FC, useContext, useState } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
 import { ScrollIndicatorProps } from './types';
 import styles from './styles';
 import { ApplicationContext, MiniAppContext } from '../Context';
@@ -13,40 +20,37 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const left = useRef(new Animated.Value(0)).current;
+  const left = useSharedValue(0);
   const [scrollViewWidth, setScrollViewWidth] = useState(0);
   const [scrollContentWidth, setScrollContentWidth] = useState(0);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const translateX = () => {
-    if (scrollViewWidth && scrollContentWidth) {
-      const value = left.interpolate({
-        inputRange: [0, scrollContentWidth - scrollViewWidth],
-        outputRange: [0, INDICATOR_CONTAINER_WIDTH - INDICATOR_WIDTH],
-        extrapolate: 'clamp',
-      });
-      return { transform: [{ translateX: value }] };
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      left.value = event.contentOffset.x;
+    },
+  });
+
+  const indicatorStyle = useAnimatedStyle(() => {
+    if (!scrollViewWidth || !scrollContentWidth) {
+      return {};
     }
-    return {};
-  };
+    const value = interpolate(
+      left.value,
+      [0, scrollContentWidth - scrollViewWidth],
+      [0, INDICATOR_CONTAINER_WIDTH - INDICATOR_WIDTH],
+      Extrapolation.CLAMP,
+    );
+    return { transform: [{ translateX: value }] };
+  });
 
   const renderScrollView = () => {
     return (
       <Animated.ScrollView
-        ref={scrollViewRef}
-        onScroll={Animated.event(
-          [
-            {
-              nativeEvent: {
-                contentOffset: {
-                  x: left,
-                },
-              },
-            },
-          ],
-          { useNativeDriver: true },
-        )}
+        ref={scrollViewRef as any}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
         alwaysBounceHorizontal={false}
         showsHorizontalScrollIndicator={false}
         horizontal
@@ -76,7 +80,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
             {
               backgroundColor: theme.colors.primary,
             },
-            translateX(),
+            indicatorStyle,
           ]}
         />
       </View>

package/Skeleton/index.tsx

@@ -1,13 +1,20 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
-  Animated,
-  Easing,
   LayoutAnimation,
   Platform,
   StyleSheet,
   UIManager,
   View,
 } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
 import LinearGradient from 'react-native-linear-gradient';
 import { SkeletonTypes } from './types';
 import { Colors, Styles } from '../Consts';
@@ -20,32 +27,31 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   const PRIMARY_COLOR = Colors.black_05;
   const HIGHLIGHT_COLOR1 = Colors.black_05;
   const HIGHLIGHT_COLOR2 = Colors.black_03;
-  const beginShimmerPosition = useRef(new Animated.Value(0)).current;
+  const progress = useSharedValue(0);
 
   const shimmerColors = [HIGHLIGHT_COLOR1, HIGHLIGHT_COLOR2, HIGHLIGHT_COLOR1];
-  const linearTranslate = beginShimmerPosition.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-width, width],
-  });
-  const animatedValue = useMemo(() => {
-    return Animated.loop(
-      Animated.timing(beginShimmerPosition, {
-        toValue: 1,
+
+  useEffect(() => {
+    progress.value = 0;
+    progress.value = withRepeat(
+      withTiming(1, {
         duration: 1000,
         easing: Easing.linear,
-        useNativeDriver: Platform.OS !== 'web',
       }),
+      -1,
+      false,
     );
-  }, [beginShimmerPosition]);
-
-  useEffect(() => {
-    animatedValue.start();
     screen?.onLoading?.(true);
     return () => {
-      animatedValue.stop();
+      cancelAnimation(progress);
       screen?.onLoading?.(false);
     };
-  }, [animatedValue, screen]);
+  }, [progress, screen]);
+
+  const shimmerStyle = useAnimatedStyle(() => {
+    const translateX = interpolate(progress.value, [0, 1], [-width, width]);
+    return { transform: [{ translateX }] };
+  });
 
   const onLayout = (newWidth: number) => {
     if (newWidth !== width) {
@@ -60,11 +66,13 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
         style={[Styles.flex, { backgroundColor: PRIMARY_COLOR }]}
       >
         <Animated.View
-          style={{
-            transform: [{ translateX: linearTranslate }],
-            width: '60%',
-            height: '100%',
-          }}
+          style={[
+            {
+              width: '60%',
+              height: '100%',
+            },
+            shimmerStyle,
+          ]}
         >
           <LinearGradient
             style={[StyleSheet.absoluteFill]}

package/package.json

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