@momo-kits/foundation 0.162.2-sp.2 → 0.162.2-test.10

package/Badge/BadgeDotAnimation.tsx

@@ -1,75 +1,93 @@
-import React, { useEffect } from 'react';
-import { View } from 'react-native';
-import Animated, {
-  cancelAnimation,
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withSequence,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated';
+import React, { useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
 import { BadgeDotProps } from './types';
 import styles from './styles';
 
 const DURATION = 500;
 
 const BadgeDotAnimation = ({ size, style }: BadgeDotProps) => {
-  const scaleAnim = useSharedValue(1);
-  const waveScaleAnim = useSharedValue(1);
-  const waveOpacityAnim = useSharedValue(0);
+  // 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 dotStyle =
     size === 'small' ? styles.dotAnimationSmall : styles.dotAnimation;
   const waveStyle = size === 'small' ? styles.waveSmall : styles.wave;
 
   useEffect(() => {
-    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,
+    // 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();
+
     return () => {
-      cancelAnimation(scaleAnim);
-      cancelAnimation(waveScaleAnim);
-      cancelAnimation(waveOpacityAnim);
+      animation.stop();
     };
   }, [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]}>
-      <Animated.View style={[waveStyle, waveAnimatedStyle]} />
-      <Animated.View style={[dotStyle, dotAnimatedStyle]} />
+      {/* Wave Animation */}
+      <Animated.View
+        style={[
+          waveStyle,
+          {
+            transform: [{ scale: waveScaleAnim }],
+            opacity: waveOpacityAnim,
+          },
+        ]}
+      />
+      {/* Dot Animation */}
+      <Animated.View
+        style={[
+          dotStyle,
+          {
+            transform: [{ scale: scaleAnim }],
+          },
+        ]}
+      />
     </View>
   );
 };

package/Button/index.tsx

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

package/Context/index.ts

@@ -9,9 +9,12 @@ const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
 const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
 const SkeletonContext = createContext({ loading: false });
-const ScaleSizeContext = createContext<{ scaleSizeMaxRate?: number }>({
-  scaleSizeMaxRate: undefined,
-});
+// Single source of truth: holds both the OS flag and the user-adjusted rate.
+export type FontScaleConfig = {
+  useOSFontScale?: boolean;
+  userScaleRate?: number;
+};
+const ScaleSizeContext = createContext<FontScaleConfig>({});
 const TrackingScopeContext = createContext<{ scopeName?: string }>({
   scopeName: undefined,
 });

package/Input/InputOTP.tsx

@@ -8,22 +8,13 @@ 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';
@@ -41,43 +32,37 @@ import {
 const OTPCaret: FC<CaretProps> = ({ index, length }) => {
   const DURATION = 300;
   const { theme } = useContext(ApplicationContext);
-  const opacity = useSharedValue(0);
+  const opacity = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
-    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);
-    };
+    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]);
-
-  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,
-          },
-          animatedStyle,
-        ]}
+        style={{
+          height: useScaleSize(12),
+          width: 1,
+          backgroundColor: theme.colors.primary,
+          opacity,
+        }}
       />
       <Text color={theme.colors.text.hint} typography={'body_default_regular'}>
         -

package/Layout/FloatingButton.tsx

@@ -1,24 +1,20 @@
-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,
-} from 'react-native-reanimated';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize } from '../Text';
-import {
-  AnimatedCompatValue,
-  useNormalizedSharedValue,
-} from '../Application/utils';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -27,7 +23,7 @@ export interface FloatingButtonProps {
   icon?: string;
   iconColor?: string;
   size?: 'small' | 'large';
-  animatedValue?: AnimatedCompatValue;
+  animatedValue?: Animated.Value;
   bottom?: number;
   renderComponent?: () => React.ReactNode;
 }
@@ -44,71 +40,70 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   bottom = 12,
 }: FloatingButtonProps) => {
   const { theme } = useContext(ApplicationContext);
-  const enabled = animatedValue != null;
-  const sharedValue = useNormalizedSharedValue(animatedValue);
   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(
-    () => sharedValue.value,
-    (value) => {
-      'worklet';
-      if (!label || !enabled) 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, enabled, 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) {
@@ -137,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
@@ -161,9 +156,9 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
               {
                 fontSize: scaledFontSize,
                 lineHeight: scaledLineHeight,
+                opacity: opacityAnimated,
                 color: 'white',
               },
-              labelStyle,
             ]}
             numberOfLines={1}
           >

package/Layout/Screen.tsx

@@ -25,10 +25,6 @@ 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';
@@ -140,8 +136,7 @@ export interface ScreenProps extends ViewProps {
   inputSearchRef?: Ref<InputRef>;
 
   /**
-   * Optional. React Native animated value for header.
-   * Internally, Screen mirrors it into a reanimated shared value.
+   * Optional. Animated value for header.
    */
   animatedValue?: Animated.Value;
 
@@ -200,40 +195,9 @@ const Screen = forwardRef(
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
-
-    /**
-     * Dual animation source:
-     * - `rnValue` 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 rnValue = useRef<Animated.Value>(
-      customAnimatedValue ?? new Animated.Value(0),
+    const animatedValue = useRef<Animated.Value>(
+      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';
 
@@ -284,8 +248,9 @@ const Screen = forwardRef(
                     interpolate={{
                       inputRange: [0, 50],
                       outputRange: [1, 0],
+                      extrapolate: 'clamp',
                     }}
-                    animatedValue={sharedValue}
+                    animatedValue={animatedValue.current}
                   />
                 ),
               };
@@ -300,7 +265,7 @@ const Screen = forwardRef(
               headerBackground: (props: any) => (
                 <HeaderBackground
                   {...props}
-                  animatedValue={sharedValue}
+                  animatedValue={animatedValue.current}
                   useShadowHeader={useShadowHeader}
                   headerBackground={headerBackground}
                   gradientColor={gradientColor}
@@ -319,8 +284,9 @@ const Screen = forwardRef(
                     interpolate={{
                       inputRange: [0, 50],
                       outputRange: [1, 0],
+                      extrapolate: 'clamp',
                     }}
-                    animatedValue={sharedValue}
+                    animatedValue={animatedValue.current}
                   />
                 ),
               };
@@ -334,7 +300,6 @@ const Screen = forwardRef(
         headerBackground,
         inputSearchProps,
         navigation?.instance,
-        sharedValue,
         useShadowHeader,
       ],
     );
@@ -356,7 +321,7 @@ const Screen = forwardRef(
           headerBackground: (props: any) => (
             <HeaderBackground
               {...props}
-              animatedValue={sharedValue}
+              animatedValue={animatedValue.current}
               useGradient={false}
               useShadowHeader={useShadowHeader}
               headerBackground={headerBackground}
@@ -377,13 +342,7 @@ const Screen = forwardRef(
 
         navigation?.instance?.setOptions(options);
       },
-      [
-        gradientColor,
-        headerBackground,
-        navigation?.instance,
-        sharedValue,
-        useShadowHeader,
-      ],
+      [gradientColor, headerBackground, navigation?.instance, useShadowHeader],
     );
 
     /**
@@ -400,14 +359,15 @@ const Screen = forwardRef(
             interpolate={{
               inputRange: [0, 50],
               outputRange: [1, 0],
+              extrapolate: 'clamp',
             }}
-            animatedValue={sharedValue}
+            animatedValue={animatedValue.current}
           />
         ),
       };
 
       navigation?.instance?.setOptions(options);
-    }, [navigation?.instance, sharedValue]);
+    }, [navigation?.instance]);
 
     /**
      * export search header
@@ -430,7 +390,7 @@ const Screen = forwardRef(
         headerLeft: (props: any) =>
           params?.hiddenBack ? null : <HeaderLeft {...props} />,
         headerTitle: () => (
-          <SearchHeader {...params} animatedValue={sharedValue} />
+          <SearchHeader {...params} animatedValue={animatedValue.current} />
         ),
       };
 
@@ -490,18 +450,16 @@ const Screen = forwardRef(
         [
           {
             nativeEvent: {
-              contentOffset: { y: rnValue.current as Animated.Value },
+              contentOffset: { y: animatedValue.current as Animated.Value },
             },
           },
         ],
         {
           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;
@@ -531,12 +489,11 @@ const Screen = forwardRef(
     const handleScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
       const offsetY = e.nativeEvent.contentOffset.y;
       if (inputSearchProps && offsetY < 100 && offsetY > 0) {
-        Animated.timing(rnValue.current, {
+        Animated.timing(animatedValue.current, {
           toValue: 0,
           useNativeDriver: true,
           duration: 300,
         }).start();
-        sharedValue.value = withTiming(0, { duration: 300 });
         ref?.scrollTo?.({ y: 0, animated: true });
       }
       scrollViewProps?.onScrollEndDrag?.(e);
@@ -552,10 +509,7 @@ const Screen = forwardRef(
             style={[styles.screenBanner, { maxHeight: 210 + layoutOffset }]}
           >
             {animatedHeader?.component({
-              // legacy consumers read `animatedValue` (Animated.Value),
-              // modern consumers read `sharedValue` (SharedValue).
-              animatedValue: rnValue.current,
-              sharedValue: sharedValue,
+              animatedValue: animatedValue.current,
             })}
           </View>
         );
@@ -622,7 +576,7 @@ const Screen = forwardRef(
           headerType={headerType}
           heightHeader={heightHeader}
           headerRightWidth={headerRightWidth}
-          animatedValue={sharedValue}
+          animatedValue={animatedValue.current}
           inputSearchProps={inputSearchProps}
           navigation={navigation}
           inputSearchRef={inputSearchRef}
@@ -660,7 +614,7 @@ const Screen = forwardRef(
             <View>
               <FloatingButton
                 {...floatingButtonProps}
-                animatedValue={sharedValue}
+                animatedValue={animatedValue.current}
                 bottom={
                   Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
                 }