@momo-kits/foundation 0.162.2-test.10 → 0.162.2-test.20

package/Layout/Screen.tsx

@@ -25,6 +25,10 @@ import {
   View,
   ViewProps,
 } from 'react-native';
+import {
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
@@ -136,7 +140,8 @@ export interface ScreenProps extends ViewProps {
   inputSearchRef?: Ref<InputRef>;
 
   /**
-   * Optional. Animated value for header.
+   * Optional. React Native animated value for header.
+   * Internally, Screen mirrors it into a reanimated shared value.
    */
   animatedValue?: Animated.Value;
 
@@ -195,18 +200,50 @@ const Screen = forwardRef(
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
+
+    /**
+     * Dual animation source:
+     * - `animatedValue` 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.
+     *   If a legacy value is driven outside of Screen, its listener also
+     *   mirrors JS-driven updates into the shared value.
+     * Consumers pass only `Animated.Value`; the reanimated shared value stays
+     * an internal implementation detail.
+     */
     const animatedValue = useRef<Animated.Value>(
-      customAnimatedValue || new Animated.Value(0),
+      customAnimatedValue ?? new Animated.Value(0),
     );
+    const internalShared = useSharedValue(0);
+    const sharedValue = internalShared;
+
+    useEffect(() => {
+      if (!customAnimatedValue) {
+        return;
+      }
+
+      const listenerId = customAnimatedValue.addListener(({ value }) => {
+        internalShared.value = value;
+      });
+
+      return () => {
+        customAnimatedValue.removeListener(listenerId);
+      };
+    }, [customAnimatedValue, internalShared]);
+
     const currentTint = useRef<string | undefined>(undefined);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';
 
     let handleScroll;
     let Component: any = View;
 
-    let keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
+    const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+    let keyboardOffset = heightHeader - bottomInset;
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
-      keyboardOffset = -Math.min(insets.bottom, 21);
+      keyboardOffset = -bottomInset;
     }
 
     /**
@@ -248,9 +285,8 @@ const Screen = forwardRef(
                     interpolate={{
                       inputRange: [0, 50],
                       outputRange: [1, 0],
-                      extrapolate: 'clamp',
                     }}
-                    animatedValue={animatedValue.current}
+                    animatedValue={sharedValue}
                   />
                 ),
               };
@@ -265,7 +301,7 @@ const Screen = forwardRef(
               headerBackground: (props: any) => (
                 <HeaderBackground
                   {...props}
-                  animatedValue={animatedValue.current}
+                  animatedValue={sharedValue}
                   useShadowHeader={useShadowHeader}
                   headerBackground={headerBackground}
                   gradientColor={gradientColor}
@@ -284,9 +320,8 @@ const Screen = forwardRef(
                     interpolate={{
                       inputRange: [0, 50],
                       outputRange: [1, 0],
-                      extrapolate: 'clamp',
                     }}
-                    animatedValue={animatedValue.current}
+                    animatedValue={sharedValue}
                   />
                 ),
               };
@@ -300,6 +335,7 @@ const Screen = forwardRef(
         headerBackground,
         inputSearchProps,
         navigation?.instance,
+        sharedValue,
         useShadowHeader,
       ],
     );
@@ -321,7 +357,7 @@ const Screen = forwardRef(
           headerBackground: (props: any) => (
             <HeaderBackground
               {...props}
-              animatedValue={animatedValue.current}
+              animatedValue={sharedValue}
               useGradient={false}
               useShadowHeader={useShadowHeader}
               headerBackground={headerBackground}
@@ -342,7 +378,13 @@ const Screen = forwardRef(
 
         navigation?.instance?.setOptions(options);
       },
-      [gradientColor, headerBackground, navigation?.instance, useShadowHeader],
+      [
+        gradientColor,
+        headerBackground,
+        navigation?.instance,
+        sharedValue,
+        useShadowHeader,
+      ],
     );
 
     /**
@@ -359,15 +401,14 @@ const Screen = forwardRef(
             interpolate={{
               inputRange: [0, 50],
               outputRange: [1, 0],
-              extrapolate: 'clamp',
             }}
-            animatedValue={animatedValue.current}
+            animatedValue={sharedValue}
           />
         ),
       };
 
       navigation?.instance?.setOptions(options);
-    }, [navigation?.instance]);
+    }, [navigation?.instance, sharedValue]);
 
     /**
      * export search header
@@ -390,7 +431,7 @@ const Screen = forwardRef(
         headerLeft: (props: any) =>
           params?.hiddenBack ? null : <HeaderLeft {...props} />,
         headerTitle: () => (
-          <SearchHeader {...params} animatedValue={animatedValue.current} />
+          <SearchHeader {...params} animatedValue={sharedValue} />
         ),
       };
 
@@ -457,9 +498,11 @@ const Screen = forwardRef(
         {
           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) {
-              const offsetY = e.nativeEvent.contentOffset.y;
               let color = animatedHeader?.headerTintColor ?? Colors.black_17;
               if (offsetY > 50) {
                 color = Colors.black_17;
@@ -494,6 +537,7 @@ const Screen = forwardRef(
           useNativeDriver: true,
           duration: 300,
         }).start();
+        sharedValue.value = withTiming(0, { duration: 300 });
         ref?.scrollTo?.({ y: 0, animated: true });
       }
       scrollViewProps?.onScrollEndDrag?.(e);
@@ -509,7 +553,10 @@ const Screen = forwardRef(
             style={[styles.screenBanner, { maxHeight: 210 + layoutOffset }]}
           >
             {animatedHeader?.component({
+              // legacy consumers read `animatedValue` (Animated.Value),
+              // modern consumers read `sharedValue` (SharedValue).
               animatedValue: animatedValue.current,
+              sharedValue: sharedValue,
             })}
           </View>
         );
@@ -576,7 +623,7 @@ const Screen = forwardRef(
           headerType={headerType}
           heightHeader={heightHeader}
           headerRightWidth={headerRightWidth}
-          animatedValue={animatedValue.current}
+          animatedValue={sharedValue}
           inputSearchProps={inputSearchProps}
           navigation={navigation}
           inputSearchRef={inputSearchRef}
@@ -614,9 +661,9 @@ const Screen = forwardRef(
             <View>
               <FloatingButton
                 {...floatingButtonProps}
-                animatedValue={animatedValue.current}
+                animatedValue={sharedValue}
                 bottom={
-                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
+                  Footer || isTab ? 12 : bottomInset + Spacing.S
                 }
               />
             </View>
@@ -627,7 +674,7 @@ const Screen = forwardRef(
               style={[
                 styles.shadow,
                 {
-                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
+                  paddingBottom: bottomInset + Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
               ]}

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/Text/utils.ts

@@ -14,17 +14,12 @@ const useScaleSize = (size: number, userScaleRate?: number) => {
   const { width } = useWindowDimensions();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
-  // rate precedence: per-call param override > host config (ctxRate) > 1 (no scaling)
   const customRate = userScaleRate ?? ctxRate ?? 1;
 
-  // useOSFontScale off -> the user has full control via customRate; skip device-width scaling
-  // entirely and apply only the custom rate (capped at MAX_FONT_SCALE).
   if (!useOSFontScale) {
-    // custom rate is uncapped (full user control); only the OS-follow path below caps at MAX_FONT_SCALE.
     return customRate > 1 ? customRate * size : size;
   }
 
-  // useOSFontScale on -> device-width scale + OS font scale, take the larger.
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
 

package/package.json

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