@momo-kits/foundation 0.81.3 → 0.81.5-beta.1

package/Application/NavigationContainer.tsx

@@ -23,6 +23,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  miniAppInfo,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
@@ -73,6 +74,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             showGrid,
             language,
             translate,
+            appInfo: miniAppInfo,
           }}>
           <ReactNavigationContainer
             theme={{

package/Application/StackScreen.tsx

@@ -1,12 +1,18 @@
-import React, {useContext, useLayoutEffect} from 'react';
+import React, {useContext, useEffect, useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 
+const TRIGGER_ID = '111378000000000000';
+
 const StackScreen: React.FC<ScreenParams> = props => {
-  const {screen: Component, options}: ScreenParams = props.route.params;
-  const {theme, showGrid} = useContext(ApplicationContext);
+  const {
+    screen: Component,
+    options,
+    tracking,
+  }: ScreenParams = props.route.params;
+  const {theme, showGrid, navigator, appInfo} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
 
   const params = {
@@ -16,6 +22,25 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   delete params.screen;
 
+  const navigationRoutes = props.navigation.getState()?.routes || [];
+  const routesLength = navigationRoutes.length;
+  let pre_screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+  if (routesLength > 1) {
+    pre_screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
+  }
+
+  useEffect(() => {
+    if (appInfo) {
+      navigator?.maxApi?.trackEvent('service_frame_displayed', {
+        ...appInfo,
+        screen_name: Component.name,
+        flow_partner_id: tracking?.flow_partner_id,
+        pre_screen_name,
+        trigger_id: TRIGGER_ID,
+      });
+    }
+  }, []);
+
   useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);

package/Application/types.ts

@@ -68,6 +68,7 @@ export type Context = {
   showGrid?: boolean;
   language?: 'vi' | 'en';
   translate?: (key: string) => string;
+  appInfo: MiniAppInfo;
 };
 
 export type LocalizationObject = {
@@ -79,12 +80,19 @@ export type LocalizationObject = {
   };
 };
 
+export type MiniAppInfo = {
+  feature_code: string;
+  app_id: string;
+  miniapp_version: number;
+};
+
 export type NavigationContainerProps = {
   screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
-  maxApi?: any;
+  maxApi: any;
   localization?: LocalizationObject;
+  miniAppInfo: MiniAppInfo;
 };
 
 export type NavigationScreenProps = {
@@ -97,6 +105,7 @@ export type ScreenParams = {
   [key: string]: any;
   screen: Screen;
   options?: NavigationOptions;
+  tracking?: any;
 };
 
 export interface ModalParams extends ScreenParams {
@@ -125,9 +134,7 @@ export interface NavigationOptions extends StackNavigationOptions {
   onPressLeftHeader?: () => void;
   surface?: boolean;
   hiddenBack?: boolean;
-  headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
-  animatedValue?: Animated.Value;
 }
 
 export interface HeaderBackProps extends NavigationButtonProps {

package/Layout/ItemList.tsx

@@ -2,11 +2,13 @@ import React, {FC, ReactElement, useContext} from 'react';
 import {FlatList, FlatListProps, View} from 'react-native';
 import Item from './Item';
 import {GridContext} from './index';
+import styles from './styles';
 
 const ItemList: FC<FlatListProps<any>> = ({
   renderItem,
   numColumns = 1,
   style,
+  contentContainerStyle,
   ...props
 }) => {
   const {gutterSize} = useContext(GridContext);
@@ -43,21 +45,8 @@ const ItemList: FC<FlatListProps<any>> = ({
       renderItem={_renderItem}
       horizontal={false}
       ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
-      style={[
-        style,
-        {
-          marginTop: undefined,
-          marginBottom: undefined,
-          marginLeft: undefined,
-          marginRight: undefined,
-          paddingTop: undefined,
-          paddingBottom: undefined,
-          paddingLeft: undefined,
-          paddingRight: undefined,
-          padding: undefined,
-          margin: undefined,
-        },
-      ]}
+      style={[style, styles.protectedStyle]}
+      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
     />
   );
 };

package/Layout/Screen.tsx

@@ -1,6 +1,5 @@
 import {
   Animated,
-  Image,
   KeyboardAvoidingView,
   NativeScrollEvent,
   NativeSyntheticEvent,
@@ -28,6 +27,7 @@ import {
 import Navigation from '../Application/Navigation';
 import styles from './styles';
 import {AnimatedHeader, NavigationOptions} from '../Application/types';
+import {Image} from '../Image';
 
 export interface ScreenProps extends ViewProps {
   children: React.ReactNode;
@@ -259,6 +259,7 @@ const Screen = forwardRef(
                 uri: headerBackground,
               }}
               style={styles.extendedHeader}
+              loading={false}
             />
             <View style={{height: heightHeader}} />
           </>

package/Layout/styles.ts

@@ -77,4 +77,20 @@ export default StyleSheet.create({
     right: 0,
     borderRadius: Spacing.M,
   },
+  protectedStyle: {
+    marginTop: undefined,
+    marginBottom: undefined,
+    marginLeft: undefined,
+    marginRight: undefined,
+    paddingTop: undefined,
+    paddingBottom: undefined,
+    paddingLeft: undefined,
+    paddingRight: undefined,
+    padding: undefined,
+    margin: undefined,
+    marginHorizontal: undefined,
+    marginVertical: undefined,
+    paddingHorizontal: undefined,
+    paddingVertical: undefined,
+  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.3",
+    "version": "0.81.5-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -42,4 +42,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}