@momo-kits/foundation 0.162.2-test.9 → 0.162.3-test.1

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/Input.tsx

@@ -77,7 +77,8 @@ const Input = forwardRef(
     const scaledFontSize = useScaleSize(14);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
     const [focused, setFocused] = useState(false);
-    const haveValue = !!value || !!defaultValue;
+    const [internalText, setInternalText] = useState(defaultValue || '');
+    const haveValue = value !== undefined ? !!value : !!internalText;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'Input';
 
@@ -95,6 +96,9 @@ const Input = forwardRef(
     };
 
     const _onChangeText = (text: string) => {
+      if (value === undefined) {
+        setInternalText(text);
+      }
       onChangeText?.(text);
     };
 

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/Input/InputPhoneNumber.tsx

@@ -69,7 +69,8 @@ const InputPhoneNumber = forwardRef(
     const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
     const [focused, setFocused] = useState(false);
-    const haveValue = !!value || !!defaultValue;
+    const [internalText, setInternalText] = useState(defaultValue || '');
+    const haveValue = value !== undefined ? !!value : !!internalText;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'InputPhoneNumber';
 
@@ -86,6 +87,9 @@ const InputPhoneNumber = forwardRef(
     };
 
     const _onChangeText = (text: string) => {
+      if (value === undefined) {
+        setInternalText(text);
+      }
       onChangeText?.(text);
     };
 

package/Layout/FloatingButton.tsx

@@ -1,20 +1,24 @@
+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;
@@ -23,7 +27,7 @@ export interface FloatingButtonProps {
   icon?: string;
   iconColor?: string;
   size?: 'small' | 'large';
-  animatedValue?: Animated.Value;
+  animatedValue?: AnimatedCompatValue;
   bottom?: number;
   renderComponent?: () => React.ReactNode;
 }
@@ -40,70 +44,71 @@ 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 = useRef(0);
+  const maxWidth = useSharedValue(0);
   const minWidth = size === 'small' ? 36 : 48;
-  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);
+  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);
 
   useEffect(() => {
     if (!label) return;
+    opacityAnimated.value = withTiming(1, { duration: 100 });
+  }, [label, opacityAnimated]);
 
-    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;
+  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;
           if (direction === 'down') {
-            Animated.timing(opacityAnimated, {
-              toValue: 0,
-              duration: 100,
-              useNativeDriver: true,
-            }).start();
-            Animated.timing(widthAnimated!, {
-              toValue: minWidth,
-              duration: 100,
-              useNativeDriver: false,
-            }).start(() => setShowText(false));
+            opacityAnimated.value = withTiming(0, { duration: 100 });
+            widthAnimated.value = withTiming(
+              minWidth,
+              { duration: 100 },
+              (finished) => {
+                if (finished) runOnJS(setShowText)(false);
+              },
+            );
           } else {
-            Animated.timing(opacityAnimated, {
-              toValue: 1,
-              duration: 100,
-              useNativeDriver: true,
-            }).start();
-            Animated.timing(widthAnimated!, {
-              toValue: maxWidth.current,
-              duration: 100,
-              useNativeDriver: false,
-            }).start(() => setShowText(true));
+            opacityAnimated.value = withTiming(1, { duration: 100 });
+            widthAnimated.value = withTiming(
+              maxWidth.value,
+              { duration: 100 },
+              (finished) => {
+                if (finished) runOnJS(setShowText)(true);
+              },
+            );
           }
         }
       }
-    });
+    },
+    [label, enabled, minWidth],
+  );
 
-    return () => {
-      if (listener) {
-        animatedValue?.removeListener(listener);
-      }
-    };
-  }, [animatedValue, label, minWidth, opacityAnimated, widthAnimated]);
+  const containerStyle = useAnimatedStyle(() => ({
+    width: widthAnimated.value ?? undefined,
+  }));
+
+  const labelStyle = useAnimatedStyle(() => ({
+    opacity: opacityAnimated.value,
+  }));
 
   const handleLayout = (event: LayoutChangeEvent) => {
     const layout = event.nativeEvent.layout;
-    if (widthAnimated) return;
-    maxWidth.current = layout.width;
-    setWidthAnimated(new Animated.Value(layout.width));
+    if (widthAnimated.value != null) return;
+    maxWidth.value = layout.width;
+    widthAnimated.value = layout.width;
   };
 
   if (renderComponent) {
@@ -132,11 +137,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
@@ -156,9 +161,9 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
               {
                 fontSize: scaledFontSize,
                 lineHeight: scaledLineHeight,
-                opacity: opacityAnimated,
                 color: 'white',
               },
+              labelStyle,
             ]}
             numberOfLines={1}
           >