@momo-kits/foundation 0.157.5-beta.1 → 0.158.1-beta.2

package/Application/ModalScreen.tsx

@@ -11,7 +11,7 @@ import {
   View,
 } from 'react-native';
 
-import { ApplicationContext } from '../Context';
+import { ApplicationContext, MiniAppContext } from '../Context';
 import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
@@ -27,13 +27,29 @@ const ModalScreen: React.FC<any> = props => {
 
 const Modal: React.FC<ModalParams> = props => {
   const { navigator } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
   const {
     screen,
     barrierDismissible,
     modalStyle,
     useNativeModal = false,
+    description,
+    title,
   } = props.route.params;
   const Component = useRef(screen).current;
+
+  /**
+   * Fire auto_popup_displayed tracking event on mount
+   */
+  useEffect(() => {
+    context.autoTracking({
+      componentName: 'Modal',
+      description,
+      title,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const opacity = useRef(new Animated.Value(0)).current;
   const scale = useRef(new Animated.Value(0.8)).current;
 

package/Application/StackScreen.tsx

@@ -7,7 +7,7 @@ import { ApplicationContext, MiniAppContext, ScreenContext } from '../Context';
 import { GridSystem } from '../Layout';
 import { version } from '../package.json';
 import { useAppState } from './utils';
-import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal.tsx';
+import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 

package/Popup/PopupPromotion.tsx

@@ -92,7 +92,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    aspectRatio: 0.72, // 9:16
+    aspectRatio: 0.5625, // 9:16
     width: '100%',
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },

package/ViewBoundary/index.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { NativeModules, ViewStyle, StyleProp } from 'react-native';
+import { MiniAppContext } from '../Context';
+
+export interface ViewBoundaryProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  fallbackStyle?: StyleProp<ViewStyle>;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface ViewBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ViewBoundary extends React.Component<
+  ViewBoundaryProps,
+  ViewBoundaryState
+> {
+  static contextType = MiniAppContext;
+
+  constructor(props: ViewBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ViewBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.props.onError?.(error, errorInfo);
+
+    const context = (this as any).context ?? {};
+    // check exist native module method onJSBoundaryCrash
+    const nativeMethod = NativeModules?.MiniAppModule?.onJSBoundaryCrash;
+    if (typeof nativeMethod === 'function') {
+      try {
+        nativeMethod({
+          hostId: context.hostId ?? '',
+          appId: context.appId ?? '',
+          code: context.code ?? '',
+          buildNumber: context.buildNumber ?? '',
+          tag: 'ViewBoundary',
+          error: {
+            errorName: error.name,
+            errorMessage: error.message,
+            componentStack: errorInfo?.componentStack?.substring(0, 500) ?? '',
+          },
+        });
+        console.info('[ViewBoundary] onJSBoundaryCrash success!');
+      } catch (_e) {
+        console.warn('[ViewBoundary] onJSBoundaryCrash failed:', _e);
+      }
+    } else {
+      console.warn(
+        '[ViewBoundary] onJSBoundaryCrash not available on this platform build',
+      );
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback !== undefined) {
+        return this.props.fallback;
+      }
+      return null;
+    }
+    return this.props.children;
+  }
+}
+
+export { ViewBoundary };

package/index.ts

@@ -47,4 +47,5 @@ export * from './Badge';
 export * from './Badge/types';
 export * from './FoundationList';
 export * from './FoundationList/types';
+export * from './ViewBoundary';
 export { TouchableOpacity };

package/package.json

@@ -1,35 +1,35 @@
 {
-    "name": "@momo-kits/foundation",
-    "version": "0.157.5-beta.1",
-    "description": "React Native Component Kits",
-    "main": "index.ts",
-    "scripts": {},
-    "keywords": [
-        "@momo-kits/foundation"
-    ],
-    "dependencies": {
-        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-        "@react-navigation/bottom-tabs": "7.4.2",
-        "@react-navigation/core": "7.12.1",
-        "@react-navigation/elements": "2.5.2",
-        "@react-navigation/native": "7.1.14",
-        "@react-navigation/routers": "7.4.1",
-        "@react-navigation/stack": "7.4.2",
-        "react-native-gesture-handler": "2.27.1",
-        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-        "react-native-reanimated": "4.1.0",
-        "react-native-safe-area-context": "5.5.2",
-        "@shopify/flash-list": "2.1.0",
-        "lottie-react-native": "7.2.4"
-    },
-    "peerDependencies": {
-        "react-native": "*"
-    },
-    "devDependencies": {
-        "@types/color": "3.0.6"
-    },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "license": "MoMo"
-}
+  "name": "@momo-kits/foundation",
+  "version": "0.158.1-beta.2",
+  "description": "React Native Component Kits",
+  "main": "index.ts",
+  "scripts": {},
+  "keywords": [
+    "@momo-kits/foundation"
+  ],
+  "dependencies": {
+    "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
+    "@react-navigation/bottom-tabs": "7.4.2",
+    "@react-navigation/core": "7.12.1",
+    "@react-navigation/elements": "2.5.2",
+    "@react-navigation/native": "7.1.14",
+    "@react-navigation/routers": "7.4.1",
+    "@react-navigation/stack": "7.4.2",
+    "react-native-gesture-handler": "2.27.1",
+    "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
+    "react-native-reanimated": "4.1.0",
+    "react-native-safe-area-context": "5.5.2",
+    "@shopify/flash-list": "2.1.0",
+    "lottie-react-native": "7.2.4"
+  },
+  "peerDependencies": {
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@types/color": "3.0.6"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MoMo"
+}