@momo-kits/foundation 0.157.3-beta.25 → 0.158.1-beta.1

package/Application/BottomSheet.tsx

@@ -29,7 +29,6 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import layoutStyles from '../Layout/styles';
-import { version } from '../package.json';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
@@ -55,40 +54,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     useDivider = true,
     footerComponent,
     leftOptions,
-    screen_name,
-    componentName,
-    componentLabel,
-    description,
-    title,
-  } = props as BottomSheetParams;
+  }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
 
-  /**
-   * Fire auto_popup_displayed tracking event on mount
-   */
-  useEffect(() => {
-    if (typeof context?.autoTracking !== 'function') {
-      return;
-    }
-
-    context.autoTracking({
-      ...context,
-      eventName: 'auto_popup_displayed',
-      screen_name: screen_name ?? context.screenName,
-      miniapp_version: context.miniapp_version,
-      tracking_source: 1,
-      app_id: context.appId,
-      feature_code: context.feature_code,
-      kits_version: version,
-      component_name: componentName,
-      component_label: componentLabel,
-      description,
-      title,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const openAnimation = useCallback(() => {
     translateY.value = withTiming(0, {
       duration: 350,

package/Application/ModalScreen.tsx

@@ -17,7 +17,6 @@ import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
 import { runOnJS } from 'react-native-reanimated';
-import { version } from '../package.json';
 
 const ModalScreen: React.FC<any> = props => {
   if (props.route?.params?.isBottomSheet) {
@@ -29,29 +28,14 @@ const ModalScreen: React.FC<any> = props => {
 const Modal: React.FC<ModalParams> = props => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
+  const modalParams = useRef<any>(undefined);
   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({
-      eventName: 'auto_popup_displayed',
-      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;
 
@@ -66,6 +50,28 @@ const Modal: React.FC<ModalParams> = props => {
     Container = ModalRN;
   }
 
+  if (screen != null) {
+    const screenProps = screen?.()?.props || {};
+    modalParams.current = {
+      title: screenProps?.title || '',
+      description: screenProps?.description || '',
+    };
+  }
+
+  useEffect(() => {
+    navigator?.maxApi?.getDataObserver?.('current_screen', (curScreen: any) => {
+      const item: any = {
+        screenName: curScreen?.screenName,
+        componentName: 'Modal',
+        ...modalParams.current,
+      };
+      context?.autoTracking?.({
+        ...context,
+        ...item,
+      });
+    });
+  }, [context, navigator?.maxApi]);
+
   useEffect(() => {
     Animated.parallel([
       Animated.timing(opacity, {

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/Application/types.ts

@@ -185,35 +185,7 @@ export type ScreenTrackingParams = {
   value2?: any;
 };
 
-export type ModalTrackingProps = {
-  /**
-   * Optional. Screen name for auto_popup_displayed tracking event.
-   * Falls back to the current screen's name from context if not provided.
-   */
-  screen_name?: string;
-
-  /**
-   * Optional. Component name for auto_popup_displayed tracking event.
-   */
-  componentName?: string;
-
-  /**
-   * Optional. Component label for auto_popup_displayed tracking event.
-   */
-  componentLabel?: string;
-
-  /**
-   * Optional. Description for auto_popup_displayed tracking event.
-   */
-  description?: string;
-
-  /**
-   * Optional. Title for auto_popup_displayed tracking event.
-   */
-  title?: string;
-};
-
-export type ModalParams = ModalTrackingProps & {
+export type ModalParams = {
   [key: string]: any;
   screen: React.ComponentType;
   onDismiss?: () => void;
@@ -222,7 +194,7 @@ export type ModalParams = ModalTrackingProps & {
   useNativeModal?: boolean;
 };
 
-export type BottomSheetParams = ModalTrackingProps & {
+export type BottomSheetParams = {
   [key: string]: any;
   screen: React.ComponentType;
   options: {

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.3-beta.25",
-  "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.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"
+}