@momo-kits/foundation 0.111.1-beta.21 → 0.111.1-beta.23

package/Application/BottomSheet.tsx

@@ -1,8 +1,6 @@
 import React, {useCallback, useContext, useEffect, useRef} from 'react';
 import {
-  Animated,
   Dimensions,
-  Easing,
   KeyboardAvoidingView,
   Modal,
   PanResponder,
@@ -19,6 +17,7 @@ import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
 import {useHeaderHeight} from '@react-navigation/stack';
+import Animated, {Easing, Extrapolate} from 'react-native-reanimated';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
@@ -40,37 +39,46 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     keyboardVerticalOffset,
   }: BottomSheetParams = props.route.params;
 
-  const pan = useRef(
-    new Animated.ValueXY({
-      y: heightDevice,
-      x: 0,
-    })
-  ).current;
-
   const customEasingOpen = Easing.bezier(0.05, 0.7, 0.1, 1);
   const customEasingClose = Easing.bezier(0.3, 0.0, 0.8, 0.15);
 
+  const translateY = useRef(new Animated.Value(heightDevice)).current;
+
+  const openAnimation = Animated.timing(translateY, {
+    toValue: 0,
+    duration: 350,
+    easing: customEasingOpen,
+  });
+
+  const closeAnimation = Animated.timing(translateY, {
+    toValue: heightDevice,
+    duration: 200,
+    easing: customEasingClose,
+  });
+
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
-      onMoveShouldSetPanResponder: (_, gestureState) => {
-        return draggable && gestureState.dy > 0;
-      },
-      onPanResponderMove: (e, gestureState) => {
-        gestureState.dy > 0 &&
-          Animated.event([null, {dy: pan.y}], {useNativeDriver: false})(
-            e,
-            gestureState
-          );
+      onMoveShouldSetPanResponder: (_, gestureState) =>
+        draggable && gestureState.dy > 0,
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          translateY.setValue(gestureState.dy);
+        }
       },
       onPanResponderRelease: (_, gestureState) => {
         if (gestureState.dy > 100) {
           action.current = 'gesture';
           onDismiss();
         } else {
-          Animated.spring(pan, {
-            toValue: {x: 0, y: 0},
-            useNativeDriver: false,
+          Animated.spring(translateY, {
+            toValue: 0,
+            damping: 20,
+            mass: 1,
+            stiffness: 100,
+            overshootClamping: false,
+            restSpeedThreshold: 0.001,
+            restDisplacementThreshold: 0.001,
           }).start();
         }
       },
@@ -90,13 +98,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
    * emit dismiss event
    */
   useEffect(() => {
-    Animated.timing(pan, {
-      toValue: {x: 0, y: 0},
-      useNativeDriver: false,
-      easing: customEasingOpen,
-      duration: 350,
-    }).start();
-
+    translateY.setValue(heightDevice);
+    openAnimation.start();
     return () => {
       props.route.params?.onDismiss?.(action.current);
     };
@@ -109,16 +112,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     if (barrierDismissible && !force) {
       return;
     }
-    setTimeout(() => {
-      callback?.();
-    }, 300);
-    Animated.timing(pan, {
-      toValue: {x: 0, y: heightDevice},
-      useNativeDriver: false,
-      easing: customEasingClose,
-      duration: 200,
-    }).start(() => {
-      navigator?.pop();
+    closeAnimation.start(() => {
+      setImmediate(() => {
+        navigator?.pop();
+        callback?.();
+      });
     });
   };
 
@@ -205,10 +203,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             style={[
               styles.overlay,
               {
-                opacity: pan.y.interpolate({
+                opacity: translateY.interpolate({
                   inputRange: [0, heightDevice],
                   outputRange: [1, 0],
-                  extrapolate: 'clamp',
+                  extrapolate: Extrapolate.CLAMP,
                 }),
               },
             ]}
@@ -217,7 +215,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
         <Animated.View
           style={{
-            transform: pan.getTranslateTransform(),
+            transform: [{translateY}],
           }}>
           {renderHeader()}
           <View style={{backgroundColor: backgroundColor}}>

package/Application/BottomTab/index.tsx

@@ -1,8 +1,8 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
-import React, {useContext, useEffect, useState} from 'react';
-import {Animated, Dimensions, Platform, StatusBar} from 'react-native';
+import React, {useContext, useEffect} from 'react';
+import {Platform, StatusBar} from 'react-native';
 import {EventArg} from '@react-navigation/core';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Colors} from '../../Consts';
@@ -17,38 +17,7 @@ import BottomTabBar from './BottomTabBar';
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
-const AnimatedTabView = (props: any, {isPressed = false}) => {
-  const widthDevice = Dimensions.get('window').width / 2;
-  const translateAnim = React.useRef(new Animated.Value(widthDevice)).current;
-
-  useEffect(() => {
-    Animated.timing(translateAnim, {
-      toValue: 0,
-      duration: 200,
-      useNativeDriver: true,
-    }).start();
-    return () => {
-      Animated.timing(translateAnim, {
-        toValue: 1,
-        duration: 200,
-        useNativeDriver: true,
-      }).start();
-    };
-  }, [isPressed]);
-
-  return (
-    <Animated.View
-      style={{
-        flex: 1,
-        backgroundColor: 'transparent',
-        transform: [{translateX: translateAnim}],
-      }}>
-      {props.children}
-    </Animated.View>
-  );
-};
-
-const TabScreen: React.FC<NavigationScreenProps> = ({route, isPressed}) => {
+const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
   let options = {};
   if (route.params?.options) {
     options = getOptions(route.params?.options);
@@ -65,9 +34,7 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route, isPressed}) => {
             options,
             initialParams: route.params?.initialParams,
           }}
-          options={{
-            ...getStackOptions(),
-          }}
+          options={{...getStackOptions()}}
         />
       </Stack.Navigator>
     );
@@ -77,21 +44,13 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route, isPressed}) => {
       <Stack.Navigator>
         <Stack.Screen
           name="Stack"
-          component={props => (
-            <AnimatedTabView isPressed={isPressed}>
-              <StackScreen {...props} />
-            </AnimatedTabView>
-          )}
+          component={StackScreen}
           initialParams={{
             screen: route.params?.screen,
             options,
             initialParams: route.params?.initialParams,
           }}
-          options={{
-            ...getStackOptions(),
-            cardStyle: {backgroundColor: 'transparent'},
-            ...route.params?.options,
-          }}
+          options={{...getStackOptions(), ...route.params?.options}}
         />
       </Stack.Navigator>
     </NavigationContainer>
@@ -109,8 +68,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
   const {theme} = useContext(ApplicationContext);
   const insets = useSafeAreaInsets();
 
-  const [isPressed, setIsPressed] = useState(false);
-
   useEffect(() => {
     navigation?.setOptions({
       headerShown: false,
@@ -126,7 +83,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
   } = {
     tabPress: e => {
       listeners?.tabPress?.(e);
-      setIsPressed(true);
     },
     focus: e => {
       StatusBar.setBarStyle('dark-content', true);
@@ -141,9 +97,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
     <Tab.Navigator
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
-      sceneContainerStyle={{
-        backgroundColor: 'transparent',
-      }}
       tabBar={props => (
         <BottomTabBar
           {...props}
@@ -168,7 +121,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
           <Tab.Screen
             key={item.name}
             name={item.name}
-            component={props => <TabScreen {...props} isPressed={isPressed} />}
+            component={TabScreen}
             initialParams={{...item, nested}}
             listeners={handler}
             options={{

package/Application/Components/BackgroundImageView.tsx

@@ -0,0 +1,122 @@
+import React, {FC, useContext} from 'react';
+import {Animated, Platform, StyleSheet} from 'react-native';
+import {Image} from '../../Image';
+import {Colors} from '../../Consts';
+import {ApplicationContext} from '@momo-kits/foundation';
+import AnimatedInterpolation = Animated.AnimatedInterpolation;
+
+type BackgroundImageViewProps = {
+  useShadowHeader: boolean;
+  headerBackground?: string;
+  heightHeader: number | string;
+  opacityBackground: AnimatedInterpolation;
+};
+
+const BackgroundImageView: FC<BackgroundImageViewProps> = ({
+  useShadowHeader = true,
+  headerBackground = null,
+  heightHeader,
+  opacityBackground,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  if (Platform.OS === 'android') {
+    return (
+      <Animated.View
+        style={[
+          useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
+          {
+            position: 'absolute',
+            width: '100%',
+            zIndex: 1,
+            height: heightHeader,
+            backgroundColor: theme.colors.background.surface,
+            opacity: opacityBackground,
+            overflow: 'hidden',
+          },
+        ]}>
+        {headerBackground && (
+          <Image
+            style={styles.headerBackground}
+            source={{uri: headerBackground}}
+            loading={false}
+          />
+        )}
+      </Animated.View>
+    );
+  }
+
+  return (
+    <>
+      <Animated.View
+        style={[
+          useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
+          {
+            position: 'absolute',
+            width: '100%',
+            zIndex: 1,
+            height: heightHeader,
+            backgroundColor: theme.colors.background.surface,
+            opacity: opacityBackground,
+          },
+        ]}
+      />
+      <Animated.View
+        style={[
+          {
+            position: 'absolute',
+            width: '100%',
+            zIndex: 1,
+            height: heightHeader,
+            opacity: opacityBackground,
+            overflow: 'hidden',
+          },
+        ]}>
+        {headerBackground && (
+          <Image
+            style={styles.headerBackground}
+            source={{uri: headerBackground}}
+            loading={false}
+          />
+        )}
+      </Animated.View>
+    </>
+  );
+};
+
+export default BackgroundImageView;
+
+const styles = StyleSheet.create({
+  headerBackground: {
+    width: '100%',
+    height: undefined,
+    position: 'absolute',
+    aspectRatio: 375 / 154,
+  },
+  dividerHeader: {
+    borderBottomWidth: 1,
+    borderColor: Colors.black_04,
+  },
+  shadowHeader: {
+    ...Platform.select({
+      ios: {
+        shadowColor: Colors.black_20,
+        shadowOffset: {
+          width: 3,
+          height: 3,
+        },
+        shadowOpacity: 0.12,
+        shadowRadius: 10,
+      },
+      android: {
+        shadowColor: Colors.black_17,
+        shadowOffset: {
+          width: 3,
+          height: 3,
+        },
+        shadowOpacity: 0.12,
+        shadowRadius: 10,
+        elevation: 10,
+      },
+    }),
+  },
+});

package/Application/Components/HeaderBackground.tsx

@@ -1,10 +1,11 @@
 import LinearGradient from 'react-native-linear-gradient';
-import {Animated, Platform, StyleSheet, View} from 'react-native';
+import {Animated, StyleSheet, View} from 'react-native';
 import React, {useContext} from 'react';
 import {HeaderBackgroundProps} from '../types';
 import {ApplicationContext} from '../index';
-import {Colors, Styles} from '../../Consts';
+import {Styles} from '../../Consts';
 import {Image} from '../../Image';
+import BackgroundImageView from './BackgroundImageView';
 
 const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
 
@@ -33,39 +34,14 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
     extrapolate: 'clamp',
   });
 
-  if (Platform.OS === 'android' && headerImage) {
-    useShadowHeader = false;
-  }
-
   return (
     <View style={Styles.flex}>
-      <Animated.View
-        style={[
-          useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
-          {
-            backgroundColor: theme.colors.background.surface,
-            opacity: opacityBackground,
-            height: '100%',
-            width: '100%',
-          },
-        ]}
+      <BackgroundImageView
+        useShadowHeader={useShadowHeader}
+        heightHeader={'100%'}
+        opacityBackground={opacityBackground}
+        headerBackground={headerImage}
       />
-      <Animated.View
-        style={{
-          position: 'absolute',
-          zIndex: 1,
-          height: '100%',
-          width: '100%',
-          overflow: 'hidden',
-        }}>
-        {theme?.assets?.headerBackground && (
-          <Image
-            style={styles.headerBackground}
-            source={{uri: theme?.assets?.headerBackground}}
-            loading={false}
-          />
-        )}
-      </Animated.View>
       <View style={styles.gradientContainer}>
         {useGradient && !!gradientColor && (
           <LinearGradientAnimated
@@ -86,29 +62,6 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
 };
 
 const styles = StyleSheet.create({
-  shadowHeader: {
-    ...Platform.select({
-      ios: {
-        shadowColor: Colors.black_20,
-        shadowOffset: {
-          width: 3,
-          height: 3,
-        },
-        shadowOpacity: 0.12,
-        shadowRadius: 10,
-      },
-      android: {
-        shadowColor: Colors.black_17,
-        shadowOffset: {
-          width: 3,
-          height: 3,
-        },
-        shadowOpacity: 0.12,
-        shadowRadius: 10,
-        elevation: 10,
-      },
-    }),
-  },
   gradientContainer: {
     width: '100%',
     height: '100%',
@@ -116,18 +69,14 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   extendedHeader: {
-    aspectRatio: 2.43,
+    aspectRatio: 375 / 154,
     position: 'absolute',
     width: '100%',
   },
   headerBackground: {
     width: '100%',
     position: 'absolute',
-    aspectRatio: 375 / 152,
-  },
-  dividerHeader: {
-    borderBottomWidth: 1,
-    borderColor: Colors.black_04,
+    aspectRatio: 375 / 154,
   },
 });
 

package/Application/Components/HeaderExtendHeader.tsx

@@ -8,6 +8,7 @@ import Navigation from '../Navigation';
 import {Colors, Radius, Spacing} from '../../Consts';
 import {Image} from '../../Image';
 import {SearchHeaderProps} from '../types';
+import BackgroundImageView from './BackgroundImageView';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
@@ -88,7 +89,7 @@ const HeaderExtendHeader: React.FC<{
     extrapolate: 'clamp',
   });
 
-  if (Platform.OS === 'android' && headerBackground) {
+  if (inputSearchProps && Platform.OS === 'android') {
     useShadowHeader = false;
   }
 
@@ -96,38 +97,12 @@ const HeaderExtendHeader: React.FC<{
     return (
       <>
         <Animated.View style={{height: height}} />
-        <Animated.View
-          style={[
-            useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
-            {
-              position: 'absolute',
-              width: '100%',
-              zIndex: 1,
-              height: heightHeader,
-              backgroundColor: theme.colors.background.surface,
-              opacity: opacityBackground,
-            },
-          ]}
+        <BackgroundImageView
+          useShadowHeader={useShadowHeader}
+          heightHeader={heightHeader}
+          opacityBackground={opacityBackground}
+          headerBackground={headerBackground}
         />
-        <Animated.View
-          style={[
-            {
-              position: 'absolute',
-              width: '100%',
-              height: heightHeader,
-              zIndex: 1,
-              overflow: 'hidden',
-            },
-          ]}>
-          {headerBackground && (
-            <Image
-              style={styles.headerBackground}
-              source={{uri: headerBackground}}
-              loading={false}
-            />
-          )}
-        </Animated.View>
-
         <Animated.View
           style={[
             styles.headerBox,
@@ -185,37 +160,12 @@ const HeaderExtendHeader: React.FC<{
   if (headerType === 'extended') {
     return (
       <>
-        <Animated.View
-          style={[
-            useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
-            {
-              position: 'absolute',
-              width: '100%',
-              zIndex: 1,
-              height: heightHeader,
-              backgroundColor: theme.colors.background.surface,
-              opacity: opacityBackground,
-            },
-          ]}
+        <BackgroundImageView
+          useShadowHeader={useShadowHeader}
+          heightHeader={heightHeader}
+          opacityBackground={opacityBackground}
+          headerBackground={headerBackground}
         />
-        <Animated.View
-          style={[
-            {
-              position: 'absolute',
-              width: '100%',
-              zIndex: 1,
-              height: heightHeader,
-              overflow: 'hidden',
-            },
-          ]}>
-          {headerBackground && (
-            <Image
-              style={styles.headerBackground}
-              source={{uri: headerBackground}}
-              loading={false}
-            />
-          )}
-        </Animated.View>
         {!!gradientColor && (
           <LinearGradientAnimated
             colors={[gradientColor, gradientColor + '00']}
@@ -254,7 +204,7 @@ const styles = StyleSheet.create({
     aspectRatio: 375 / 154,
   },
   extendedHeader: {
-    aspectRatio: 2.43,
+    aspectRatio: 375 / 154,
     position: 'absolute',
     width: '100%',
   },
@@ -271,33 +221,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     alignSelf: 'center',
   },
-  dividerHeader: {
-    borderBottomWidth: 1,
-    borderColor: Colors.black_04,
-  },
-  shadowHeader: {
-    ...Platform.select({
-      ios: {
-        shadowColor: Colors.black_20,
-        shadowOffset: {
-          width: 3,
-          height: 3,
-        },
-        shadowOpacity: 0.12,
-        shadowRadius: 10,
-      },
-      android: {
-        shadowColor: Colors.black_17,
-        shadowOffset: {
-          width: 3,
-          height: 3,
-        },
-        shadowOpacity: 0.12,
-        shadowRadius: 10,
-        elevation: 10,
-      },
-    }),
-  },
 });
 
 export {HeaderExtendHeader};

package/Application/Components/HeaderRight.tsx

@@ -92,7 +92,7 @@ const HeaderToolkitAction: React.FC<any> = ({
    */
   const checkAppIsFavorite = useCallback(
     () =>
-      navigator?.maxApi?.dispatchFunction(
+      navigator?.maxApi?.dispatchFunction?.(
         'isFavoriteApp',
         {code: context?.code},
         (result: boolean) => {
@@ -143,14 +143,15 @@ const HeaderToolkitAction: React.FC<any> = ({
    */
   const onPressShortcut = () => {
     const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+    const expected = !isFavorite;
     context?.autoTracking?.({
       ...context,
       componentName: 'IconButton',
-      componentId: 'navigation_shortcut',
+      componentId: `${expected ? 'pin' : 'unpin'}_shortcut`,
       screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
     });
     setIsLoading(true);
-    navigator?.maxApi?.dispatchFunction(
+    navigator?.maxApi?.dispatchFunction?.(
       'onToolAction',
       {
         item: {
@@ -160,7 +161,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       },
       ({success}: {success: boolean}) => {
         if (success) {
-          setIsFavorite(!isFavorite);
+          setIsFavorite(expected);
         }
       }
     );
@@ -221,7 +222,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
     });
 
-    navigator?.maxApi?.dispatchFunction(
+    navigator?.maxApi?.dispatchFunction?.(
       'showTools',
       tools,
       context,
@@ -283,7 +284,14 @@ const HeaderToolkitAction: React.FC<any> = ({
           showBadge={showBadge}
         />
       )}
-      <View style={[styles.toolkitContainer, buttonStyle]}>
+      <View
+        style={[
+          styles.toolkitContainer,
+          buttonStyle,
+          {
+            width: context.appId !== 'vn.momo.helpcenter' ? 65 : 28,
+          },
+        ]}>
         {context.appId !== 'vn.momo.helpcenter' && (
           <>
             <TouchableOpacity
@@ -367,7 +375,6 @@ const styles = StyleSheet.create({
     paddingRight: Spacing.M,
   },
   toolkitContainer: {
-    width: 65,
     height: 28,
     borderRadius: 14,
     justifyContent: 'center',

package/Application/Components/HeaderTitle.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import {ApplicationContext, MiniAppContext} from '../index';
 import {exportFontFamily, scaleSize, Text} from '../../Text';
-import {Colors, Spacing, Radius, Styles} from '../../Consts';
+import {Colors, Radius, Spacing, Styles} from '../../Consts';
 import {TitleJourneyProps, TitleLocationProps, TitleUserProps} from '../types';
 import {Image} from '../../Image';
 import {Icon} from '../../Icon';
@@ -79,7 +79,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
   isLoading,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const maxWidth = icons?.length === 2 ? '73%' : '100%';
+  const maxWidth = Dimensions.get('window').width - scaleSize(172);
   const getShortName = (name: string) => {
     const words = name.split(' ');
     const lastTwoWords = words.slice(-2);
@@ -246,20 +246,20 @@ const TitleUser: React.FC<TitleUserProps> = ({
   };
 
   const renderVerifyIcon = () => {
-    const renderIcons = () => {
-      if (icons && icons.length > 0) {
-        return icons.map(icon => (
-          <Image
-            source={{
-              uri: icon,
-            }}
-            style={styles.verifiedIcon}
-          />
-        ));
-      }
-    };
-
-    return <View style={Styles.row}>{renderIcons()}</View>;
+    if (icons && icons.length > 0) {
+      return (
+        <View style={[Styles.row]}>
+          {icons.map(icon => (
+            <Image
+              source={{
+                uri: icon,
+              }}
+              style={styles.verifiedIcon}
+            />
+          ))}
+        </View>
+      );
+    }
   };
 
   const renderShimmer = () => {
@@ -295,19 +295,21 @@ const TitleUser: React.FC<TitleUserProps> = ({
   if (isLoading) {
     return renderShimmer();
   }
+
   return (
     <TouchableOpacity
       style={styles.headerTitleContainer}
       onPress={onPress}
       disabled={onPress === undefined}>
-      <View style={[Styles.row, Styles.flex]}>
+      <View
+        style={[Styles.row, {maxWidth: maxWidth - (icons?.length ?? 0) * 16}]}>
         <View>
           {renderImage()}
           {!!dotColor && (
             <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
           )}
         </View>
-        <View style={[Styles.flex, {marginLeft: 6, maxWidth: maxWidth}]}>
+        <View style={[Styles.flex, {marginLeft: 6}]}>
           <View style={Styles.row}>
             <Text
               typography="action_xs_bold"
@@ -493,7 +495,7 @@ const styles = StyleSheet.create({
   },
   headerTitleContainer: {
     justifyContent: 'center',
-    maxWidth: Dimensions.get('window').width - 190,
+    maxWidth: Dimensions.get('window').width - scaleSize(172),
   },
   circle: {
     width: 32,

package/Application/NavigationContainer.tsx

@@ -105,7 +105,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     });
   };
 
-  const headerBackground = config?.headerBar || theme.assets?.headerBackground;
+  const headerBackground = theme.assets?.headerBackground || config?.headerBar;
   const headerGradient = config?.headerGradient || theme.colors?.gradient;
 
   navigator.current.setCurrentContext = setCurrentContext;

package/Application/utils.tsx

@@ -26,32 +26,6 @@ const getStackOptions = (): StackNavigationOptions => {
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
     gestureEnabled: false,
-    cardStyleInterpolator: ({current: {progress}, layouts}) => ({
-      cardStyle: {
-        transform: [
-          {
-            translateX: progress.interpolate({
-              inputRange: [0, 1],
-              outputRange: [layouts.screen.width, 0],
-            }),
-          },
-        ],
-      },
-    }),
-    transitionSpec: {
-      open: {
-        animation: 'timing',
-        config: {
-          duration: 300,
-        },
-      },
-      close: {
-        animation: 'timing',
-        config: {
-          duration: 300,
-        },
-      },
-    },
   };
 };
 

package/Input/Input.tsx

@@ -218,6 +218,7 @@ const Input = forwardRef(
                 },
                 secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
               ]}
+              allowFontScaling={false}
               textBreakStrategy="highQuality"
               value={value}
               onChangeText={_onChangeText}

package/Input/InputMoney.tsx

@@ -150,6 +150,7 @@ const InputMoney = forwardRef(
               editable={!disabled}
               ref={inputRef}
               keyboardType={'number-pad'}
+              allowFontScaling={false}
               style={[
                 styles.moneyInput,
                 {

package/Input/InputOTP.tsx

@@ -215,6 +215,7 @@ const InputOTP = forwardRef(
               value={value}
               onChangeText={_onChangeText}
               keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
+              allowFontScaling={false}
               onFocus={onFocusInput}
               onBlur={onBlurInput}
               style={styles.otpRealInput}

package/Input/InputSearch.tsx

@@ -107,6 +107,7 @@ const TextTyping: FC<any> = ({
       autoCorrect={false}
       pointerEvents={'none'}
       numberOfLines={1}
+      allowFontScaling={false}
     />
   );
 };
@@ -203,6 +204,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         {...props}
         accessibilityLabel={accessibilityLabel}
         textAlignVertical="center"
+        allowFontScaling={false}
         ref={inputRef}
         style={[
           styles.searchInput,

package/Input/InputTextArea.tsx

@@ -133,6 +133,7 @@ const InputTextArea = forwardRef(
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
+                allowFontScaling={false}
                 style={[
                   styles.textArea,
                   {

package/Input/TextTyping.tsx

@@ -95,6 +95,7 @@ const TextTyping: FC<TextTypingProps> = ({
       autoCorrect={false}
       pointerEvents={'none'}
       numberOfLines={1}
+      allowFontScaling={false}
     />
   );
 };

package/Text/index.tsx

@@ -156,6 +156,7 @@ const Text: React.FC<TextProps> = ({
     <RNText
       {...rest}
       {...setAutomationID(rest.accessibilityLabel)}
+      allowFontScaling={false}
       style={[
         style,
         textStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.111.1-beta.21",
+  "version": "0.111.1-beta.23",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},
@@ -9,15 +9,16 @@
   ],
   "dependencies": {
     "@gorhom/bottom-sheet": "2.4.1",
+    "react-native-modalize": "2.1.1",
     "react-native-safe-area-context": "3.1.4",
     "react-native-linear-gradient": "2.8.3",
     "react-native-gesture-handler": "1.10.3",
-    "react-native-modalize": "2.1.1",
     "react-native-fast-image": "8.1.5",
     "@react-navigation/bottom-tabs": "https://gitlab.mservice.com.vn/momo-platform/react-native-bottom-tabs.git",
     "@react-navigation/core": "5.16.1",
     "@react-navigation/native": "5.9.8",
     "@react-navigation/routers": "5.7.4",
+    "react-native-reanimated": "git+https://gitlab.mservice.com.vn/momo-platform/react-native-reanimated.git#v1.13.4_gradle_7",
     "lottie-react-native": "git+https://gitlab.mservice.com.vn/momo-platform/momo-lottie-react-native.git",
     "@react-navigation/stack": "https://gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
   },