@momo-kits/foundation 0.161.2-beta.7 → 0.161.2-beta.8

package/Application/Components/HeaderExtendHeader.tsx

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

package/Application/Components/HeaderTitle.tsx

@@ -1,16 +1,11 @@
 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';
@@ -23,45 +18,21 @@ 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<HeaderTitleExtraProps & { [key: string]: any }> = props => {
+const HeaderTitle: React.FC<any> = props => {
   const context = useContext<any>(MiniAppContext);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  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,
-      ),
-    };
-  });
+  const opacity = props.animatedValue?.interpolate(
+    props.interpolate ?? {
+      inputRange: [0, 200],
+      outputRange: [0, 1],
+      extrapolate: 'clamp',
+    },
+  );
 
   return (
     <View
@@ -86,9 +57,9 @@ const HeaderTitle: React.FC<HeaderTitleExtraProps & { [key: string]: any }> = pr
           },
           {
             fontFamily: exportFontFamily('bold', 'action_xs_bold'),
+            opacity,
             color: props.tintColor,
           },
-          animatedStyle,
         ]}
         numberOfLines={1}
       />

package/Application/Components/SearchHeader.tsx

@@ -1,16 +1,13 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
 import {
+  Animated,
   Dimensions,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
@@ -31,18 +28,28 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const BACK_WIDTH = 28;
     const { width: screenWidth } = Dimensions.get('window');
 
-    const fallback = useSharedValue(0);
-    const sv = animatedValue ?? fallback;
+    const animated = useRef(new Animated.Value(0));
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
     const headerRightWidth = props?.headerRightWidth ?? 73;
 
-    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,
+    useEffect(() => {
+      const listener = animatedValue?.addListener(({ value }) => {
+        animated.current.setValue(value);
+      });
+      return () => {
+        if (listener) {
+          animatedValue?.removeListener(listener);
+        }
       };
+    }, [animatedValue]);
+
+    const backgroundColor = animated.current?.interpolate({
+      inputRange: [0, 100],
+      outputRange: [
+        theme.colors.background.surface,
+        theme.colors.background.default,
+      ],
+      extrapolate: 'clamp',
     });
 
     const goBack = () => {
@@ -84,9 +91,7 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
             },
           ]}
         >
-          <Animated.View
-            style={[{ borderRadius: Radius.XL }, backgroundStyle]}
-          >
+          <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
             <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';
@@ -258,7 +258,7 @@ export interface HeaderBackProps extends NavigationButtonProps {
 }
 
 export type HeaderBackgroundProps = {
-  animatedValue?: SharedValue<number>;
+  animatedValue?: Animated.Value;
   useGradient?: boolean;
   useShadowHeader?: boolean;
   backgroundColor?: string;
@@ -298,7 +298,7 @@ export type TitleJourneyProps = {
 };
 
 export interface HeaderAnimatedProps extends ViewProps {
-  animatedValue: SharedValue<number>;
+  animatedValue: Animated.Value;
   image: string;
   useScale?: boolean;
 }
@@ -342,7 +342,7 @@ export type AnimatedHeader = {
 
 export interface SearchHeaderProps extends InputSearchProps {
   ref?: React.RefObject<InputRef>;
-  animatedValue?: SharedValue<number>;
+  animatedValue?: Animated.Value;
   headerRightWidth?: 0 | 74 | 110 | number;
   leftPosition?: 12 | 48 | number;
   renderButtons?: () => ReactNode;

package/Application/utils.tsx

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

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>