@momo-kits/foundation 0.160.1-beta.8 → 0.161.1-beta.1

package/Application/BottomSheet.tsx

@@ -20,7 +20,7 @@ import { Icon } from '../Icon';
 import { useHeaderHeight } from '@react-navigation/elements';
 import Animated, {
   Easing,
-  Extrapolation,
+  Extrapolate,
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const {
     screen: Screen,
@@ -242,7 +242,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         translateY.value,
         [0, heightDevice],
         [1, 0],
-        Extrapolation.CLAMP,
+        Extrapolate.CLAMP,
       ),
     };
   });

package/Application/BottomTab/BottomTabBar.tsx

@@ -2,17 +2,13 @@ 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';
@@ -61,18 +57,13 @@ 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 = useSharedValue(0);
+  const indicatorAnimated = React.useRef(new Animated.Value(0)).current;
   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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   /**
    * render tab item
@@ -208,7 +199,11 @@ export default function BottomTabBar({
     if (useFloating && index > (state.routes.length - 1) / 2) {
       index += 1;
     }
-    indicatorAnimated.value = withTiming(itemWidth * index, { duration: 200 });
+    Animated.timing(indicatorAnimated, {
+      toValue: itemWidth * index,
+      useNativeDriver: true,
+      duration: 200,
+    }).start();
   }, [
     state.index,
     itemWidth,
@@ -237,7 +232,7 @@ export default function BottomTabBar({
   };
 
   return (
-    <View
+    <Animated.View
       style={[
         floatingButton ? styles.tabBarFloatingButton : styles.tabBar,
         {
@@ -255,7 +250,12 @@ export default function BottomTabBar({
       <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
         {useFloating && floatingButton?.container}
         <Animated.View
-          style={[{ position: 'absolute', top: 0 }, indicatorStyle]}
+          style={{
+            width: itemWidth,
+            position: 'absolute',
+            top: 0,
+            transform: [{ translateX: indicatorAnimated }],
+          }}
         >
           <View
             style={[
@@ -266,7 +266,7 @@ export default function BottomTabBar({
         </Animated.View>
         {renderTabBar()}
       </View>
-    </View>
+    </Animated.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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
 
   const renderIcon = () => {
     if (icon === undefined) {

package/Application/BottomTab/index.tsx

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

package/Application/Components/BackgroundImageView.tsx

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

package/Application/Components/HeaderAnimated.tsx

@@ -1,49 +1,46 @@
-import { StyleSheet } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import { Animated, StyleSheet } from 'react-native';
 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 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 }],
-    };
+  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',
   });
 
   return (
-    <Animated.View style={[styles.container, animatedStyle]}>
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          opacity: opacity,
+          transform: [{ scale }, { translateY }],
+        },
+      ]}
+    >
       {children ?? (
         <Image
           source={{

package/Application/Components/HeaderBackground.tsx

@@ -1,15 +1,19 @@
 import LinearGradient from 'react-native-linear-gradient';
-import { StyleSheet, View } from 'react-native';
+import { Animated, 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,
+  animatedValue = new Animated.Value(0),
   useGradient = true,
   useShadowHeader = true,
   gradientColor: customGradientColor,
@@ -19,35 +23,37 @@ 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?.features?.showBaseLineDebug ?? false;
+  const showBaseLineDebug = context?.designSystemConfig?.isBaselineEnabled;
+
+  const opacityBackground = animatedValue?.interpolate({
+    inputRange: [0, 52],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
 
   return (
     <View style={[Styles.flex, showBaseLineDebug && styles.debugBaseLine]}>
       <BackgroundImageView
         useShadowHeader={useShadowHeader}
         heightHeader={'100%'}
-        animatedValue={sv}
+        opacityBackground={opacityBackground}
         headerBackground={headerImage}
       />
       <View style={styles.gradientContainer}>
         {useGradient && !!gradientColor && (
-          <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>
+          <LinearGradientAnimated
+            colors={[gradientColor, gradientColor + '00']}
+            style={styles.extendedHeader}
+          >
+            {!!headerImage && (
+              <Image
+                style={styles.headerBackground}
+                source={{ uri: headerImage }}
+                loading={false}
+              />
+            )}
+          </LinearGradientAnimated>
         )}
       </View>
     </View>