@momo-kits/foundation 0.161.2-test.1 → 0.162.2-test.5

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,23 +195,18 @@ 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;
 
-    // AI-GENERATED START
-    // On iOS the home indicator is ~34pt but visual safe area needs only ~21pt cap.
-    // On Android 15+ edge-to-edge the nav bar can be 48dp — no cap needed.
-    const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
-    // AI-GENERATED END
-
-    let keyboardOffset = heightHeader - bottomInset;
+    let keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
-      keyboardOffset = -bottomInset;
+      keyboardOffset = -Math.min(insets.bottom, 21);
     }
 
     /**
@@ -259,8 +248,9 @@ const Screen = forwardRef(
                     interpolate={{
                       inputRange: [0, 50],
                       outputRange: [1, 0],
+                      extrapolate: 'clamp',
                     }}
-                    animatedValue={animatedValue}
+                    animatedValue={animatedValue.current}
                   />
                 ),
               };
@@ -275,7 +265,7 @@ const Screen = forwardRef(
               headerBackground: (props: any) => (
                 <HeaderBackground
                   {...props}
-                  animatedValue={animatedValue}
+                  animatedValue={animatedValue.current}
                   useShadowHeader={useShadowHeader}
                   headerBackground={headerBackground}
                   gradientColor={gradientColor}
@@ -294,8 +284,9 @@ const Screen = forwardRef(
                     interpolate={{
                       inputRange: [0, 50],
                       outputRange: [1, 0],
+                      extrapolate: 'clamp',
                     }}
-                    animatedValue={animatedValue}
+                    animatedValue={animatedValue.current}
                   />
                 ),
               };
@@ -330,7 +321,7 @@ const Screen = forwardRef(
           headerBackground: (props: any) => (
             <HeaderBackground
               {...props}
-              animatedValue={animatedValue}
+              animatedValue={animatedValue.current}
               useGradient={false}
               useShadowHeader={useShadowHeader}
               headerBackground={headerBackground}
@@ -368,8 +359,9 @@ const Screen = forwardRef(
             interpolate={{
               inputRange: [0, 50],
               outputRange: [1, 0],
+              extrapolate: 'clamp',
             }}
-            animatedValue={animatedValue}
+            animatedValue={animatedValue.current}
           />
         ),
       };
@@ -398,7 +390,7 @@ const Screen = forwardRef(
         headerLeft: (props: any) =>
           params?.hiddenBack ? null : <HeaderLeft {...props} />,
         headerTitle: () => (
-          <SearchHeader {...params} animatedValue={animatedValue} />
+          <SearchHeader {...params} animatedValue={animatedValue.current} />
         ),
       };
 
@@ -449,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);
+              }
+            }
+          },
+        },
+      );
     }
 
     /**
@@ -503,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);
@@ -519,7 +509,7 @@ const Screen = forwardRef(
             style={[styles.screenBanner, { maxHeight: 210 + layoutOffset }]}
           >
             {animatedHeader?.component({
-              animatedValue: animatedValue,
+              animatedValue: animatedValue.current,
             })}
           </View>
         );
@@ -586,7 +576,7 @@ const Screen = forwardRef(
           headerType={headerType}
           heightHeader={heightHeader}
           headerRightWidth={headerRightWidth}
-          animatedValue={animatedValue}
+          animatedValue={animatedValue.current}
           inputSearchProps={inputSearchProps}
           navigation={navigation}
           inputSearchRef={inputSearchRef}
@@ -624,9 +614,9 @@ const Screen = forwardRef(
             <View>
               <FloatingButton
                 {...floatingButtonProps}
-                animatedValue={animatedValue}
+                animatedValue={animatedValue.current}
                 bottom={
-                  Footer || isTab ? 12 : bottomInset + Spacing.S
+                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
                 }
               />
             </View>
@@ -637,7 +627,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/Loader/ProgressBar.tsx

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

package/Pagination/Dot.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useContext } from 'react';
-import { View } from 'react-native';
+import { Animated } 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 <View style={[style, dotStyle]} />;
+  return <Animated.View style={[style, dotStyle]} />;
 };
 
 export default Dot;

package/Pagination/PaginationScroll.tsx

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

package/Skeleton/index.tsx

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

package/Text/utils.ts

@@ -7,13 +7,18 @@ const DEFAULT_SCREEN_SIZE = 375;
 const MAX_FONT_SCALE = 1.5;
 const MAX_DEVICE_SCALE = 5;
 
-const useScaleSize = (size: number, scaleRate?: number) => {
-  const { scaleSizeMaxRate = MAX_FONT_SCALE } = useContext(ScaleSizeContext);
+const useScaleSize = (size: number, userScaleRate?: number) => {
+  const { useOSFontScale = false, userScaleRate: ctxRate } =
+    useContext(ScaleSizeContext);
   const fontScale = PixelRatio.getFontScale();
   const { width } = useWindowDimensions();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
-  const maxScaleRate = scaleRate ?? scaleSizeMaxRate;
+  // rate user tự chỉnh: param override > config > 1 (không scale)
+  const customRate = userScaleRate ?? ctxRate ?? 1;
+  // useOSFontScale bật -> lấy scale OS đè lên, ignore custom rate;
+  // tắt -> dùng custom rate. Cap cứng MAX_FONT_SCALE (150%) cả hai.
+  const appliedRate = useOSFontScale ? fontScale : customRate;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
@@ -25,10 +30,10 @@ const useScaleSize = (size: number, scaleRate?: number) => {
     );
   }
 
-  if (fontScale > 1) {
+  if (appliedRate > 1) {
     fontSizeOSScale = Math.min(
-      fontSizeOSScale * fontScale,
-      fontSizeOSScale * maxScaleRate,
+      appliedRate * fontSizeOSScale,
+      fontSizeOSScale * MAX_FONT_SCALE,
     );
   }
 

package/package.json

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