@momo-kits/foundation 0.89.4-react-native.0.74.1 → 0.89.4-tracking.15

package/Application/BottomTab.tsx

@@ -62,11 +62,9 @@ const BottomTab: React.FC<BottomTabProps> = ({
     <Tab.Navigator
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
-      screenOptions={{headerShown: false}}
       tabBarOptions={{
         style: {
           height: 68 + Math.min(insets.bottom, 21),
-          borderWidth: 0,
         },
         tabStyle: {
           height: 68,

package/Application/Components.tsx

@@ -120,13 +120,18 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     const goBack = () => {
       const canGoBack = navigator?.ref.current?.canGoBack();
       if (!canGoBack) {
-        const currentRoute = navigator?.ref?.current.getCurrentRoute();
-        navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
+        const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+        const params = {
           ...context,
           screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
           trigger_id: '111154000000000000',
           icon_name: 'back',
+        };
+        navigator?.maxApi?.showToastDebug?.({
+          title: 'service_icon_clicked',
+          params,
         });
+        navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       }
       if (canGoBack) {
         navigator?.ref.current?.goBack();
@@ -287,6 +292,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   preventBack,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
+  const miniContext = useContext(MiniAppContext);
   const [toolConfig, setToolConfig] = useState<any>();
   const {onAction} = toolConfig ?? {};
 
@@ -296,10 +302,12 @@ const HeaderToolkitAction: React.FC<any> = ({
   }
 
   useEffect(() => {
-    if (navigator?.toolkitConfig) {
-      setToolConfig(navigator?.toolkitConfig);
-    } else {
-      getToolkitConfig();
+    if (miniContext?.toolkitConfig?.hidden === false) {
+      if (navigator?.toolkitConfig) {
+        setToolConfig(navigator?.toolkitConfig);
+      } else {
+        getToolkitConfig();
+      }
     }
   }, []);
 

package/Application/NavigationContainer.tsx

@@ -25,8 +25,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   localization,
 }) => {
   const context = useContext(MiniAppContext);
-  const navigationRef = React.useRef<NavigationContainerRef>(null);
-  const navigator = useRef(new Navigator(navigationRef));
+  const navigationRef = useRef<NavigationContainerRef>(null);
+  const isReady = useRef(false);
+  const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
   const config = useRef<any>();
 
@@ -89,6 +90,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
               },
             }}
             ref={navigator.current?.ref}
+            onReady={() => {
+              isReady.current = true;
+            }}
             independent={true}>
             <Stack.Navigator initialRouteName="Stack" headerMode="screen">
               <Stack.Screen

package/Application/Navigator.ts

@@ -8,13 +8,15 @@ import {
 
 class Navigator {
   ref?: any;
+  isReady?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
   dismissData?: any;
   toolkitCallback?: (item: any) => void;
 
-  constructor(navigation: any) {
+  constructor(navigation: any, isReady: any) {
     this.ref = navigation;
+    this.isReady = isReady;
   }
 
   /**
@@ -22,7 +24,9 @@ class Navigator {
    * @param params
    */
   push = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.push('Stack', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Stack', params));
+    }
   };
 
   /**
@@ -30,14 +34,18 @@ class Navigator {
    * @param params
    */
   replace = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.replace('Stack', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.replace('Stack', params));
+    }
   };
   /**
    * pop to dismiss a screen
    * @param count
    */
   pop = (count?: number) => {
-    this.ref.current.dispatch(StackActions.pop(count ?? 1));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.pop(count ?? 1));
+    }
   };
 
   /**
@@ -45,7 +53,9 @@ class Navigator {
    * @param params
    */
   present = (params: ScreenParams) => {
-    this.ref.current.dispatch(StackActions.push('Dialog', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Dialog', params));
+    }
   };
 
   /**
@@ -53,7 +63,9 @@ class Navigator {
    * @param params
    */
   showModal = (params: ModalParams) => {
-    this.ref.current.dispatch(StackActions.push('Modal', params));
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Modal', params));
+    }
   };
 
   /**
@@ -61,19 +73,23 @@ class Navigator {
    * @param params
    */
   showBottomSheet = (params: BottomSheetParams) => {
-    this.ref.current.dispatch(
-      StackActions.push('Modal', {
-        ...params,
-        isBottomSheet: true,
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        StackActions.push('Modal', {
+          ...params,
+          isBottomSheet: true,
+        }),
+      );
+    }
   };
 
   /**
    * pop all screen route
    */
   popToTop = () => {
-    this.ref.current.dispatch(StackActions.popToTop());
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.popToTop());
+    }
   };
 
   /**
@@ -82,12 +98,14 @@ class Navigator {
    * @param params
    */
   navigate = (name: string, params: any) => {
-    this.ref.current.dispatch(
-      CommonActions.navigate({
-        name,
-        params,
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.navigate({
+          name,
+          params,
+        }),
+      );
+    }
   };
 
   /**
@@ -95,18 +113,20 @@ class Navigator {
    * @param params
    */
   reset = (params: ScreenParams) => {
-    this.ref.current.dispatch(
-      CommonActions.reset({
-        index: 0,
-        routes: [
-          {
-            name: 'Stack',
-            key: `Stack_${new Date().getTime()}`,
-            params,
-          },
-        ],
-      }),
-    );
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [
+            {
+              name: 'Stack',
+              key: `Stack_${new Date().getTime()}`,
+              params,
+            },
+          ],
+        }),
+      );
+    }
   };
 
   /**

package/Application/StackScreen.tsx

@@ -1,12 +1,22 @@
-import React, {useContext, useEffect, useLayoutEffect} from 'react';
+import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext} from './index';
 import {GridSystem} from '../Layout';
-import {useHeaderHeight} from '@react-navigation/elements';
+import {useHeaderHeight} from '@react-navigation/stack';
+import {InteractionManager} from 'react-native';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const StackScreen: React.FC<ScreenParams> = props => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const startTime = useRef(Date.now());
+  const endTime = useRef(Date.now());
+  const timeLoad = useRef(0);
+  const timeout = useRef<any>();
+
   const context = useContext(MiniAppContext);
 
   const {screen: Component, options}: ScreenParams = props.route.params;
@@ -27,6 +37,12 @@ const StackScreen: React.FC<ScreenParams> = props => {
     if (options) {
       navigation.setOptions(options);
     }
+    InteractionManager.runAfterInteractions(() => {
+      navigator?.maxApi?.showToastDebug?.({
+        title: 'screen_interaction_time',
+        message: Date.now() - startTime.current,
+      });
+    });
   }, [options]);
 
   /**
@@ -45,26 +61,55 @@ const StackScreen: React.FC<ScreenParams> = props => {
       pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
 
-    navigator?.maxApi?.trackEvent?.('service_frame_displayed', {
+    const params = {
       ...tracking,
       pre_screen_name,
       trigger_id: '111378000000000000',
+    };
+    navigator?.maxApi?.trackEvent?.('service_frame_displayed', params);
+    navigator?.maxApi?.showToastDebug?.({
+      title: 'service_frame_displayed',
+      params,
     });
 
     return props.navigation.addListener('beforeRemove', () => {
-      navigator?.maxApi?.trackEvent?.('service_icon_clicked', {
+      const params = {
         ...tracking,
         trigger_id: '111154000000000000',
         icon_name: 'back',
+      };
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
+      navigator?.maxApi?.showToastDebug?.({
+        title: 'service_icon_clicked',
+        params,
       });
     });
   }, []);
 
   return (
-    <>
+    <ScreenContext.Provider
+      value={{
+        appId: context.appId,
+        code: context.code,
+        screenName: Component.name,
+        autoTracking: (data: any) => {
+          navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
+        },
+        onElementLoad: () => {
+          endTime.current = Date.now();
+          clearTimeout(timeout.current);
+          timeout.current = setTimeout(() => {
+            timeLoad.current = endTime.current - startTime.current;
+            navigator?.maxApi?.showToastDebug?.({
+              title: 'screen_load_time',
+              message: timeLoad.current,
+            });
+          }, 1000);
+        },
+      }}>
       <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
   );
 };
 

package/Application/types.ts

@@ -76,7 +76,7 @@ export type MiniAppInfo = {
   appId: string;
   buildNumber: number;
   flowPartnerId?: string;
-  toolkitConfig?: object;
+  toolkitConfig?: any;
   fromCode?: string;
 };
 

package/Application/utils.tsx

@@ -126,7 +126,6 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (params.toolkitParams) {
     options = {
       ...options,
       headerRight: (props: any) => {
@@ -140,7 +139,6 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
         );
       },
     };
-  }
 
   return {
     ...params,
@@ -148,4 +146,39 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions};
+const  formatComponentName= (word: string) =>{
+  const accentsMap = {
+    'a': 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
+    'A': 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
+    'e': 'é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ',
+    'E': 'É|È|Ẻ|Ẽ|Ẹ|Ê|Ế|Ề|Ể|Ễ|Ệ',
+    'i': 'í|ì|ỉ|ĩ|ị',
+    'I': 'Í|Ì|Ỉ|Ĩ|Ị',
+    'o': 'ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ',
+    'O': 'Ó|Ò|Ỏ|Õ|Ọ|Ô|Ố|Ồ|Ổ|Ỗ|Ộ|Ơ|Ớ|Ờ|Ở|Ỡ|Ợ',
+    'u': 'ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự',
+    'U': 'Ú|Ù|Ủ|Ũ|Ụ|Ư|Ứ|Ừ|Ử|Ữ|Ự',
+    'y': 'ý|ỳ|ỷ|ỹ|ỵ',
+    'Y': 'Ý|Ỳ|Ỷ|Ỹ|Ỵ',
+    'd': 'đ',
+    'D': 'Đ'
+  };
+
+  for (const [nonAccent, accentGroup] of Object.entries(accentsMap)) {
+    const accents = new RegExp(accentGroup, 'g');
+    word = word.replace(accents, nonAccent);
+  }
+
+  word = word.replace(/\s+/g, '_').toLowerCase();
+
+  return word;
+}
+
+const formatNameLength = (name: string) =>{
+  let formattedName = name
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName
+}
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions, formatComponentName, formatNameLength};

package/Assets/icon.json

@@ -801,7 +801,7 @@
     "uri": "https://img.mservice.com.vn/app/img/kits/navigation_minus_circle_full.png"
   },
   "navigation_more_horiz": {
-    "uri": "https://img.mservice.com.vn/app/img/kits/navigation_more_horiz.png"
+    "uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAgKADAAQAAAABAAAAgAAAAABIjgR3AAAFAklEQVR4Ae2aS4tcRRiGM2rEO14SY7wFURGc+CPEyyYJLnSlaCCKLgSzUNBNRAMSF0LIRhGDBMQQMAQ3Zin+A/VHKOIlTm4aJ5fx+VBCT5Puru9UleOE54OX7nO66n2rnj7dp+ucXrPGkoAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhLoTmCue8JYwNLS0m3s2ooeQXeiJfQj+h59NTc39zuP3Yr89ZhH/mYU+RdQ5H+HIn+Bx25F/u2YR/48ivzzKPK/RUfJP87j5VdM/EH0BTqHJtVZXjiI7mtNAM+H0BF0Hk2qyP8MbeqQ/zC+X6Jp+Yu8fgDd2zp/Rf2Y0E4UcEvrLxq+3GrQeL2OMvlnaL+jYf6b+E078Hl5Wf3J1gut8lfUh4nsWza13Mae2sET92Euclnr3Q3yP1nmmNvYVZu/ov2Z62u5+V6y9UtDJ4FbfPJra3tF/lu14fR/dmj+ivZj4A+gOKfVVnwd3pOdDH3inJ/52p80ztO8sHFA/jz9pp3vJ+WN7z/Jjvjh2KWu6OL6j+l7PKxt4H8NHu8O8InTx1UD+o13uY4d74zvLNh+nzYt+N6Az9sFeYOadFkGcsTewmh+Ri3egJjYGbSOJdLp2JhV5MdS7yfU4g2IuMiN/BjHzCI/vjF+QK34nsBrPfmLM8OTDVoBGo/dwo5Wb354x7fAk/GksGKd3XJu1+P3eGF2NNuGWr354XcTejSetK6WkEbHFhdZWlfGM9O2dJwZz0zbHvmlnk0/JaOhcYWrdWU8M21Lx5nxzLTtkV/q2e0AiMurrSvjmWlbOs6MZ6Ztj/xSz24HQFzbbl0Zz0zb0nFmPDNte+SXenY7AOLGSuvKeGbalo4z45lp2yO/1LPpL9WLoSyDbmTjV3T1xZ11T7LLsJuJ+wW1WomklmHMfx3ZsQy9ErWoY5hsYBl4roXZqEeXVQADPUnI56NBlc8PlK7BI4e2Czwcqswc7f4pnoujO6Y9p20c/IentUm+th/P5m9+cgy55nwK7kZ/oNo6gUH6Uih9NqG4q1dbCxjEfxhSRZ/7UYtL4b/hE99oq68Y+POopi7Q+ZmhM6fvjppw+kb+UxX5r1Tmx72EuKi2eosJ7BoIIeC/UTtzPHZX5O9skL9nYH68+a/W5v8v+jOR59CpBIjjtH261eDx2o7irl5pxdf+4E/++LjxehFlTofHaL913GdVbzOhO9BHKG5vTqo438cfSOJmTtPCcyP6GE07EOPA24vS5/xZg8XzLrQfTTsQ48D7AN06y6/V6y1vWBSNicnFjZ3H0KX+FPp15td2UeBYo3/z48bOZhSXbOOqXVy4ibX7N/9B/rXkPIHmUeSP/ik08s+yz5KABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISkIAEJCABCUhAAhKQgAQkIAEJSEACEpCABCQgAQlIQAISuJwI/A2lzL3lHltsxwAAAABJRU5ErkJggg=="
   },
   "navigation_more_vert": {
     "uri": "https://img.mservice.com.vn/app/img/kits/navigation_more_vert.png"
@@ -822,7 +822,7 @@
     "uri": "https://img.mservice.com.vn/app/img/kits/navigation_scan.png"
   },
   "navigation_search": {
-    "uri": "https://img.mservice.com.vn/app/img/kits/navigation_search.png"
+    "uri": "data:image/webp;base64,UklGRqwEAABXRUJQVlA4TKAEAAAvf8AfEDVIchtJkqT6/6fZ21hkukWeZouKkARJtmlbtm3btm3b741sjWzbtm3btm184xkLgiS5cZsGUuXbsJOAoPSD88dlwMVKiDwdxtRJ4UUP+XlwcpVn1A0I4dWOVnEMET7n62avxi24FD4tSyT9AJCpq/YI7oQjYZj3Bp2zU3A/dBDfF0y+bsBMGCK3KTpOwFyoR70h9Nreo+EvXyi7Ye4vmA7TaLcCQy4ohB90NoLaKqiEL1HbwOH84sdyqk+aQC5smHLkKViZWT8vXlACZQ/EfAcXOJa5bPO4uGm51A91wtzix3+w5I88UhfXAw5GL6Rh6Bvcu77smyD4N4okpNkXWIVGSPVXWz7DqyjYN+vEa3yZctrvunwjw9gGSmW3/EXx6ZILFiTM/BYx2FjwRqzabUHmhe1UtXBWS4RTBMW1xt/MLYm5eiGKXqSGnsX3ZwPNaMUsvYMYtGoL/eIymuGauS66JIzSmOMkP4NE9z9GeAdfELGdrxqK0cgj0sqM6Sa/a6NuxI5BCrENnHO763RvvF7jUlV4B8hOY7PHVvq/EQNSCJpHAyS1AQaWs8QZxHGq40oLu9a32IIU5Mc3dx7z76wGipNE0TT28W8WfnHd4hSrhz5MTSKvuW7C9q931W1Cqjo3KK/1Xpxx0ThVVBKTtWVLZhdU/9P8A3OUvIRheXDUmz4AwVFp0fKJsExgwmKUm8BJe26nmggb7XqpWr1t6BK1k7Al0togegyMTiKcCKjv2xwFliaRT7jUWQ3slyZeNnUmAjeTGCdM6wylAzGTqCcc68wGLieRSnjW2QrsjY6sieA6V4Hl0Q1noqx+xM5Xp4NC9hqYbcPXOgJiJ/CzjVmrg2pN5eIsk5YwGiUu4VZmI0E3imGipQtpeqS7Mwqhz7RnhlvFBQTahwu2nArmUGUm4TVMUmKkCRtIMA4jDVIQKpKX2Bov2XGiuQeVl+ahH2HxCD/eGhmpdp/ox2GOV4234PWe6CtUrTMmu9LIaxIkDAqIR75jqOAH4qMhdie299sGnAIaPkDeczWQe8fQNv/F4fAbJLZLZz/U5xQ9DaGDWLMvMq1zLv7mZDl8xMkgiGTU+gbfzDvX0csGFiceYNdAMQ1yyD1zz3AAMsrFdQOtHyCHUcRTb+Q3yBR2z/X7Wp3uxDvS7vj6AAtEu4OTKLAIr2Jg3W/2JsEyXGPrphKwCmds770kKhnewXuzhKITLMMJJ9iXYZX3vdBvlzANg3X4p5wK1CsjLpcfQ96OCV0juBL+6xVIFd2vawEMvEyl2fg+47xrQpIDroZHR1ZNGDJry5VPMBCusXZfjI83cDf2T2JOCxQSdb1VItAwzelXs8e2Vx5ajif5kvHVGvZLGMI9jrH9PWfsmAepWH9mLrH4mrJ2zYNAkLO7fOpjCHHRirfLA5G8In9usCX8x/Zm8zwHOnnhJr1d4E47rx9b24ncI2ARZClMrVFL9t344dKeZb1yBDL6ua+byl1jLl39vktXq8Ty/ET6+NRwHp84H59sXghPT24vhKcnqRfCw9MetPPs9EHyhfDUQKrhx2WS58GBkw030p/3/nUYBw=="
   },
   "navigation_search_add": {
     "uri": "https://img.mservice.com.vn/app/img/kits/navigation_search_add.png"
@@ -2640,7 +2640,7 @@
     "uri": "https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/16_navigation_close_circle_full.png"
   },
   "16_navigation_close_circle": {
-    "uri": "https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/16_navigation_close_circle.png"
+    "uri": "data:image/webp;base64,UklGRkICAABXRUJQVlA4TDUCAAAvP8APEM8x//M//wzbRlKcvMws3D1DYBwIAASMF4YAQCHQAAED7AAg8AMYB0DhQCMgGAnwAARuAAHcAABsSCQMYAgFAFIhSQDYtJHKzMzMzB3//2mWbdmahaMVR/QfgiS5cZsB4DskKoXzC7H/FklUBov99fENkd/zoJJwTKqzegmDvEIn5Y706CFQEo3Y0dm9m0AL9yIHNC/CSkLTlvhY5+N50q2XslGo+8lZ5w3HrchshMJhWGStRMGrHm0yFuSOArKtYpyqbhWnjgFvdw84tbF+RSfo1x2rGeX1LBlDS5gpLyPcafAvfvoxK4kC/IM4BnjRsxGzFB/gPZh4g6+tjdnDl+b4S1wAfXYgEQzghIkePM1NYsHDeqZUvYFbk24I4NJbWs9ISFqqG+X5NG/Ch3lZE3/AyZG+zjxAtGvs4/27pid6e//R6A6UkZSOjpBUVebCSzWZ93NNCgE3g441SFVWmQqoJvNB4xhI4pXu5JdkqKHwVtRgnNcQQClNmP4P2kJRU9XghLaMAE8qKgNQpphRijTms2SgspRMGKlI44lkqbKXdBmpSOOuJKhcJXVGKtI4SK4qD0mJEWphHEDkqnwlWcYo3jgrCfTQv6H/Cf1B5HG7+D15UyHLW3zdyDurG+R1i75u0tdtRN9o2/SNAqZv0Pct8r5J37fJ5wbyuYV+biKf22znxpb93Eg+t5LPzeRzO/XeQL63UO9NLve2tXlvW4eU672xOliqe+NywInY/4owAA=="
   },
   "16_navigation_close": {
     "uri": "https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/16_navigation_close.png"
@@ -3918,7 +3918,7 @@
     "uri": "https://img.mservice.com.vn/app/img/kits/Phonebook-outline.png"
   },
   "ic_back": {
-    "uri": "https://img.mservice.com.vn/momo_app_v2/new_version/img/appx_icon/ic_back_ios.png"
+    "uri": "data:image/webp;base64,UklGRqIBAABXRUJQVlA4TJYBAAAvX8AXEFVActtIkjT//zRn9WzKYwOJRgQkAADLRtvOtm3btm3b9r1svWzbtm3btu27OHIkN26abK9JbpFIPuE+bAQmFS5c6qcQhrE34CPEZKHr9/kJf0SiUPENfAnNTcj4eH7FaRKiXoGBmyJ4PQILPUGwuwUmtHpgdLFV0RO1461eyDmQ2tsahZYTgY2tGZg54VjcWoabE4aprU1EOaEa3tpHnhOS7q1TNDkhaN66wpQTnKqtOxw5QRVsPeHvLRfSt16J9ZS49UGup/Ctb+o9BW790u/JbeufZU82/jecggWWvy3fnrT8bAX1pORrK7YnKe9byT1RetrKAe2hcqsM7PZwMVEP/h5A/Eb52039I3LfPlL/IUkvkHvA/7q+Lgm+t76u8ikm2/q+cC/37/e1/L5cTGHf1xUH1EX5ui4IqMLv69ID6up4X+AS01se0Ncc0Jcd0Ffm++JgIvxBX9+fS/TnKsHE8O1cqD/XKia+b+Zy/bniAXPRZlAd5ZjmA+bS1WDq51MVI+R2A4tKRx51UL6PD3EB"
   },
   "share": {
     "uri": "https://img.mservice.com.vn/app/img/mini-app-center/share.png"
@@ -3936,7 +3936,7 @@
     "uri": "https://img.mservice.com.vn/app/img/kits/error_mess_icon.png"
   },
   "media_fail": {
-    "uri": "https://static.momocdn.net/app/img/kits/media_fail.png"
+    "uri": "data:image/png;base64,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"
   },
   "ic_checked": {
     "uri": "https://img.mservice.com.vn/app/img/kits/checked_ic.png"

package/Button/index.tsx

@@ -6,7 +6,6 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
-
 import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
@@ -15,6 +14,11 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
+import {formatComponentName} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -70,6 +74,10 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  A callback function that is called when the button is pressed.
    */
   onPress: () => void;
+
+  params?: any;
+
+  componentId?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -82,6 +90,9 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
+  params,
+  componentId,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -94,6 +105,8 @@ const Button: FC<ButtonProps> = ({
       end: {x: 0, y: 0.5},
     };
   }
+
+  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -291,19 +304,34 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      {renderLeading()}
-      {renderTitle()}
-      {renderTrailing()}
-      {gradientPros && (
-        <AnimationLinear {...gradientPros} style={styles.gradientView} />
-      )}
-      {gradientPros && <View style={styles.strokeView} />}
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params,
+        state: loading
+          ? 'loading'
+          : type === 'disabled'
+          ? 'disabled'
+          : 'enabled',
+        componentId,
+        componentValue: formatComponentName(title),
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        {renderLeading()}
+        {renderTitle()}
+        {renderTrailing()}
+        {gradientPros && (
+          <AnimationLinear {...gradientPros} style={styles.gradientView} />
+        )}
+        {gradientPros && <View style={styles.strokeView} />}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/CheckBox/index.tsx

@@ -5,6 +5,11 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import {formatNameLength} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -13,8 +18,11 @@ const CheckBox: FC<CheckBoxProps> = ({
   style,
   label,
   indeterminate,
+  params,
+  componentId,
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
@@ -35,26 +43,38 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <TouchableOpacity
-      activeOpacity={0.8}
-      onPress={() => onChange?.(!value)}
-      disabled={disabled}
-      style={[style, styles.container]}>
-      <View
-        style={[
-          {borderColor, backgroundColor, borderWidth: 1},
-          styles.checkbox,
-        ]}>
-        {haveValue && (
-          <Icon
-            color={theme.colors.background.surface}
-            size={20}
-            source={iconSource}
-          />
-        )}
-      </View>
-      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params,
+        state: disabled ? 'disabled' : 'filled',
+        componentId,
+        action: 'click',
+        componentLabel: formatNameLength(label || ''),
+        componentValue: indeterminate ? 'indetermine' : value,
+      }}>
+      <TouchableOpacity
+        activeOpacity={0.8}
+        onPress={() => onChange?.(!value)}
+        disabled={disabled}
+        style={[style, styles.container]}>
+        <View
+          style={[
+            {borderColor, backgroundColor, borderWidth: 1},
+            styles.checkbox,
+          ]}>
+          {haveValue && (
+            <Icon
+              color={theme.colors.background.surface}
+              size={20}
+              source={iconSource}
+            />
+          )}
+        </View>
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/CheckBox/types.ts

@@ -35,4 +35,8 @@ export type CheckBoxProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
+
+  params?: any
+
+  componentId?: string
 };