@momo-kits/foundation 0.160.1-beta.6 → 0.160.1-beta.7

package/Application/BottomSheet.tsx

@@ -20,7 +20,7 @@ import { Icon } from '../Icon';
 import { useHeaderHeight } from '@react-navigation/elements';
 import Animated, {
   Easing,
-  Extrapolate,
+  Extrapolation,
   interpolate,
   runOnJS,
   useAnimatedStyle,
@@ -39,7 +39,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const heightHeader = useHeaderHeight();
   const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const {
     screen: Screen,
@@ -242,7 +242,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         translateY.value,
         [0, heightDevice],
         [1, 0],
-        Extrapolate.CLAMP,
+        Extrapolation.CLAMP,
       ),
     };
   });

package/Application/BottomTab/BottomTabBar.tsx

@@ -2,13 +2,17 @@ import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { CommonActions, Route } from '@react-navigation/native';
 import React, { useCallback, useContext } from 'react';
 import {
-  Animated,
   Platform,
   StyleSheet,
   TouchableOpacity,
   useWindowDimensions,
   View,
 } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Colors, Radius, Styles } from '../../Consts';
 import { Icon } from '../../Icon';
@@ -57,13 +61,18 @@ export default function BottomTabBar({
   const useFloating = floatingButton && state.routes.length % 2 === 0;
   const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
   // const buildLink = useLinkBuilder();
-  const indicatorAnimated = React.useRef(new Animated.Value(0)).current;
+  const indicatorAnimated = useSharedValue(0);
   const insets = useSafeAreaInsets();
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: itemWidth,
+    transform: [{ translateX: indicatorAnimated.value }],
+  }));
   const paddingBottom = getPaddingBottom(insets);
   const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
 
   const context = useContext<any>(MiniAppContext);
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   /**
    * render tab item
@@ -199,11 +208,7 @@ export default function BottomTabBar({
     if (useFloating && index > (state.routes.length - 1) / 2) {
       index += 1;
     }
-    Animated.timing(indicatorAnimated, {
-      toValue: itemWidth * index,
-      useNativeDriver: true,
-      duration: 200,
-    }).start();
+    indicatorAnimated.value = withTiming(itemWidth * index, { duration: 200 });
   }, [
     state.index,
     itemWidth,
@@ -232,7 +237,7 @@ export default function BottomTabBar({
   };
 
   return (
-    <Animated.View
+    <View
       style={[
         floatingButton ? styles.tabBarFloatingButton : styles.tabBar,
         {
@@ -250,12 +255,7 @@ export default function BottomTabBar({
       <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
         {useFloating && floatingButton?.container}
         <Animated.View
-          style={{
-            width: itemWidth,
-            position: 'absolute',
-            top: 0,
-            transform: [{ translateX: indicatorAnimated }],
-          }}
+          style={[{ position: 'absolute', top: 0 }, indicatorStyle]}
         >
           <View
             style={[
@@ -266,7 +266,7 @@ export default function BottomTabBar({
         </Animated.View>
         {renderTabBar()}
       </View>
-    </Animated.View>
+    </View>
   );
 }
 
@@ -299,7 +299,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     top: -2,
-    bottom: Platform.OS === 'ios' ? -6 : 4,
+    bottom: Platform.OS === 'ios' ? -6 : 4
   },
   floatingContent: {
     alignItems: 'center',

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -61,7 +61,7 @@ const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
   allowFontScaling,
 }) => {
   const context = useContext<any>(MiniAppContext);
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   const renderIcon = () => {
     if (icon === undefined) {

package/Application/BottomTab/index.tsx

@@ -5,16 +5,20 @@ import {
   useFocusEffect,
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
+import React, { useContext, useEffect, useLayoutEffect } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
-  Animated,
   Platform,
   StatusBar,
   StyleSheet,
   useWindowDimensions,
   View,
 } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { Colors } from '../../Consts';
 import { Icon } from '../../Icon';
 import { exportFontFamily, Text } from '../../Text';
@@ -35,11 +39,16 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
-  const opacity = useRef(new Animated.Value(opacityValue)).current;
-  const scale = useRef(new Animated.Value(scaleValue)).current;
+  const opacity = useSharedValue(opacityValue);
+  const scale = useSharedValue(scaleValue);
   const screenName = screen?.name || screen?.type?.name || 'Invalid';
   const { isBackgroundToForeground } = useAppState();
 
+  const tabAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ scale: scale.value }],
+  }));
+
   const onScreenNavigated = (pre: string, current: string) => {
     if (!isBackgroundToForeground) {
       const data: any = {
@@ -69,18 +78,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   useFocusEffect(
     React.useCallback(
       () => {
-        Animated.parallel([
-          Animated.timing(opacity, {
-            toValue: 1,
-            duration: 200,
-            useNativeDriver: true,
-          }),
-          Animated.timing(scale, {
-            toValue: 1,
-            duration: 200,
-            useNativeDriver: true,
-          }),
-        ]).start();
+        opacity.value = withTiming(1, { duration: 200 });
+        scale.value = withTiming(1, { duration: 200 });
 
         setTimeout(() => {
           navigator?.maxApi?.getDataObserver?.(
@@ -96,18 +95,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
         return () => {
           if (navigation.getState().index !== route?.params.index) {
-            Animated.parallel([
-              Animated.timing(opacity, {
-                toValue: opacityValue,
-                duration: 200,
-                useNativeDriver: true,
-              }),
-              Animated.timing(scale, {
-                toValue: scaleValue,
-                duration: 200,
-                useNativeDriver: true,
-              }),
-            ]).start();
+            opacity.value = withTiming(opacityValue, { duration: 200 });
+            scale.value = withTiming(scaleValue, { duration: 200 });
           }
         };
       },
@@ -147,15 +136,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
 
   if (nested) {
     return (
-      <Animated.View
-        style={[
-          styles.container,
-          {
-            opacity,
-            transform: [{ scale }],
-          },
-        ]}
-      >
+      <Animated.View style={[styles.container, tabAnimatedStyle]}>
         <Stack.Navigator
           screenOptions={{
             headerStyle: {
@@ -228,10 +209,15 @@ const BottomTab: React.FC<BottomTabProps> = ({
   const dimensions = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
-  const indicatorAnimated = useRef(new Animated.Value(0));
-  const activeIndex = useRef(initialIndex > 0 ? initialIndex : 0);
+  const indicatorAnimated = useSharedValue(0);
+  const activeIndex = React.useRef(initialIndex > 0 ? initialIndex : 0);
   const itemWidth = dimensions.width / tabs.length;
 
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: itemWidth,
+    transform: [{ translateX: indicatorAnimated.value }],
+  }));
+
   useLayoutEffect(() => {
     navigation?.setOptions({
       headerShown: false,
@@ -241,20 +227,16 @@ const BottomTab: React.FC<BottomTabProps> = ({
   }, [navigation]);
 
   useEffect(() => {
-    Animated.timing(indicatorAnimated.current, {
-      toValue: itemWidth * activeIndex.current,
-      useNativeDriver: true,
+    indicatorAnimated.value = withTiming(itemWidth * activeIndex.current, {
       duration: 200,
-    }).start();
-  }, [itemWidth]);
+    });
+  }, [itemWidth, indicatorAnimated]);
 
   const onFocus = (e: any) => {
     activeIndex.current = tabs.findIndex(i => e.target.includes(i.name));
-    Animated.timing(indicatorAnimated.current, {
-      toValue: itemWidth * activeIndex.current,
-      useNativeDriver: true,
+    indicatorAnimated.value = withTiming(itemWidth * activeIndex.current, {
       duration: 200,
-    }).start();
+    });
   };
 
   const handler: {
@@ -294,13 +276,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             ]}
           >
             <Animated.View
-              style={[
-                styles.indicatorContainer,
-                {
-                  width: itemWidth,
-                  transform: [{ translateX: indicatorAnimated.current }],
-                },
-              ]}
+              style={[styles.indicatorContainer, indicatorStyle]}
             >
               <View
                 style={[

package/Application/Components/BackgroundImageView.tsx

@@ -1,5 +1,11 @@
 import React, { FC, useContext } from 'react';
-import { Animated, Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
 import { ApplicationContext } from '../../Context';
@@ -8,16 +14,26 @@ type BackgroundImageViewProps = {
   useShadowHeader: boolean;
   headerBackground?: string;
   heightHeader: number | `${number}%`;
-  opacityBackground: Animated.AnimatedInterpolation<any>;
+  animatedValue: SharedValue<number>;
 };
 
 const BackgroundImageView: FC<BackgroundImageViewProps> = ({
   useShadowHeader = true,
   headerBackground = null,
   heightHeader,
-  opacityBackground,
+  animatedValue,
 }) => {
   const { theme } = useContext(ApplicationContext);
+
+  const opacityStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      animatedValue.value,
+      [0, 52],
+      [0, 1],
+      Extrapolation.CLAMP,
+    ),
+  }));
+
   if (Platform.OS === 'android') {
     return (
       <Animated.View
@@ -27,8 +43,8 @@ const BackgroundImageView: FC<BackgroundImageViewProps> = ({
           {
             height: heightHeader,
             backgroundColor: theme.colors.background.surface,
-            opacity: opacityBackground,
           },
+          opacityStyle,
         ]}
       >
         {headerBackground && (
@@ -51,8 +67,8 @@ const BackgroundImageView: FC<BackgroundImageViewProps> = ({
           {
             height: heightHeader,
             backgroundColor: theme.colors.background.surface,
-            opacity: opacityBackground,
           },
+          opacityStyle,
         ]}
       />
       <Animated.View
@@ -60,8 +76,8 @@ const BackgroundImageView: FC<BackgroundImageViewProps> = ({
           styles.hidden,
           {
             height: heightHeader,
-            opacity: opacityBackground,
           },
+          opacityStyle,
         ]}
       >
         {headerBackground && (

package/Application/Components/HeaderAnimated.tsx

@@ -1,46 +1,49 @@
-import { Animated, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 import { type HeaderAnimatedProps } from '../types';
 import React from 'react';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
 
-/**
- * default header banner for header animated
- */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
   useScale = true,
   children,
 }) => {
-  const scale = useScale
-    ? animatedValue.interpolate({
-        inputRange: [-300, 0, 300],
-        outputRange: [4, 1, 1],
-        extrapolate: 'clamp',
-      })
-    : 1;
-  const opacity = animatedValue.interpolate({
-    inputRange: [0, 150, 300],
-    outputRange: [1, 0.5, 0],
-    extrapolate: 'clamp',
-  });
-  const translateY = animatedValue.interpolate({
-    inputRange: [-300, 0],
-    outputRange: [-80, -2],
-    extrapolate: 'clamp',
+  const animatedStyle = useAnimatedStyle(() => {
+    const scale = useScale
+      ? interpolate(
+          animatedValue.value,
+          [-300, 0, 300],
+          [4, 1, 1],
+          Extrapolation.CLAMP,
+        )
+      : 1;
+    const opacity = interpolate(
+      animatedValue.value,
+      [0, 150, 300],
+      [1, 0.5, 0],
+      Extrapolation.CLAMP,
+    );
+    const translateY = interpolate(
+      animatedValue.value,
+      [-300, 0],
+      [-80, -2],
+      Extrapolation.CLAMP,
+    );
+    return {
+      opacity,
+      transform: [{ scale }, { translateY }],
+    };
   });
 
   return (
-    <Animated.View
-      style={[
-        styles.container,
-        {
-          opacity: opacity,
-          transform: [{ scale }, { translateY }],
-        },
-      ]}
-    >
+    <Animated.View style={[styles.container, animatedStyle]}>
       {children ?? (
         <Image
           source={{

package/Application/Components/HeaderBackground.tsx

@@ -1,19 +1,15 @@
 import LinearGradient from 'react-native-linear-gradient';
-import { Animated, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import React, { useContext } from 'react';
+import Animated, { useSharedValue } from 'react-native-reanimated';
 import { HeaderBackgroundProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Colors, Styles } from '../../Consts';
 import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';
 
-const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
-
-/**
- * header background for default
- */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
-  animatedValue = new Animated.Value(0),
+  animatedValue,
   useGradient = true,
   useShadowHeader = true,
   gradientColor: customGradientColor,
@@ -23,37 +19,35 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   const context = useContext<any>(MiniAppContext);
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerImage = headerBackground ?? theme.assets?.headerBackground;
+  const fallback = useSharedValue(0);
+  const sv = animatedValue ?? fallback;
 
-  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
-
-  const opacityBackground = animatedValue?.interpolate({
-    inputRange: [0, 52],
-    outputRange: [0, 1],
-    extrapolate: 'clamp',
-  });
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   return (
     <View style={[Styles.flex, showBaseLineDebug && styles.debugBaseLine]}>
       <BackgroundImageView
         useShadowHeader={useShadowHeader}
         heightHeader={'100%'}
-        opacityBackground={opacityBackground}
+        animatedValue={sv}
         headerBackground={headerImage}
       />
       <View style={styles.gradientContainer}>
         {useGradient && !!gradientColor && (
-          <LinearGradientAnimated
-            colors={[gradientColor, gradientColor + '00']}
-            style={styles.extendedHeader}
-          >
-            {!!headerImage && (
-              <Image
-                style={styles.headerBackground}
-                source={{ uri: headerImage }}
-                loading={false}
-              />
-            )}
-          </LinearGradientAnimated>
+          <Animated.View style={styles.extendedHeader}>
+            <LinearGradient
+              colors={[gradientColor, gradientColor + '00']}
+              style={StyleSheet.absoluteFill}
+            >
+              {!!headerImage && (
+                <Image
+                  style={styles.headerBackground}
+                  source={{ uri: headerImage }}
+                  loading={false}
+                />
+              )}
+            </LinearGradient>
+          </Animated.View>
         )}
       </View>
     </View>