@momo-kits/foundation 0.112.1-rn76.7 → 0.113.0-optimize.1

package/Application/BottomSheet.tsx

@@ -16,7 +16,7 @@ import {BottomSheetParams} from './types';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {useHeaderHeight} from '@react-navigation/elements';
+import {useHeaderHeight} from '@react-navigation/stack';
 import Animated, {Easing, Extrapolate} from 'react-native-reanimated';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
@@ -82,7 +82,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           }).start();
         }
       },
-    }),
+    })
   ).current;
 
   let Container: any = View;

package/Application/BottomTab/index.tsx

@@ -1,11 +1,7 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {
-  NavigationContainer,
-  NavigationIndependentTree,
-  useFocusEffect,
-} from '@react-navigation/native';
+import {NavigationContainer, useFocusEffect} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
-import React, {useContext, useEffect, useRef} from 'react';
+import React, {useContext, useEffect} from 'react';
 import {Animated, Platform, StatusBar} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Colors} from '../../Consts';
@@ -15,7 +11,7 @@ import {ApplicationContext} from '../index';
 import StackScreen from '../StackScreen';
 import {BottomTabProps} from '../types';
 import {getOptions, getStackOptions} from '../utils';
-// import BottomTabBar from './BottomTabBar';
+import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -25,19 +21,18 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
-
-  const opacity = useRef(new Animated.Value(opacityValue));
-  const scale = useRef(new Animated.Value(scaleValue));
+  const opacity = new Animated.Value(opacityValue);
+  const scale = new Animated.Value(scaleValue);
 
   useFocusEffect(
     React.useCallback(() => {
       Animated.parallel([
-        Animated.timing(opacity.current, {
+        Animated.timing(opacity, {
           toValue: 1,
           duration: 200,
           useNativeDriver: true,
         }),
-        Animated.timing(scale.current, {
+        Animated.timing(scale, {
           toValue: 1,
           duration: 200,
           useNativeDriver: true,
@@ -46,12 +41,12 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
       return () => {
         if (navigation.getState().index !== route?.params.index) {
           Animated.parallel([
-            Animated.timing(opacity.current, {
+            Animated.timing(opacity, {
               toValue: opacityValue,
               duration: 200,
               useNativeDriver: true,
             }),
-            Animated.timing(scale.current, {
+            Animated.timing(scale, {
               toValue: scaleValue,
               duration: 200,
               useNativeDriver: true,
@@ -59,7 +54,7 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
           ]).start();
         }
       };
-    }, [navigation, route?.params.index]),
+    }, [navigation])
   );
 
   let stackOptions = {};
@@ -69,12 +64,7 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
 
   if (nested) {
     return (
-      <Animated.View
-        style={{
-          flex: 1,
-          opacity: opacity.current,
-          transform: [{scale: scale.current}],
-        }}>
+      <Animated.View style={{flex: 1, opacity, transform: [{scale}]}}>
         <Stack.Navigator>
           <Stack.Screen
             name="Stack"
@@ -92,28 +82,21 @@ const TabScreen: React.FC<any> = ({route, navigation}) => {
   }
 
   return (
-    <Animated.View
-      style={{
-        flex: 1,
-        opacity: opacity.current,
-        transform: [{scale: scale.current}],
-      }}>
-      <NavigationIndependentTree>
-        <NavigationContainer>
-          <Stack.Navigator>
-            <Stack.Screen
-              name="Stack"
-              component={StackScreen}
-              initialParams={{
-                screen,
-                options: stackOptions,
-                initialParams,
-              }}
-              options={{...getStackOptions(), ...options}}
-            />
-          </Stack.Navigator>
-        </NavigationContainer>
-      </NavigationIndependentTree>
+    <Animated.View style={{flex: 1, opacity, transform: [{scale}]}}>
+      <NavigationContainer independent={true}>
+        <Stack.Navigator>
+          <Stack.Screen
+            name="Stack"
+            component={StackScreen}
+            initialParams={{
+              screen,
+              options: stackOptions,
+              initialParams,
+            }}
+            options={{...getStackOptions(), ...options}}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
     </Animated.View>
   );
 };
@@ -126,7 +109,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
   initialRouteName,
   floatingButton,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const {theme, navigator} = useContext(ApplicationContext);
   const insets = useSafeAreaInsets();
 
   useEffect(() => {
@@ -135,7 +118,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
       headerTransparent: true,
       headerBackground: undefined,
     });
-  }, [navigation]);
+  }, []);
 
   const handler: {
     tabPress?: (e: any) => void;
@@ -144,6 +127,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
     state?: (e: any) => void;
   } = {
     tabPress: e => {
+      navigator?.maxApi?.triggerEventVibration?.('light');
       listeners?.tabPress?.(e);
     },
     focus: e => {
@@ -159,13 +143,13 @@ const BottomTab: React.FC<BottomTabProps> = ({
     <Tab.Navigator
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
-      // tabBar={props => (
-      //   <BottomTabBar
-      //     {...props}
-      //     floatingButton={floatingButton}
-      //     inactiveTintColor={theme.colors.text.hint}
-      //   />
-      // )}
+      tabBar={props => (
+        <BottomTabBar
+          {...props}
+          floatingButton={floatingButton}
+          inactiveTintColor={theme.colors.text.hint}
+        />
+      )}
       tabBarOptions={{
         style: {
           height: 64 + Math.min(insets.bottom, 21),

package/Application/NavigationContainer.tsx

@@ -1,10 +1,8 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
-import type {NavigationState} from '@react-navigation/routers';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
   NavigationContainerRef,
-  NavigationIndependentTree,
 } from '@react-navigation/native';
 import {
   createStackNavigator,
@@ -18,7 +16,7 @@ import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {NavigationContainerProps} from './types';
 import {ApplicationContext, MiniAppContext} from './index';
 import Localize from './Localize';
-import {Configs, defaultTheme} from '../Consts';
+import {defaultTheme} from '../Consts';
 
 const Stack = createStackNavigator();
 
@@ -31,13 +29,23 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   localize = new Localize({vi: {}, en: {}}),
 }) => {
   const context = useContext<any>(MiniAppContext);
-  const navigationRef = useRef<NavigationContainerRef<any>>(null);
+  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);
   const [currentContext, setCurrentContext] = useState({});
 
+  let headerBackground = context?.designConfig?.headerBar;
+  let headerGradient = theme.colors?.gradient;
+
+  if (theme.assets?.headerBackground) {
+    headerBackground = theme.assets?.headerBackground;
+  }
+  if (context?.designConfig?.headerGradient) {
+    headerGradient = context?.designConfig?.headerGradient;
+  }
+
   /**
    * inject data for navigator
    */
@@ -52,7 +60,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       'onChangeGrid',
       enable => {
         setShowGrid(!!enable);
-      },
+      }
     );
 
     return () => {
@@ -60,10 +68,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
-  /**
-   * translate context method
-   * @param data
-   */
   const translate = (data?: string | {vi: string; en: string}) => {
     if (data && typeof data !== 'string') {
       return localize?.translateData(data);
@@ -80,7 +84,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const onScreenNavigated = (
     preScreenName: string,
     screenName: string,
-    action: string,
+    action: string
   ) => {
     console.log(preScreenName, screenName, action);
     context?.autoTracking?.({
@@ -92,6 +96,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       action,
     });
 
+    /**
+     * debug toast
+     */
     maxApi?.showToastDebug?.({
       appId: context.appId,
       message: `${screenName} screen_navigated`,
@@ -99,46 +106,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     });
   };
 
-  /**
-   * onStateChange
-   * @param state
-   */
-  const onStateChange = (state: Readonly<NavigationState> | undefined) => {
-    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;
-  };
-
-  /**
-   * onReady
-   */
-  const 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,
-      });
-    });
-  };
-
   navigator.current.setCurrentContext = setCurrentContext;
 
-  const headerBackground = theme.assets?.headerBackground || Configs.headerBar;
-  const headerGradient = Configs?.headerGradient || theme.colors?.gradient;
-
   return (
     <SafeAreaProvider>
       <MiniAppContext.Provider
@@ -163,69 +132,72 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             showGrid,
             translate,
           }}>
-          <NavigationIndependentTree>
-            <ReactNavigationContainer
-              theme={{
-                dark: false,
-                colors: {
-                  primary: theme.colors.primary,
-                  background: theme.colors.background.default,
-                  card: theme.colors.background.surface,
-                  text: theme.colors.text.default,
-                  border: theme.colors.border.default,
-                  notification: theme.colors.error.primary,
-                },
-                fonts: {
-                  regular: {
-                    fontFamily: 'SFProText',
-                    fontWeight: '400',
-                  },
-                  medium: {
-                    fontFamily: 'SFProText',
-                    fontWeight: '400',
-                  },
-                  bold: {
-                    fontFamily: 'SFProText',
-                    fontWeight: '400',
-                  },
-                  heavy: {
-                    fontFamily: 'SFProText',
-                    fontWeight: '400',
-                  },
-                },
-              }}
-              ref={navigationRef}
-              onReady={onReady}
-              onStateChange={onStateChange}>
-              <Stack.Navigator
-                initialRouteName="Stack"
-                screenOptions={{
-                  headerMode: 'screen',
-                }}>
-                <Stack.Screen
-                  name="Stack"
-                  component={StackScreen}
-                  initialParams={{screen, initialParams}}
-                  options={{
-                    ...getStackOptions(),
-                    ...(options as StackNavigationOptions),
-                  }}
-                />
-                <Stack.Screen
-                  name="Dialog"
-                  component={StackScreen}
-                  options={getDialogOptions()}
-                  initialParams={{screen}}
-                />
-                <Stack.Screen
-                  name="Modal"
-                  component={ModalScreen}
-                  options={getModalOptions()}
-                  initialParams={{screen}}
-                />
-              </Stack.Navigator>
-            </ReactNavigationContainer>
-          </NavigationIndependentTree>
+          <ReactNavigationContainer
+            theme={{
+              ...theme,
+              colors: {
+                ...theme.colors,
+                background: theme.colors.background.default,
+                card: theme.colors.background.surface,
+                text: theme.colors.text.default,
+                border: theme.colors.border.default,
+                notification: theme.colors.error.primary,
+              },
+            }}
+            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">
+              <Stack.Screen
+                name="Stack"
+                component={StackScreen}
+                initialParams={{screen, initialParams}}
+                options={{
+                  ...getStackOptions(),
+                  ...(options as StackNavigationOptions),
+                }}
+              />
+              <Stack.Screen
+                name="Dialog"
+                component={StackScreen}
+                options={getDialogOptions()}
+                initialParams={{screen}}
+              />
+              <Stack.Screen
+                name="Modal"
+                component={ModalScreen}
+                options={getModalOptions()}
+                initialParams={{screen}}
+              />
+            </Stack.Navigator>
+          </ReactNavigationContainer>
         </ApplicationContext.Provider>
       </MiniAppContext.Provider>
     </SafeAreaProvider>

package/Application/StackScreen.tsx

@@ -1,11 +1,11 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
+import {useHeaderHeight} from '@react-navigation/stack';
 import {Alert, InteractionManager} from 'react-native';
-import {useHeaderHeight} from '@react-navigation/elements';
-import {ScreenParams} from './types';
+import {ScreenParams, ScreenTrackingParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
-
+import {version} from '../package.json';
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
 /**
@@ -28,6 +28,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
     timeLoad: 0,
     timeInteraction: 0,
     widgets: [],
+    params: undefined,
   });
   const widgets = useRef<any>([]);
   const context = useContext<any>(MiniAppContext);
@@ -77,14 +78,14 @@ const StackScreen: React.FC<ScreenParams> = props => {
       context,
       (data: any) => {
         tracking.current.traceIdLoad = data?.traceId;
-      },
+      }
     );
     navigator?.maxApi?.startTraceScreenInteraction?.(
       screenName,
       context,
       (data: any) => {
         tracking.current.traceIdInteraction = data?.traceId;
-      },
+      }
     );
 
     tracking.current.timeoutTracking = setTimeout(() => {
@@ -117,11 +118,13 @@ const StackScreen: React.FC<ScreenParams> = props => {
         state: 'load',
         duration: timeLoad,
         widgets: tracking.current.widgets,
+        params: tracking.current.params,
+        version: version,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdLoad,
         {value: timeLoad / 1000},
-        null,
+        null
       );
       tracking.current.releaseLoad = true;
 
@@ -139,7 +142,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
       ) {
         Alert.alert(
           `${screenName}- load ${timeLoad}ms`,
-          JSON.stringify(lastElement.current?.children?.current),
+          JSON.stringify(lastElement.current?.children?.current)
         );
       }
     }
@@ -165,11 +168,13 @@ const StackScreen: React.FC<ScreenParams> = props => {
         state: 'interaction',
         duration: tracking.current.timeInteraction - timeLoad,
         totalDuration: tracking.current.timeInteraction,
+        params: tracking.current.params,
+        version: version,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdInteraction,
         {value: tracking.current.timeInteraction / 1000},
-        null,
+        null
       );
       tracking.current.releaseInteraction = true;
 
@@ -254,6 +259,9 @@ const StackScreen: React.FC<ScreenParams> = props => {
             onScreenInteraction();
           }, 2000);
         },
+        onSetParams: (data: ScreenTrackingParams) => {
+          tracking.current.params = data;
+        },
       }}>
       <Component heightHeader={heightHeader} {...data} />
       {showGrid && <GridSystem />}

package/Application/index.ts

@@ -16,15 +16,17 @@ import {setAutomationID} from './utils';
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
 
-const MiniAppContext = (Platform as any).MiniAppContext ?? createContext({});
-const ScreenContext = (Platform as any).ScreenContext ?? createContext({});
+const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
+const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
+const SkeletonContext = createContext({loading: false});
 
 export {
   ApplicationContext,
   MiniAppContext,
   ScreenContext,
   ComponentContext,
+  SkeletonContext,
   NavigationContainer,
   Localize,
   HeaderTitle,

package/Application/types.ts

@@ -117,6 +117,11 @@ export type ScreenParams = {
   options?: NavigationOptions;
 };
 
+export type ScreenTrackingParams = {
+  value1?: any;
+  value2?: any;
+};
+
 export type ModalParams = {
   [key: string]: any;
   screen: React.ComponentType;

package/Button/index.tsx

@@ -7,13 +7,18 @@ import {
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext, ComponentContext} from '../Application';
+import {
+  ApplicationContext,
+  ComponentContext,
+  SkeletonContext,
+} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
+import {Skeleton} from '../Skeleton';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -88,6 +93,7 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
+  const skeleton = useContext(SkeletonContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
   let state = 'enabled';
@@ -289,6 +295,10 @@ const Button: FC<ButtonProps> = ({
     full && {width: '100%'},
   ]);
 
+  if (skeleton?.loading) {
+    return <Skeleton style={[buttonStyle, {paddingHorizontal: 0}]} />;
+  }
+
   return (
     <ComponentContext.Provider
       value={{

package/Consts/colors+spacing+radius.ts

@@ -229,34 +229,4 @@ const Shadow = {
   }),
 };
 
-const Configs = {
-  headerGradient: undefined,
-  headerBar: undefined,
-  trustBanner: {
-    content: {
-      vi: 'Bảo mật thông tin & An toàn tài sản của bạn là ưu tiên hàng đầu của MoMo.',
-      en: "Your data security and money safety are MoMo's top priorities.",
-    },
-    subContent: {
-      vi: 'Tìm hiểu thêm',
-      en: 'Learn more',
-    },
-    pciImage: 'https://static.momocdn.net/app/img/kits/trustBanner/pci_dss.png',
-    sslImage: 'https://static.momocdn.net/app/img/kits/trustBanner/ssl.png',
-    momoImage:
-      'https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png',
-    urlConfig: 'login_and_security',
-    icons: [
-      'https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png',
-      'https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png',
-      'https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png',
-      'https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png',
-    ],
-    titleWeb: {
-      vi: 'Thông tin',
-      en: 'Information',
-    },
-  },
-};
-
-export {Colors, Spacing, Radius, Shadow, Configs};
+export {Colors, Spacing, Radius, Shadow};

package/Image/index.tsx

@@ -2,7 +2,7 @@ import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, SkeletonContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
@@ -19,6 +19,7 @@ const Image: React.FC<ImageProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const skeleton = useContext(SkeletonContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
@@ -43,6 +44,15 @@ const Image: React.FC<ImageProps> = ({
         </View>
       );
     }
+
+    if (skeleton.loading) {
+      return (
+        <View style={[StyleSheet.absoluteFill, Styles.flexCenter]}>
+          <Skeleton />
+        </View>
+      );
+    }
+
     return children;
   };
 

package/Layout/Screen.tsx

@@ -1,5 +1,4 @@
-import {StackNavigationOptions} from '@react-navigation/stack';
-import {useHeaderHeight} from '@react-navigation/elements';
+import {StackNavigationOptions, useHeaderHeight} from '@react-navigation/stack';
 import React, {
   forwardRef,
   Fragment,
@@ -24,11 +23,12 @@ import {
   ViewProps,
 } from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ScreenContext} from '../Application';
 import Navigation from '../Application/Navigation';
 import {
   AnimatedHeader,
   NavigationOptions,
+  ScreenTrackingParams,
   SearchHeaderProps,
 } from '../Application/types';
 import {Colors, Spacing, Styles} from '../Consts';
@@ -149,6 +149,11 @@ export interface ScreenProps extends ViewProps {
    * Optional. Custom headerBackground Image
    */
   headerBackground?: string;
+
+  /**
+   * Optional. Custom tracking params
+   */
+  trackingParams?: ScreenTrackingParams;
 }
 
 const Screen = forwardRef(
@@ -175,15 +180,17 @@ const Screen = forwardRef(
       animatedValue: customAnimatedValue,
       headerBackground,
       gradientColor,
+      trackingParams,
     }: ScreenProps,
-    ref: any,
+    ref: any
   ) => {
     const screenRef = useRef<View | ScrollView>();
     const {theme} = useContext(ApplicationContext);
+    const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const animatedValue = useRef<Animated.Value>(
-      customAnimatedValue || new Animated.Value(0),
+      customAnimatedValue || new Animated.Value(0)
     );
     const currentTint = useRef<string | undefined>(undefined);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';
@@ -196,6 +203,11 @@ const Screen = forwardRef(
       keyboardOffset = -Math.min(insets.bottom, 21);
     }
 
+    /**
+     * inject params for screen tracking
+     */
+    screen?.onSetParams?.(trackingParams);
+
     /**
      * export options for screen
      * @param headerType
@@ -424,7 +436,7 @@ const Screen = forwardRef(
               }
             }
           },
-        },
+        }
       );
     }
 
@@ -574,7 +586,7 @@ const Screen = forwardRef(
         </KeyboardAvoidingView>
       </View>
     );
-  },
+  }
 );
 
 export default Screen;

package/Layout/index.ts

@@ -7,7 +7,6 @@ import {GridContextProps} from './types';
 import Item from './Item';
 import ItemList from './ItemList';
 import ItemSectionList from './ItemSectionList';
-import Screen from './Screen';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
@@ -25,5 +24,4 @@ export {
   Item,
   ItemList,
   ItemSectionList,
-  Screen,
 };

package/Skeleton/index.tsx

@@ -1,9 +1,18 @@
 import React, {useEffect, useMemo, useRef, useState} from 'react';
-import {Animated, Easing, Platform, StyleSheet, View} from 'react-native';
+import {
+  Animated,
+  Easing,
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  UIManager,
+  View,
+} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {SkeletonTypes} from './types';
 import {Colors, Styles} from '../Consts';
 import styles from './styles';
+import {SkeletonContext} from '../Application';
 
 const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
   const [width, setWidth] = useState(0);
@@ -24,7 +33,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
         duration: 1000,
         easing: Easing.linear,
         useNativeDriver: Platform.OS !== 'web',
-      }),
+      })
     );
   }, [beginShimmerPosition]);
 
@@ -69,4 +78,50 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
   );
 };
 
-export {Skeleton};
+/**
+ * SkeletonProvider component provides a context for managing the loading state
+ * and applies a layout animation when the loading state changes.
+ *
+ * @param {boolean} loading - Indicates whether the skeleton loading state is active.
+ * @param {React.ReactNode} children - The child components to be rendered within the provider.
+ *
+ * @example
+ * <SkeletonProvider loading={true}>
+ *   <YourComponent />
+ * </SkeletonProvider>
+ *
+ * The layout animation is configured using LayoutAnimation.configureNext, which animates the opacity of the components over 500 milliseconds with an ease-in-ease-out effect.
+ */
+
+const SkeletonProvider: React.FC<{loading: boolean}> = ({
+  loading = true,
+  children,
+}) => {
+  const [previous, setPrevious] = useState(loading);
+
+  useEffect(() => {
+    if (previous !== loading) {
+      if (Platform.OS === 'android') {
+        if (UIManager.setLayoutAnimationEnabledExperimental) {
+          UIManager.setLayoutAnimationEnabledExperimental(true);
+        }
+      }
+      LayoutAnimation.configureNext({
+        duration: 500,
+        create: {
+          type: LayoutAnimation.Types.easeInEaseOut,
+          property: LayoutAnimation.Properties.opacity,
+        },
+      });
+      setPrevious(loading);
+    }
+  }, [loading]);
+
+  return (
+    <SkeletonContext.Provider value={{loading: previous}}>
+      {children}
+    </SkeletonContext.Provider>
+  );
+};
+
+export {Skeleton, SkeletonProvider};

package/Text/index.tsx

@@ -1,9 +1,14 @@
 import React, {useContext} from 'react';
-import {Text as RNText, TextProps as RNTextProps} from 'react-native';
+import {Text as RNText, TextProps as RNTextProps, View} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
-import {ApplicationContext, setAutomationID} from '../Application';
+import {
+  ApplicationContext,
+  setAutomationID,
+  SkeletonContext,
+} from '../Application';
 import {scaleSize} from './utils';
+import {Skeleton} from '../Skeleton';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -125,7 +130,7 @@ const Text: React.FC<TextProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-
+  const skeleton = useContext(SkeletonContext);
   const textStyle = getTypoStyle(typography, fontFamily);
 
   if (deprecatedValues.includes(typography)) {
@@ -134,6 +139,25 @@ const Text: React.FC<TextProps> = ({
     );
   }
 
+  if (skeleton.loading) {
+    return (
+      <View style={style}>
+        <RNText
+          {...rest}
+          allowFontScaling={false}
+          style={[
+            textStyle,
+            {
+              color: color ?? theme.colors.text.default,
+            },
+          ]}>
+          {children ?? ''}
+        </RNText>
+        <Skeleton style={{position: 'absolute'}} />
+      </View>
+    );
+  }
+
   return (
     <RNText
       {...rest}

package/index.ts

@@ -49,3 +49,10 @@ export * from './Title';
 export * from './Title/types';
 export * from './Badge';
 export * from './Badge/types';
+
+/**
+ * export trick for keep old mini app working
+ * @deprecated
+ */
+export * from 'react-native-modalize';
+export * from '@gorhom/bottom-sheet';

package/package.json

@@ -1,35 +1,50 @@
 {
-    "name": "@momo-kits/foundation",
-    "version": "0.112.1-rn76.7",
-    "description": "React Native Component Kits",
-    "main": "index.ts",
-    "scripts": {},
-    "keywords": [
-        "@momo-kits/foundation"
-    ],
-    "dependencies": {
-        "react-native-safe-area-context": "5.1.0",
-        "react-native-linear-gradient": "2.8.3",
-        "react-native-gesture-handler": "2.22.0",
-        "react-native-fast-image": "8.6.3",
-        "react-native-reanimated": "3.16.7",
-        "lottie-react-native": "7.2.2",
-        "@react-navigation/bottom-tabs": "7.2.0",
-        "@react-navigation/core": "7.3.1",
-        "@react-navigation/native": "7.0.14",
-        "@react-navigation/routers": "7.1.2",
-        "@react-navigation/stack": "7.1.1",
-        "@react-navigation/elements": "2.2.5"
-    },
-    "peerDependencies": {
-        "react-native": "*"
-    },
-    "devDependencies": {
-        "@momo-platform/versions": "4.1.11",
-        "@types/color": "3.0.6"
-    },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "license": "MoMo"
-}
+  "name": "@momo-kits/foundation",
+  "version": "0.113.0-optimize.1",
+  "description": "React Native Component Kits",
+  "main": "index.ts",
+  "scripts": {},
+  "keywords": [
+    "@momo-kits/foundation"
+  ],
+  "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-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"
+  },
+  "peerDependencies": {
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/runtime": "^7.12.5",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@types/jest": "26.0.23",
+    "@types/react-native": "0.64.4",
+    "@types/react-test-renderer": "16.9.2",
+    "@types/d3-shape": "1.3.7",
+    "babel-jest": "^26.6.3",
+    "eslint": "^7.14.0",
+    "jest": "^26.6.3",
+    "metro-react-native-babel-preset": "^0.64.0",
+    "react-test-renderer": "17.0.1",
+    "typescript": "^4.0.3",
+    "@momo-platform/versions": "4.1.11",
+    "react-scanner": "^1.1.0",
+    "@types/color": "3.0.6"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MoMo"
+}

package/publish.sh

@@ -2,16 +2,16 @@
 
 
 if [ "$1" == "stable" ]; then
-  #npm version $(npm view @momo-kits/foundation@stable version)
-  #npm version patch
+  npm version $(npm view @momo-kits/foundation@stable version)
+  npm version patch
   npm publish --tag stable --access=public
 elif [ "$1" == "latest" ]; then
-  #npm version $(npm view @momo-kits/foundation@latest version)
-  #npm version prerelease --preid=rc
+  npm version $(npm view @momo-kits/foundation@latest version)
+  npm version prerelease --preid=rc
   npm publish --tag latest --access=public
 else
-  #npm version $(npm view @momo-kits/foundation@beta version)
-  #npm version prerelease --preid=beta
+  npm version $(npm view @momo-kits/foundation@beta version)
+  npm version prerelease --preid=beta
   npm publish --tag beta --access=public
 fi
 PACKAGE_NAME=$(npm pkg get name)