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

package/Application/Components/HeaderExtendHeader.tsx

@@ -1,7 +1,14 @@
-import React, { Ref, useContext, useEffect, useRef } from 'react';
+import React, { Ref, useContext } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
+import { Dimensions, Platform, StyleSheet, View } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
-import { Animated, Dimensions, Platform, StyleSheet, View } from 'react-native';
 import { HeaderType } from '../../Layout/types';
 import { InputRef, InputSearch } from '../../Input';
 import Navigation from '../Navigation';
@@ -14,15 +21,10 @@ const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
 
 const { width: screenWidth } = Dimensions.get('window');
-const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
 
-/**
- * Header extended with background image
- * @constructor
- */
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
-  animatedValue: Animated.Value;
+  animatedValue: SharedValue<number>;
   heightHeader: number;
   headerRightWidth: number;
   inputSearchProps?: SearchHeaderProps;
@@ -38,118 +40,132 @@ const HeaderExtendHeader: React.FC<{
   headerRightWidth = 73,
   inputSearchProps,
   inputSearchRef,
-  useShadowHeader = true,
+  useShadowHeader: useShadowHeaderProp = true,
   gradientColor: customGradientColor,
   headerBackground: customBackground,
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const animated = useRef(new Animated.Value(0));
+  const fallback = useSharedValue(0);
+  const sv = animatedValue ?? fallback;
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  let useShadowHeader = useShadowHeaderProp;
+  if (inputSearchProps && Platform.OS === 'android') {
+    useShadowHeader = false;
+  }
 
-  const opacityBackground = animatedValue?.interpolate({
-    inputRange: [0, 52],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  });
-  const opacityGradient = animatedValue?.interpolate({
-    inputRange: [0, 52],
-    outputRange: [1, 0],
-    extrapolate: 'clamp',
-  });
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
-  useEffect(() => {
-    const listener = animatedValue.addListener(({ value }) => {
-      animated.current.setValue(value);
-    });
-    return () => {
-      animatedValue?.removeListener(listener);
-    };
-  }, [animatedValue]);
+  const heightStyle = useAnimatedStyle(() => ({
+    height: interpolate(
+      sv.value,
+      [0, 100],
+      [heightHeader + 52, heightHeader],
+      Extrapolation.CLAMP,
+    ),
+  }));
 
-  const height = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [heightHeader + 52, heightHeader],
-    extrapolate: 'clamp',
-  });
+  const gradientOpacityStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(sv.value, [0, 52], [1, 0], Extrapolation.CLAMP),
+  }));
 
-  const translateX = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [SCREEN_PADDING, leftPosition],
-    extrapolate: 'clamp',
-  });
-
-  const backgroundColor = animated.current.interpolate({
-    inputRange: [0, 100],
-    outputRange: [
-      theme.colors.background.surface,
-      theme.colors.background.default,
+  const searchTranslateStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: interpolate(
+          sv.value,
+          [0, 100],
+          [SCREEN_PADDING, leftPosition],
+          Extrapolation.CLAMP,
+        ),
+      },
     ],
-    extrapolate: 'clamp',
+    width: interpolate(
+      sv.value,
+      [0, 100],
+      [
+        screenWidth - SCREEN_PADDING * 2,
+        screenWidth - leftPosition - 12 - headerRightWidth,
+      ],
+      Extrapolation.CLAMP,
+    ),
+  }));
+
+  const searchBackgroundStyle = useAnimatedStyle(() => {
+    const t = Math.min(Math.max(sv.value / 100, 0), 1);
+    return { backgroundColor: t === 0
+      ? theme.colors.background.surface
+      : theme.colors.background.default };
   });
 
-  if (inputSearchProps && Platform.OS === 'android') {
-    useShadowHeader = false;
-  }
+  const extendedHeightStyle = useAnimatedStyle(() => ({
+    height: interpolate(
+      sv.value,
+      [0, 100],
+      [heightHeader + 52, heightHeader],
+      Extrapolation.CLAMP,
+    ),
+  }));
 
   if (inputSearchProps) {
     return (
       <View style={[{ zIndex: 0 }, showBaseLineDebug && styles.debugBaseLine]}>
-        <Animated.View style={{ height: height }} />
+        <Animated.View style={heightStyle} />
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
-          opacityBackground={opacityBackground}
+          animatedValue={sv}
           headerBackground={headerBackground}
         />
         <Animated.View
           style={[
             styles.headerBox,
-            { height: headerType === 'extended' ? height : heightHeader },
+            headerType === 'extended'
+              ? heightStyle
+              : { height: heightHeader },
           ]}
         >
           {!!gradientColor && (
-            <LinearGradientAnimated
-              colors={[gradientColor, gradientColor + '00']}
-              style={[styles.extendedHeader, { opacity: opacityGradient }]}
+            <Animated.View
+              style={[styles.extendedHeader, gradientOpacityStyle]}
             >
-              {!!theme.assets?.headerBackground && (
-                <Image
-                  style={styles.headerBackground}
-                  source={{ uri: theme.assets?.headerBackground }}
-                  loading={false}
-                />
-              )}
-            </LinearGradientAnimated>
+              <LinearGradient
+                colors={[gradientColor, gradientColor + '00']}
+                style={StyleSheet.absoluteFill}
+              >
+                {!!theme.assets?.headerBackground && (
+                  <Image
+                    style={styles.headerBackground}
+                    source={{ uri: theme.assets?.headerBackground }}
+                    loading={false}
+                  />
+                )}
+              </LinearGradient>
+            </Animated.View>
           )}
         </Animated.View>
         <Animated.View
-          style={{
-            justifyContent: 'flex-end',
-            height,
-            position: 'absolute',
-            zIndex: 2,
-          }}
+          style={[
+            {
+              justifyContent: 'flex-end',
+              position: 'absolute',
+              zIndex: 2,
+            },
+            heightStyle,
+          ]}
         >
           <Animated.View
-            style={{
-              transform: [{ translateX }],
-              marginVertical: Spacing.S,
-              width: animated.current.interpolate({
-                inputRange: [0, 100],
-                outputRange: [
-                  screenWidth - SCREEN_PADDING * 2,
-                  screenWidth - leftPosition - 12 - headerRightWidth,
-                ],
-                extrapolate: 'clamp',
-              }),
-            }}
+            style={[{ marginVertical: Spacing.S }, searchTranslateStyle]}
           >
-            <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
+            <Animated.View
+              style={[
+                { borderRadius: Radius.XL },
+                searchBackgroundStyle,
+              ]}
+            >
               <InputSearch
                 {...inputSearchProps}
                 ref={inputSearchRef}
@@ -169,22 +185,26 @@ const HeaderExtendHeader: React.FC<{
         <BackgroundImageView
           useShadowHeader={useShadowHeader}
           heightHeader={heightHeader}
-          opacityBackground={opacityBackground}
+          animatedValue={sv}
           headerBackground={headerBackground}
         />
         {!!gradientColor && (
-          <LinearGradientAnimated
-            colors={[gradientColor, gradientColor + '00']}
-            style={[styles.extendedHeader, { opacity: opacityGradient }]}
+          <Animated.View
+            style={[styles.extendedHeader, gradientOpacityStyle, extendedHeightStyle]}
           >
-            {!!headerBackground && (
-              <Image
-                style={styles.headerBackground}
-                source={{ uri: headerBackground }}
-                loading={false}
-              />
-            )}
-          </LinearGradientAnimated>
+            <LinearGradient
+              colors={[gradientColor, gradientColor + '00']}
+              style={StyleSheet.absoluteFill}
+            >
+              {!!headerBackground && (
+                <Image
+                  style={styles.headerBackground}
+                  source={{ uri: headerBackground }}
+                  loading={false}
+                />
+              )}
+            </LinearGradient>
+          </Animated.View>
         )}
         <View style={{ height: heightHeader }} />
       </View>

package/Application/Components/HeaderTitle.tsx

@@ -1,11 +1,16 @@
 import React, { useContext } from 'react';
 import {
-  Animated,
   Dimensions,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { exportFontFamily, Text, useScaleSize } from '../../Text';
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
@@ -18,21 +23,45 @@ import { Image } from '../../Image';
 import { Icon } from '../../Icon';
 import { Skeleton } from '../../Skeleton';
 
+type HeaderTitleInterpolate = {
+  inputRange: number[];
+  outputRange: number[];
+};
+
+type HeaderTitleExtraProps = {
+  animatedValue?: SharedValue<number>;
+  interpolate?: HeaderTitleInterpolate;
+  tintColor?: string;
+  children?: React.ReactNode;
+};
+
 /**
  * default header title used for nav
  */
-const HeaderTitle: React.FC<any> = props => {
+const HeaderTitle: React.FC<HeaderTitleExtraProps & { [key: string]: any }> = props => {
   const context = useContext<any>(MiniAppContext);
 
   const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
-  const opacity = props.animatedValue?.interpolate(
-    props.interpolate ?? {
-      inputRange: [0, 200],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    },
-  );
+  const interpolateConfig = props.interpolate ?? {
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+  };
+  const animatedValue = props.animatedValue;
+
+  const animatedStyle = useAnimatedStyle(() => {
+    if (!animatedValue) {
+      return { opacity: 1 };
+    }
+    return {
+      opacity: interpolate(
+        animatedValue.value,
+        interpolateConfig.inputRange,
+        interpolateConfig.outputRange,
+        Extrapolation.CLAMP,
+      ),
+    };
+  });
 
   return (
     <View
@@ -57,9 +86,9 @@ const HeaderTitle: React.FC<any> = props => {
           },
           {
             fontFamily: exportFontFamily('bold', 'action_xs_bold'),
-            opacity,
             color: props.tintColor,
           },
+          animatedStyle,
         ]}
         numberOfLines={1}
       />

package/Application/Components/SearchHeader.tsx

@@ -1,13 +1,16 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
 import {
-  Animated,
   Dimensions,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import React, { useContext, useEffect, useRef } from 'react';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
@@ -28,28 +31,18 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const BACK_WIDTH = 28;
     const { width: screenWidth } = Dimensions.get('window');
 
-    const animated = useRef(new Animated.Value(0));
+    const fallback = useSharedValue(0);
+    const sv = animatedValue ?? fallback;
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
     const headerRightWidth = props?.headerRightWidth ?? 73;
 
-    useEffect(() => {
-      const listener = animatedValue?.addListener(({ value }) => {
-        animated.current.setValue(value);
-      });
-      return () => {
-        if (listener) {
-          animatedValue?.removeListener(listener);
-        }
+    const backgroundStyle = useAnimatedStyle(() => {
+      const t = Math.min(Math.max(sv.value / 100, 0), 1);
+      return {
+        backgroundColor: t === 0
+          ? theme.colors.background.surface
+          : theme.colors.background.default,
       };
-    }, [animatedValue]);
-
-    const backgroundColor = animated.current?.interpolate({
-      inputRange: [0, 100],
-      outputRange: [
-        theme.colors.background.surface,
-        theme.colors.background.default,
-      ],
-      extrapolate: 'clamp',
     });
 
     const goBack = () => {
@@ -91,7 +84,9 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
             },
           ]}
         >
-          <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
+          <Animated.View
+            style={[{ borderRadius: Radius.XL }, backgroundStyle]}
+          >
             <InputSearch
               ref={ref}
               {...props}

package/Application/types.ts

@@ -2,11 +2,11 @@ import { EventArg } from '@react-navigation/core';
 import { StackNavigationOptions } from '@react-navigation/stack';
 import React, { ReactNode } from 'react';
 import {
-  Animated,
   TouchableOpacityProps,
   ViewProps,
   ViewStyle,
 } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import { PopupNotifyProps } from '../Popup/types';
 import { InputRef, InputSearchProps } from '../Input';
 import Navigation from './Navigation';
@@ -252,7 +252,7 @@ export interface HeaderBackProps extends NavigationButtonProps {
 }
 
 export type HeaderBackgroundProps = {
-  animatedValue?: Animated.Value;
+  animatedValue?: SharedValue<number>;
   useGradient?: boolean;
   useShadowHeader?: boolean;
   backgroundColor?: string;
@@ -292,7 +292,7 @@ export type TitleJourneyProps = {
 };
 
 export interface HeaderAnimatedProps extends ViewProps {
-  animatedValue: Animated.Value;
+  animatedValue: SharedValue<number>;
   image: string;
   useScale?: boolean;
 }
@@ -336,7 +336,7 @@ export type AnimatedHeader = {
 
 export interface SearchHeaderProps extends InputSearchProps {
   ref?: React.RefObject<InputRef>;
-  animatedValue?: Animated.Value;
+  animatedValue?: SharedValue<number>;
   headerRightWidth?: 0 | 74 | 110 | number;
   leftPosition?: 12 | 48 | number;
   renderButtons?: () => ReactNode;

package/Application/utils.tsx

@@ -5,7 +5,8 @@ import {
 } from '@react-navigation/stack';
 import type { HeaderTitleProps, NavigationOptions } from './types';
 import { Colors, Spacing } from '../Consts';
-import { Animated, AppState, Platform } from 'react-native';
+import { AppState, Platform } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import {
   MiniAppContext,
   ScreenContext,
@@ -60,7 +61,7 @@ const getModalOptions = (): StackNavigationOptions => {
  */
 const getOptions = (
   params: NavigationOptions,
-  animatedValue?: Animated.Value,
+  animatedValue?: SharedValue<number>,
 ) => {
   let options: StackNavigationOptions = {};
 
@@ -131,7 +132,7 @@ const getOptions = (
 
 const exportHeaderTitle = (
   params: NavigationOptions,
-  animatedValue?: Animated.Value,
+  animatedValue?: SharedValue<number>,
 ): StackNavigationOptions => {
   if (typeof params.headerTitle === 'object') {
     return {

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>