@momo-kits/foundation 0.161.1-beta.2 → 0.161.2-beta.5

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?.designSystemConfig?.isBaselineEnabled;
 
-  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/Text/utils.ts

@@ -4,7 +4,7 @@ import { MiniAppContext } from '../Context';
 
 const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
-const MAX_FONT_SCALE = 1.2;
+const MAX_FONT_SCALE = 1.3;
 
 const useScaleSize = (size: number) => {
   const { width } = useWindowDimensions();

package/package.json

@@ -1,35 +1,35 @@
 {
-  "name": "@momo-kits/foundation",
-  "version": "0.161.1-beta.2",
-  "description": "React Native Component Kits",
-  "main": "index.ts",
-  "scripts": {},
-  "keywords": [
-    "@momo-kits/foundation"
-  ],
-  "dependencies": {
-    "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-    "@react-navigation/bottom-tabs": "7.4.2",
-    "@react-navigation/core": "7.12.1",
-    "@react-navigation/elements": "2.5.2",
-    "@react-navigation/native": "7.1.14",
-    "@react-navigation/routers": "7.4.1",
-    "@react-navigation/stack": "7.4.2",
-    "react-native-gesture-handler": "2.27.1",
-    "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-    "react-native-reanimated": "4.1.0",
-    "react-native-safe-area-context": "5.5.2",
-    "@shopify/flash-list": "2.1.0",
-    "lottie-react-native": "7.2.4"
-  },
-  "peerDependencies": {
-    "react-native": "*"
-  },
-  "devDependencies": {
-    "@types/color": "3.0.6"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "license": "MoMo"
-}
+    "name": "@momo-kits/foundation",
+    "version": "0.161.2-beta.5",
+    "description": "React Native Component Kits",
+    "main": "index.ts",
+    "scripts": {},
+    "keywords": [
+        "@momo-kits/foundation"
+    ],
+    "dependencies": {
+        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
+        "@react-navigation/bottom-tabs": "7.4.2",
+        "@react-navigation/core": "7.12.1",
+        "@react-navigation/elements": "2.5.2",
+        "@react-navigation/native": "7.1.14",
+        "@react-navigation/routers": "7.4.1",
+        "@react-navigation/stack": "7.4.2",
+        "react-native-gesture-handler": "2.27.1",
+        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
+        "react-native-reanimated": "4.2.2",
+        "react-native-safe-area-context": "5.5.2",
+        "@shopify/flash-list": "2.1.0",
+        "lottie-react-native": "7.2.4"
+    },
+    "peerDependencies": {
+        "react-native": "*"
+    },
+    "devDependencies": {
+        "@types/color": "3.0.6"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "license": "MoMo"
+}