@momo-kits/foundation 0.110.2-beta.3 → 0.110.3

package/Application/BottomSheet.tsx

@@ -1,16 +1,14 @@
-import React, {useCallback, useContext, useEffect, useRef} from 'react';
+import React, {useRef, useEffect, useCallback, useContext} from 'react';
 import {
   Animated,
   Dimensions,
-  Easing,
   KeyboardAvoidingView,
-  Modal,
   PanResponder,
   Platform,
-  Pressable,
   StyleSheet,
   TouchableOpacity,
   View,
+  Modal,
 } from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {ApplicationContext} from './index';
@@ -32,10 +30,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     barrierDismissible = false,
     draggable = true,
     useBottomInset = true,
-    useKeyboardAvoidingView = true,
     keyboardVerticalOffset,
   }: BottomSheetParams = props.route.params;
-
   const pan = useRef(
     new Animated.ValueXY({
       y: heightDevice,
@@ -43,9 +39,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     })
   ).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 panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
@@ -72,7 +65,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       },
     })
   ).current;
-
   let Container: any = View;
   if (useNativeModal) {
     Container = Modal;
@@ -89,10 +81,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     Animated.timing(pan, {
       toValue: {x: 0, y: 0},
       useNativeDriver: false,
-      easing: customEasingOpen,
-      duration: 500,
+      duration: 150,
     }).start();
-
     return () => {
       props.route.params?.onDismiss?.(action.current);
     };
@@ -111,8 +101,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     Animated.timing(pan, {
       toValue: {x: 0, y: heightDevice},
       useNativeDriver: false,
-      easing: customEasingClose,
-      duration: 300,
+      duration: 200,
     }).start(() => {
       navigator?.pop();
     });
@@ -181,39 +170,20 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       onRequestClose={() => {
         onDismiss();
       }}
-      style={StyleSheet.absoluteFillObject}>
+      style={styles.overlay}>
       <KeyboardAvoidingView
-        behavior={Platform.select({
-          ios: 'padding',
-          android: undefined,
-        })}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
-        enabled={useKeyboardAvoidingView}
         style={[Styles.flex, {justifyContent: 'flex-end'}]}>
-        <Pressable
-          style={StyleSheet.absoluteFillObject}
+        <TouchableOpacity
+          style={Styles.flex}
+          activeOpacity={1}
           onPress={() => {
             action.current = 'touch';
             onDismiss();
-          }}>
-          <Animated.View
-            style={[
-              styles.overlay,
-              {
-                opacity: pan.y.interpolate({
-                  inputRange: [0, heightDevice],
-                  outputRange: [1, 0],
-                  extrapolate: 'clamp',
-                }),
-              },
-            ]}
-          />
-        </Pressable>
-
-        <Animated.View
-          style={{
-            transform: pan.getTranslateTransform(),
-          }}>
+          }}
+        />
+        <Animated.View style={{transform: pan.getTranslateTransform()}}>
           {renderHeader()}
           <View style={{backgroundColor: backgroundColor}}>
             <Screen
@@ -233,8 +203,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
 const styles = StyleSheet.create({
   overlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end',
   },
   indicator: {
     width: 40,

package/Application/Components/BottomSheetHelpCenter.tsx

@@ -46,7 +46,7 @@ const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
     context?.autoTracking?.({
       ...context,
       componentName: 'TouchableOpacity',
-      componentId: 'bottomsheet_faq_item',
+      componentId: 'navigation_faq_item',
       screenName: screenName,
     });
 
@@ -69,7 +69,7 @@ const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
     context?.autoTracking?.({
       ...context,
       componentName: 'TouchableOpacity',
-      componentId: 'bottomsheet_chatbot_item',
+      componentId: 'navigation_chatbot_item',
       screenName: screenName,
     });
 
@@ -100,7 +100,7 @@ const BottomSheetHelpCenter: React.FC<any> = ({onRequestClose}) => {
     context?.autoTracking?.({
       ...context,
       componentName: 'TouchableOpacity',
-      componentId: 'bottomsheet_feedback_item',
+      componentId: 'navigation_feedback_item',
       screenName: screenName,
     });
 

package/Application/Components/HeaderAnimated.tsx

@@ -35,8 +35,7 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   return (
     <Animated.View
       style={{
-        width: '100%',
-        aspectRatio: 16 / 9,
+        height: 210,
         opacity: opacity,
         transform: [{scale}, {translateY}],
       }}>

package/Application/Components/HeaderBackground.tsx

@@ -16,12 +16,12 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue = new Animated.Value(0),
   useGradient = true,
   useShadowHeader = true,
-  gradientColor: customGradientColor,
+  gradientColor,
   headerBackground,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
-  const gradientColor = customGradientColor ?? theme.colors.gradient;
+  const linearGradientColor = gradientColor ?? theme.colors.gradient;
 
   let headerImage = headerBackground ?? theme.assets?.headerBackground;
   if (image === null) {
@@ -48,21 +48,13 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
           {
             backgroundColor: theme.colors.background.surface,
             opacity: opacityBackground,
-            overflow: 'hidden',
           },
-        ]}>
-        {theme?.assets?.headerBackground && (
-          <Image
-            style={styles.headerBackground}
-            source={{uri: theme?.assets?.headerBackground}}
-            loading={false}
-          />
-        )}
-      </Animated.View>
+        ]}
+      />
       <View style={styles.gradientContainer}>
-        {useGradient && !!gradientColor && (
+        {useGradient && (
           <LinearGradientAnimated
-            colors={[gradientColor, gradientColor + '00']}
+            colors={[linearGradientColor, linearGradientColor + '00']}
             style={[styles.extendedHeader, {opacity: opacityGradient}]}>
             {!!headerImage && (
               <Image
@@ -115,8 +107,9 @@ const styles = StyleSheet.create({
   },
   headerBackground: {
     width: '100%',
+    height: undefined,
     position: 'absolute',
-    aspectRatio: 375 / 152,
+    aspectRatio: 375 / 154,
   },
   dividerHeader: {
     borderBottomWidth: 1,

package/Application/Components/HeaderExtendHeader.tsx

@@ -105,36 +105,26 @@ const HeaderExtendHeader: React.FC<{
               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,
             {height: headerType === 'extended' ? height : heightHeader},
           ]}>
-          {!!gradientColor && (
-            <LinearGradientAnimated
-              colors={[gradientColor, gradientColor + '00']}
-              style={[styles.extendedHeader, {opacity: opacityGradient}]}>
-              {!!theme.assets?.headerBackground && (
-                <Image
-                  style={styles.headerBackground}
-                  source={{uri: theme.assets?.headerBackground}}
-                  loading={false}
-                />
-              )}
-            </LinearGradientAnimated>
-          )}
+          <LinearGradientAnimated
+            colors={[gradientColor, gradientColor + '00']}
+            style={[styles.extendedHeader, {opacity: opacityGradient}]}>
+            {!!theme.assets?.headerBackground && (
+              <Image
+                style={styles.headerBackground}
+                source={{uri: theme.assets?.headerBackground}}
+                loading={false}
+              />
+            )}
+          </LinearGradientAnimated>
         </Animated.View>
 
         <Animated.View
@@ -185,30 +175,20 @@ const HeaderExtendHeader: React.FC<{
               height: heightHeader,
               backgroundColor: theme.colors.background.surface,
               opacity: opacityBackground,
-              overflow: 'hidden',
             },
-          ]}>
-          {headerBackground && (
+          ]}
+        />
+        <LinearGradientAnimated
+          colors={[gradientColor, gradientColor + '00']}
+          style={[styles.extendedHeader, {opacity: opacityGradient}]}>
+          {!!headerBackground && (
             <Image
               style={styles.headerBackground}
               source={{uri: headerBackground}}
               loading={false}
             />
           )}
-        </Animated.View>
-        {!!gradientColor && (
-          <LinearGradientAnimated
-            colors={[gradientColor, gradientColor + '00']}
-            style={[styles.extendedHeader, {opacity: opacityGradient}]}>
-            {!!headerBackground && (
-              <Image
-                style={styles.headerBackground}
-                source={{uri: headerBackground}}
-                loading={false}
-              />
-            )}
-          </LinearGradientAnimated>
-        )}
+        </LinearGradientAnimated>
         <View style={{height: heightHeader}} />
         <Verified />
       </>

package/Application/Components/HeaderLeft.tsx

@@ -12,11 +12,19 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
   onPressLeftHeader,
-  onBackHandler,
 }) => {
   const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      goBackSafe
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
   const goBackSafe = () => {
     const goBack = () => {
       const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -35,6 +43,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       } else {
         (global as any)?.miniAppApi?.dispatch?.('dismiss', context);
       }
+      onPressLeftHeader?.();
     };
 
     if (preventBack) {
@@ -53,25 +62,11 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
         ),
       });
     } else {
-      onPressLeftHeader?.();
-      if (typeof onBackHandler === 'function') {
-        onBackHandler(goBack);
-      } else {
-        goBack();
-      }
+      goBack();
     }
     return true;
   };
 
-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      goBackSafe
-    );
-
-    return () => backHandler.remove();
-  }, [goBackSafe]);
-
   return (
     <View style={styles.headerLeft}>
       <NavigationButton

package/Application/Components/HeaderRight.tsx

@@ -15,7 +15,6 @@ import {scaleSize, Text} from '../../Text';
 import {BottomSheetHelpCenter} from './BottomSheetHelpCenter';
 import {Image} from '../../Image';
 
-const DID_SYNC_NEW_HOME = 'did_sync_new_home';
 /**
  * main component for header right
  */
@@ -65,19 +64,8 @@ const HeaderToolkitAction: React.FC<any> = ({
   useEffect(() => {
     if (useShortcut) {
       checkAppIsFavorite();
-
-      const favoriteObserver = navigator?.maxApi?.observer?.(
-        DID_SYNC_NEW_HOME,
-        (updatedData: any) => {
-          const status = updatedData?.items?.includes(context?.code);
-          setIsFavorite(status);
-        }
-      );
-      return () => {
-        favoriteObserver?.remove?.();
-      };
     }
-  }, [useShortcut, context]);
+  }, [useShortcut, useMore, tools]);
 
   let buttonStyle: ViewStyle = {};
   if (tintColor === Colors.black_01 || tintColor === 'white') {
@@ -90,14 +78,17 @@ const HeaderToolkitAction: React.FC<any> = ({
   /**
    * check app is favorite
    */
-  const checkAppIsFavorite = () =>
+  const checkAppIsFavorite = () => {
     navigator?.maxApi?.dispatchFunction?.(
       'isFavoriteApp',
-      context?.code,
+      context?.app_code,
       (result: boolean) => {
-        setIsFavorite(result);
+        if (result !== isFavorite) {
+          setIsFavorite(result);
+        }
       }
     );
+  };
 
   /**
    * close navigation container
@@ -107,7 +98,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     context?.autoTracking?.({
       ...context,
       componentName: 'IconButton',
-      componentId: 'navigation_close',
+      componentId: 'navigation_more',
       screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
     });
 

package/Application/Components/HeaderTitle.tsx

@@ -79,7 +79,6 @@ const TitleUser: React.FC<TitleUserProps> = ({
   isLoading,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const maxWidth = icons?.length === 2 ? '73%' : '100%';
   const getShortName = (name: string) => {
     const words = name.split(' ');
     const lastTwoWords = words.slice(-2);
@@ -228,7 +227,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
       }
     }
 
-    if (typeof image === 'string' && image) {
+    if (typeof image === 'string') {
       return <Image source={{uri: image}} style={styles.circle} />;
     }
 
@@ -307,7 +306,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
             <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"

package/Application/ModalScreen.tsx

@@ -1,10 +1,10 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {
-  Animated,
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
+  View,
 } from 'react-native';
 
 import {ApplicationContext} from './index';
@@ -22,11 +22,8 @@ const ModalScreen: React.FC<any> = props => {
 
 const Modal: React.FC<ModalParams> = props => {
   const {navigator} = useContext(ApplicationContext);
-  const {screen, barrierDismissible, modalStyle} = props.route.params;
+  const {screen, barrierDismissible} = props.route.params;
   const Component = useRef(screen).current;
-  const opacity = useRef(new Animated.Value(0)).current;
-  const scale = useRef(new Animated.Value(0.8)).current;
-
   const navigation = new Navigation(props.navigation);
   const params = {
     ...props.route.params,
@@ -35,68 +32,65 @@ const Modal: React.FC<ModalParams> = props => {
   delete params.screen;
 
   useEffect(() => {
-    Animated.parallel([
-      Animated.timing(opacity, {
-        toValue: 1,
-        duration: 400,
-        useNativeDriver: true,
-      }),
-      Animated.spring(scale, {
-        toValue: 1,
-        useNativeDriver: true,
-      }),
-    ]).start();
-
     return () => {
       props.route.params?.onDismiss?.();
     };
-  }, [opacity, scale]);
+  }, []);
 
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
     }
-    Animated.parallel([
-      Animated.timing(opacity, {
-        toValue: 0,
-        duration: 250,
-        useNativeDriver: true,
-      }),
-      Animated.timing(scale, {
-        toValue: 0.8,
-        duration: 250,
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
-      navigator?.pop();
-    });
+    navigator?.pop();
   };
 
   return (
     <KeyboardAvoidingView
-      style={Styles.flexCenter}
+      style={Styles.flex}
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
-      <Pressable style={StyleSheet.absoluteFillObject} onPress={onDismiss}>
-        <Animated.View style={[styles.overlayContent, {opacity}]} />
-      </Pressable>
-      <Animated.View
-        style={[
-          {
-            opacity,
-            transform: [{scale}],
-          },
-          modalStyle,
-        ]}>
-        <Component {...params} />
-      </Animated.View>
+      <View style={styles.container}>
+        <Pressable
+          style={styles.modalSpaceHorizontal}
+          onPress={() => onDismiss()}
+        />
+        <View style={styles.modalCenterStage}>
+          <Pressable
+            style={styles.modalSpaceVertical}
+            onPress={() => onDismiss()}
+          />
+          <View style={styles.modalContent}>
+            <Component {...params} />
+          </View>
+          <Pressable
+            style={styles.modalSpaceVertical}
+            onPress={() => onDismiss()}
+          />
+        </View>
+        <Pressable
+          style={styles.modalSpaceHorizontal}
+          onPress={() => onDismiss()}
+        />
+      </View>
     </KeyboardAvoidingView>
   );
 };
 
 const styles = StyleSheet.create({
-  overlayContent: {
+  container: {flex: 1, flexDirection: 'row'},
+  modalContent: {
+    maxWidth: '100%',
+    maxHeight: '80%',
+  },
+  modalCenterStage: {
+    maxWidth: '90%',
+  },
+  modalSpaceHorizontal: {
+    flex: 1,
+    minWidth: '5%',
+  },
+  modalSpaceVertical: {
     flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    minHeight: '10%',
   },
 });
 

package/Application/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
@@ -8,13 +8,13 @@ import {
   createStackNavigator,
   StackNavigationOptions,
 } from '@react-navigation/stack';
-import {DeviceEventEmitter, NativeModules} from 'react-native';
+import {DeviceEventEmitter} from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {NavigationContainerProps} from './types';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import Localize from './Localize';
 import {defaultTheme} from '../Consts';
 
@@ -28,22 +28,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   initialParams,
   localize = new Localize({vi: {}, en: {}}),
 }) => {
-  const context = useContext<any>(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
-  const routes = useRef<any>();
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
 
-  let config: any = null;
-  try {
-    config = JSON.parse(
-      NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM') || ''
-    );
-  } catch (e) {
-    console.log(e);
-  }
-
   /**
    * inject data for navigator
    */
@@ -73,56 +62,12 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     return localize?.translate(data as string);
   };
 
-  /**
-   * navigation state route change handle
-   * @param preScreenName
-   * @param screenName
-   * @param action
-   */
-  const onScreenNavigated = (
-    preScreenName: string,
-    screenName: string,
-    action: string
-  ) => {
-    console.log(preScreenName, screenName, action);
-    context?.autoTracking?.({
-      ...context,
-      preScreenName,
-      screenName,
-      componentName: 'Screen',
-      state: 'navigated',
-      action,
-    });
-
-    /**
-     * debug toast
-     */
-    maxApi?.showToastDebug?.({
-      appId: context.appId,
-      message: `${screenName} screen_navigated`,
-      type: 'ERROR',
-    });
-  };
-
-  const headerBackground = config?.headerBar || theme.assets?.headerBackground;
-  const headerGradient = config?.headerGradient || theme.colors?.gradient;
-
   return (
     <SafeAreaProvider>
       <ApplicationContext.Provider
         value={{
           navigator: navigator.current,
-          theme: {
-            ...theme,
-            colors: {
-              ...theme.colors,
-              gradient: headerGradient,
-            },
-            assets: {
-              ...theme.assets,
-              headerBackground,
-            },
-          },
+          theme,
           showGrid,
           translate,
         }}>
@@ -141,27 +86,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
           ref={navigationRef}
           onReady={() => {
             isReady.current = true;
-            routes.current = navigationRef.current?.getRootState?.()?.routes;
-            maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
-              onScreenNavigated(data?.screenName, screen?.name, 'push');
-              maxApi?.setObserver('CURRENT_SCREEN', {screenName: screen?.name});
-            });
-          }}
-          onStateChange={state => {
-            const lastedRoute: any = state?.routes?.[state?.routes?.length - 1];
-            const oldRoute: any = routes.current?.[routes.current?.length - 1];
-            const lasted = lastedRoute?.params?.screen;
-            const previous = oldRoute?.params?.screen;
-            const preScreenName = previous?.name ?? previous?.type?.name;
-            const screenName = lasted?.name ?? lasted?.type?.name;
-
-            let action = 'push';
-            if (routes.current?.length > (state?.routes?.length ?? 0)) {
-              action = 'back';
-            }
-            onScreenNavigated(preScreenName, screenName, action);
-            maxApi?.setObserver('CURRENT_SCREEN', {screenName});
-            routes.current = state?.routes;
           }}
           independent={true}>
           <Stack.Navigator initialRouteName="Stack" headerMode="screen">

package/Application/StackScreen.tsx

@@ -6,8 +6,6 @@ import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
 
-const runAfterInteractions = InteractionManager.runAfterInteractions;
-
 /**
  * container for stack screen
  * @param props
@@ -44,6 +42,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
   delete data.initialParams;
 
   const screenName = Component?.name || Component?.type?.name || 'Invalid';
+  const routes = props.navigation.getState()?.routes || [];
 
   /**
    * set options for screen
@@ -68,7 +67,15 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
     const subscription = props.navigation?.addListener?.('focus', () => {
       navigator?.maxApi?.of?.({screenName});
-      navigator?.maxApi?.setObserver('CURRENT_SCREEN', {screenName});
+      navigator?.maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
+        let preScreenName = data?.screenName;
+        if (routes?.length > 1) {
+          const screen = routes?.[routes?.length - 2]?.params?.screen;
+          preScreenName = screen?.name || screen?.type?.name || 'Invalid';
+        }
+        onScreenNavigated(preScreenName);
+        navigator?.maxApi?.setObserver('CURRENT_SCREEN', {screenName});
+      });
     });
     navigator?.maxApi?.startTraceScreenLoad?.(
       screenName,
@@ -181,39 +188,46 @@ const StackScreen: React.FC<ScreenParams> = props => {
     }
   };
 
+  /**
+   * tracking for screen navigated
+   */
+  const onScreenNavigated = (preScreenName: string) => {
+    context?.autoTracking?.({
+      ...context,
+      preScreenName,
+      screenName,
+      componentName: 'Screen',
+      state: 'navigated',
+    });
+
+    /**
+     * debug toast
+     */
+    navigator?.maxApi?.showToastDebug?.({
+      appId: context.appId,
+      message: `${screenName} screen_navigated`,
+      type: 'ERROR',
+    });
+  };
+
   return (
     <ScreenContext.Provider
       value={{
         screenName,
         onElementLoad: (data: any) => {
-          /**
-           * tracking for element screen load
-           */
           clearTimeout(tracking.current.timeoutLoad);
           tracking.current.endTime = Date.now();
           tracking.current.timeoutInteraction?.cancel?.();
-          tracking.current.timeoutInteraction = runAfterInteractions(() => {
-            tracking.current.timeInteraction =
-              Date.now() - tracking.current.startTime;
-          });
-
-          /**
-           * support for debug last element
-           */
+          tracking.current.timeoutInteraction =
+            InteractionManager.runAfterInteractions(() => {
+              tracking.current.timeInteraction =
+                Date.now() - tracking.current.startTime;
+            });
+
           if (data?.componentName) {
             lastElement.current = data;
           }
 
-          /**
-           * for stop tracking when user interaction
-           */
-          if (data?.interaction) {
-            onScreenLoad();
-            onScreenInteraction();
-          }
-          /**
-           * timeout for handle tracking screen
-           */
           tracking.current.timeoutLoad = setTimeout(() => {
             const time = tracking.current.endTime - tracking.current.startTime;
             if (tracking.current.timeLoad === 0) {

package/Application/types.ts

@@ -1,7 +1,7 @@
 import {EventArg} from '@react-navigation/core';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React, {ReactNode} from 'react';
-import {Animated, ViewProps, ViewStyle} from 'react-native';
+import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Localize from './Localize';
 import Navigation from './Navigation';
@@ -122,7 +122,6 @@ export type ModalParams = {
   screen: React.ComponentType;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
-  modalStyle?: ViewStyle;
 };
 
 export type BottomSheetParams = {
@@ -138,7 +137,6 @@ export type BottomSheetParams = {
   barrierDismissible?: boolean;
   draggable?: boolean;
   useBottomInset?: boolean;
-  useKeyboardAvoidingView?: boolean;
   keyboardVerticalOffset?: number;
 };
 
@@ -160,7 +158,6 @@ export interface NavigationOptions
   extends Omit<StackNavigationOptions, 'headerRight' | 'headerTitle'> {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
-  onBackHandler?: (goBack: () => void) => void;
   hiddenBack?: boolean;
   headerTitle?: HeaderTitleProps | string;
   headerRight?: OnBoarding | HeaderRightToolkit | any;
@@ -181,7 +178,6 @@ export type HeaderRightToolkit = {
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
-  onBackHandler?: (goBack: () => void) => void;
 }
 
 export type HeaderBackgroundProps = {

package/Application/utils.tsx

@@ -55,6 +55,21 @@ const getModalOptions = (): StackNavigationOptions => {
     cardStyle: {backgroundColor: 'transparent'},
     cardOverlayEnabled: true,
     animationEnabled: false,
+    cardStyleInterpolator: ({current: {progress}}) => ({
+      cardStyle: {
+        opacity: progress.interpolate({
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.25, 0.7, 1],
+        }),
+      },
+      overlayStyle: {
+        opacity: progress.interpolate({
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.2, 0.4, 0.6],
+          extrapolate: 'clamp',
+        }),
+      },
+    }),
   };
 };
 
@@ -72,7 +87,6 @@ const getOptions = (
    */
   if (
     typeof params.onPressLeftHeader === 'function' ||
-    typeof params.onBackHandler === 'function' ||
     params.preventBack !== undefined ||
     typeof params.hiddenBack === 'boolean'
   ) {
@@ -81,7 +95,6 @@ const getOptions = (
         {...props}
         preventBack={params.preventBack}
         onPressLeftHeader={params.onPressLeftHeader}
-        onBackHandler={params.onBackHandler}
       />
     );
     if (params.hiddenBack) {
@@ -154,10 +167,19 @@ const exportHeaderTitle = (
   return {};
 };
 
+const formatNameLength = (name = '') => {
+  let formattedName = name;
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName;
+};
+
 export {
   getStackOptions,
   getDialogOptions,
   getModalOptions,
   getOptions,
   exportHeaderTitle,
+  formatNameLength,
 };

package/Button/index.tsx

@@ -88,6 +88,7 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
+  const component = useContext<any>(ComponentContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
   let state = 'enabled';
@@ -292,6 +293,7 @@ const Button: FC<ButtonProps> = ({
   return (
     <ComponentContext.Provider
       value={{
+        ...component,
         componentName: 'Button',
         params,
         state: state,

package/Input/Input.tsx

@@ -67,6 +67,7 @@ const Input = forwardRef(
     ref
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const component = useContext<any>(ComponentContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
@@ -269,6 +270,7 @@ const Input = forwardRef(
     return (
       <ComponentContext.Provider
         value={{
+          ...component,
           componentName: 'Input',
           params,
           state: inputState,

package/Input/InputDropDown.tsx

@@ -30,6 +30,7 @@ const InputDropDown = ({
   multiline,
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
+  const component = useContext<any>(ComponentContext);
 
   /**
    * Render the input view
@@ -105,6 +106,7 @@ const InputDropDown = ({
   return (
     <ComponentContext.Provider
       value={{
+        ...component,
         componentName: 'InputDropDown',
         params,
         state: 'enabled',

package/Input/InputMoney.tsx

@@ -62,6 +62,7 @@ const InputMoney = forwardRef(
     ref
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const component = useContext<any>(ComponentContext);
 
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
@@ -206,6 +207,7 @@ const InputMoney = forwardRef(
     return (
       <ComponentContext.Provider
         value={{
+          ...component,
           componentName: 'InputMoney',
           params,
           state: inputState,

package/Input/InputOTP.tsx

@@ -88,6 +88,7 @@ const InputOTP = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput | null>(null);
     const {theme} = useContext(ApplicationContext);
+    const component = useContext<any>(ComponentContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -229,6 +230,7 @@ const InputOTP = forwardRef(
     return (
       <ComponentContext.Provider
         value={{
+          ...component,
           componentName: 'InputOTP',
           params,
           state: 'enabled',

package/Input/InputSearch.tsx

@@ -139,6 +139,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   ref
 ) => {
   const {theme} = useContext(ApplicationContext);
+  const component = useContext<any>(ComponentContext);
 
   const [focused, setFocused] = useState(false);
   const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
@@ -271,6 +272,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
   return (
     <ComponentContext.Provider
       value={{
+        ...component,
         componentName: 'InputSearch',
         params,
         state: inputState,

package/Input/InputTextArea.tsx

@@ -125,7 +125,6 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                defaultValue={defaultValue}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"

package/Input/styles.ts

@@ -123,7 +123,6 @@ export default StyleSheet.create({
   textButton: {marginLeft: Spacing.L},
   divider: {
     width: 1,
-    height: 20,
     marginLeft: Spacing.XS,
   },
   moneyInput: {

package/Popup/PopupNotify.tsx

@@ -1,11 +1,5 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
-import {
-  Dimensions,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
 import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
 import {Radius, Spacing, Styles} from '../Consts';
@@ -28,8 +22,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const context = useContext<any>(MiniAppContext);
   const {theme, navigator, translate} = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
-  const {width: widthDevice} = Dimensions.get('window');
-
   const closeAction = useRef('touch_outside');
   let descriptionStyle = {};
   let Description: any = View;
@@ -198,10 +190,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       accessibilityLabel={'popup_notify'}
       style={[
         styles.container,
-        {
-          backgroundColor: theme.colors.background.surface,
-          width: widthDevice - Spacing.XL * 2,
-        },
+        {backgroundColor: theme.colors.background.surface},
       ]}>
       {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
@@ -245,6 +234,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 const styles = StyleSheet.create({
   container: {
     borderRadius: Radius.L,
+    minWidth: '100%',
   },
   image: {
     borderTopLeftRadius: Radius.L,

package/Popup/PopupPromotion.tsx

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useRef} from 'react';
-import {Dimensions, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
 import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
@@ -13,7 +13,6 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const {theme, navigator} = useContext(ApplicationContext);
-  const {width: widthDevice} = Dimensions.get('window');
   const closeAction = useRef('touch_outside');
 
   /**
@@ -84,12 +83,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
         source={{
           uri: image,
         }}
-        style={[
-          styles.container,
-          {
-            width: widthDevice - Spacing.XL * 2,
-          },
-        ]}
+        style={styles.container}
       />
       {buildCloseIcon()}
     </View>

package/Text/index.tsx

@@ -111,9 +111,6 @@ const getTypoStyle = (typo: Typography, newFontFamily?: string) => {
       fontFamily = `${font}-${MomoTrustSans[fontWeight]}${style}`;
       break;
     }
-    case 'Montserrat-Bold':
-    case 'iCielPanton-Black':
-    case 'iCielBCCubano-Normal':
     case 'MomoTrustDisplay':
     case 'MomoSignature': {
       fontFamily = font;
@@ -176,19 +173,16 @@ const exportFontFamily = (
   let newFontFamily;
 
   switch (fontWeight) {
-    case 'bold':
-    case 'Bold':
+    case 'bold': {
       typography = 'action_xs_bold';
       break;
-
-    case 'regular':
-    case 'Regular':
+    }
+    case 'regular': {
       typography = 'body_default_regular';
       break;
-
+    }
     default: {
       typography = 'body_default_regular';
-      break;
     }
   }
 

package/Title/index.tsx

@@ -10,12 +10,6 @@ import {TitleProps} from './types';
 import {Typography} from '../Text/types';
 
 const Title: FC<TitleProps> = ({
-  accessibilityLabelIcon,
-  accessibilityLabelTitle,
-  accessibilityLabelRightAction,
-  accessibilityLabelDescription,
-  accessibilityLabelBadge,
-  accessibilityLabelTrailingAction,
   title = 'Title',
   type = 'section',
   size = 'medium',
@@ -62,7 +56,7 @@ const Title: FC<TitleProps> = ({
     }
 
     return (
-      <View accessibilityLabel={accessibilityLabelIcon} style={[styles.iconView, iconStyle]}>
+      <View style={[styles.iconView, iconStyle]}>
         <Icon color={iconColor} source={icon} />
       </View>
     );
@@ -79,7 +73,6 @@ const Title: FC<TitleProps> = ({
           }}
           style={[styles.iconLeftView, flexStyle]}>
           <RNText
-            accessibilityLabel={accessibilityLabelTitle}
             numberOfLines={numberOfLines}
             style={[
               styleSheet[typography],
@@ -100,9 +93,7 @@ const Title: FC<TitleProps> = ({
               }}
               style={{
                 alignItems: 'center',
-              }}
-              accessibilityLabel={accessibilityLabelBadge}
-              >
+              }}>
               <Badge style={styles.badge} label={badgeLabel} />
             </View>
           )}
@@ -110,7 +101,6 @@ const Title: FC<TitleProps> = ({
         </View>
         {description && (
           <Text
-            accessibilityLabel={accessibilityLabelDescription}
             style={styles.description}
             color={theme.colors.text.secondary}
             typography={'description_default_regular'}>
@@ -124,7 +114,6 @@ const Title: FC<TitleProps> = ({
   const renderActionLeft = () => {
     return (
       <TouchableOpacity
-        accessibilityLabel={accessibilityLabelTrailingAction}
         onPress={onPressTrailingAction}
         style={styles.iconLeftView}
         hitSlop={{top: 10, bottom: 10, left: 50, right: 10}}>
@@ -168,9 +157,7 @@ const Title: FC<TitleProps> = ({
               {
                 backgroundColor: theme.colors.primary + '0F',
               },
-            ]}
-            accessibilityLabel={accessibilityLabelRightAction}
-            >
+            ]}>
             <Icon
               source={'arrow_chevron_right_small'}
               size={scaleSize(22)}
@@ -178,7 +165,7 @@ const Title: FC<TitleProps> = ({
             />
           </TouchableOpacity>
         ) : (
-          <TouchableOpacity onPress={onPressRightAction} accessibilityLabel={accessibilityLabelRightAction}>
+          <TouchableOpacity onPress={onPressRightAction}>
             <Text color={theme.colors.primary} typography={buttonTypo}>
               {buttonTitle}
             </Text>
@@ -192,7 +179,6 @@ const Title: FC<TitleProps> = ({
     return (
       <View style={isSection && styles.margin}>
         <RNText
-          accessibilityLabel={accessibilityLabelTitle}
           numberOfLines={numberOfLines}
           style={[styleSheet[typography], styles.title]}>
           {title}

package/Title/types.ts

@@ -17,10 +17,4 @@ export type TitleProps = {
   onPressTrailingAction?: () => void;
   textOnly?: boolean;
   style?: ViewStyle;
-  accessibilityLabelTitle?: string;
-  accessibilityLabelRightAction?: string;
-  accessibilityLabelDescription?: string;
-  accessibilityLabelIcon?: string;
-  accessibilityLabelBadge?: string;
-  accessibilityLabelTrailingAction?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.110.2-beta.3",
+  "version": "0.110.3",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},
@@ -14,12 +14,12 @@
     "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",
-    "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"
+    "lottie-react-native": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/momo-lottie-react-native.git",
+    "@react-navigation/stack": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-navigation-stack.git",
+    "@react-navigation/bottom-tabs": "https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-bottom-tabs.git"
   },
   "peerDependencies": {
     "react-native": "*"

package/publish.sh

@@ -13,5 +13,6 @@ else
   npm version prerelease --preid=beta
   npm publish --tag beta --access=public
 fi
+
 PACKAGE_NAME=$(npm pkg get name)
 NEW_PACKAGE_VERSION=$(npm pkg get version)