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

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/Layout/FloatingButton.tsx

@@ -1,17 +1,18 @@
+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,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize } from '../Text';
@@ -23,7 +24,7 @@ export interface FloatingButtonProps {
   icon?: string;
   iconColor?: string;
   size?: 'small' | 'large';
-  animatedValue?: Animated.Value;
+  animatedValue?: SharedValue<number>;
   bottom?: number;
   renderComponent?: () => React.ReactNode;
 }
@@ -42,68 +43,67 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const { theme } = useContext(ApplicationContext);
   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(
+    () => animatedValue?.value ?? 0,
+    (value) => {
+      'worklet';
+      if (!label || !animatedValue) 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, animatedValue, 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 +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
@@ -156,9 +156,9 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
               {
                 fontSize: scaledFontSize,
                 lineHeight: scaledLineHeight,
-                opacity: opacityAnimated,
                 color: 'white',
               },
+              labelStyle,
             ]}
             numberOfLines={1}
           >

package/Layout/Screen.tsx

@@ -12,7 +12,6 @@ import React, {
   useRef,
 } from 'react';
 import {
-  Animated,
   KeyboardAvoidingView,
   NativeScrollEvent,
   NativeSyntheticEvent,
@@ -25,6 +24,13 @@ import {
   View,
   ViewProps,
 } from 'react-native';
+import Animated, {
+  runOnJS,
+  useAnimatedScrollHandler,
+  useSharedValue,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ApplicationContext, ScreenContext } from '../Context';
 import Navigation from '../Application/Navigation';
@@ -138,7 +144,7 @@ export interface ScreenProps extends ViewProps {
   /**
    * Optional. Animated value for header.
    */
-  animatedValue?: Animated.Value;
+  animatedValue?: SharedValue<number>;
 
   /**
    * Optional. If `true`, use shadow header.
@@ -195,18 +201,18 @@ const Screen = forwardRef(
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
-    const animatedValue = useRef<Animated.Value>(
-      customAnimatedValue || new Animated.Value(0),
-    );
+    const internalAnimatedValue = useSharedValue(0);
+    const animatedValue = customAnimatedValue ?? internalAnimatedValue;
     const currentTint = useRef<string | undefined>(undefined);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';
 
-    let handleScroll;
+    let handleScroll: any;
     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 +254,8 @@ const Screen = forwardRef(
                     interpolate={{
                       inputRange: [0, 50],
                       outputRange: [1, 0],
-                      extrapolate: 'clamp',
                     }}
-                    animatedValue={animatedValue.current}
+                    animatedValue={animatedValue}
                   />
                 ),
               };
@@ -265,7 +270,7 @@ const Screen = forwardRef(
               headerBackground: (props: any) => (
                 <HeaderBackground
                   {...props}
-                  animatedValue={animatedValue.current}
+                  animatedValue={animatedValue}
                   useShadowHeader={useShadowHeader}
                   headerBackground={headerBackground}
                   gradientColor={gradientColor}
@@ -284,9 +289,8 @@ const Screen = forwardRef(
                     interpolate={{
                       inputRange: [0, 50],
                       outputRange: [1, 0],
-                      extrapolate: 'clamp',
                     }}
-                    animatedValue={animatedValue.current}
+                    animatedValue={animatedValue}
                   />
                 ),
               };
@@ -321,7 +325,7 @@ const Screen = forwardRef(
           headerBackground: (props: any) => (
             <HeaderBackground
               {...props}
-              animatedValue={animatedValue.current}
+              animatedValue={animatedValue}
               useGradient={false}
               useShadowHeader={useShadowHeader}
               headerBackground={headerBackground}
@@ -359,9 +363,8 @@ const Screen = forwardRef(
             interpolate={{
               inputRange: [0, 50],
               outputRange: [1, 0],
-              extrapolate: 'clamp',
             }}
-            animatedValue={animatedValue.current}
+            animatedValue={animatedValue}
           />
         ),
       };
@@ -390,7 +393,7 @@ const Screen = forwardRef(
         headerLeft: (props: any) =>
           params?.hiddenBack ? null : <HeaderLeft {...props} />,
         headerTitle: () => (
-          <SearchHeader {...params} animatedValue={animatedValue.current} />
+          <SearchHeader {...params} animatedValue={animatedValue} />
         ),
       };
 
@@ -441,45 +444,51 @@ const Screen = forwardRef(
       });
     });
 
+    const onTintColorChange = useCallback(
+      (offsetY: number) => {
+        if (!animatedHeader) return;
+        let color = animatedHeader?.headerTintColor ?? Colors.black_17;
+        if (offsetY > 50) {
+          color = Colors.black_17;
+        }
+        if (color !== currentTint.current) {
+          currentTint.current = color;
+          navigation?.setOptions({
+            headerTintColor: color,
+          });
+          let barStyle: StatusBarStyle = 'dark-content';
+          if (currentTint.current === Colors.black_01) {
+            barStyle = 'light-content';
+          }
+          StatusBar.setBarStyle(barStyle, true);
+        }
+      },
+      [animatedHeader, navigation],
+    );
+
+    const emitOnScroll = useCallback(
+      (offsetY: number) => {
+        scrollViewProps?.onScroll?.({
+          nativeEvent: { contentOffset: { x: 0, y: offsetY } },
+        } as NativeSyntheticEvent<NativeScrollEvent>);
+      },
+      [scrollViewProps],
+    );
+
+    const scrollHandler = useAnimatedScrollHandler({
+      onScroll: (event) => {
+        animatedValue.value = event.contentOffset.y;
+        runOnJS(emitOnScroll)(event.contentOffset.y);
+        runOnJS(onTintColorChange)(event.contentOffset.y);
+      },
+    });
+
     /**
      * animated when use scroll && animated value
      */
     if (scrollable) {
       Component = Animated.ScrollView;
-      handleScroll = Animated.event(
-        [
-          {
-            nativeEvent: {
-              contentOffset: { y: animatedValue.current as Animated.Value },
-            },
-          },
-        ],
-        {
-          useNativeDriver: true,
-          listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-            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;
-              }
-              if (color !== currentTint.current) {
-                currentTint.current = color;
-                navigation?.setOptions({
-                  headerTintColor: color,
-                });
-
-                let barStyle: StatusBarStyle = 'dark-content';
-                if (currentTint.current === Colors.black_01) {
-                  barStyle = 'light-content';
-                }
-                StatusBar.setBarStyle(barStyle, true);
-              }
-            }
-          },
-        },
-      );
+      handleScroll = scrollHandler;
     }
 
     /**
@@ -489,11 +498,7 @@ const Screen = forwardRef(
     const handleScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
       const offsetY = e.nativeEvent.contentOffset.y;
       if (inputSearchProps && offsetY < 100 && offsetY > 0) {
-        Animated.timing(animatedValue.current, {
-          toValue: 0,
-          useNativeDriver: true,
-          duration: 300,
-        }).start();
+        animatedValue.value = withTiming(0, { duration: 300 });
         ref?.scrollTo?.({ y: 0, animated: true });
       }
       scrollViewProps?.onScrollEndDrag?.(e);
@@ -509,7 +514,7 @@ const Screen = forwardRef(
             style={[styles.screenBanner, { maxHeight: 210 + layoutOffset }]}
           >
             {animatedHeader?.component({
-              animatedValue: animatedValue.current,
+              animatedValue: animatedValue,
             })}
           </View>
         );
@@ -576,7 +581,7 @@ const Screen = forwardRef(
           headerType={headerType}
           heightHeader={heightHeader}
           headerRightWidth={headerRightWidth}
-          animatedValue={animatedValue.current}
+          animatedValue={animatedValue}
           inputSearchProps={inputSearchProps}
           navigation={navigation}
           inputSearchRef={inputSearchRef}
@@ -614,9 +619,9 @@ const Screen = forwardRef(
             <View>
               <FloatingButton
                 {...floatingButtonProps}
-                animatedValue={animatedValue.current}
+                animatedValue={animatedValue}
                 bottom={
-                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
+                  Footer || isTab ? 12 : bottomInset + Spacing.S
                 }
               />
             </View>
@@ -627,7 +632,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>