@momo-kits/foundation 0.150.2-beta.32 → 0.150.2-beta.34

package/Application/BottomTab/index.tsx

@@ -37,7 +37,6 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { nested, options, screen, initialParams } = route?.params;
-  const useAnimation = route?.params?.useAnimation ?? true;
   const insets = useSafeAreaInsets();
 
   const opacityValue = 0.3;
@@ -74,75 +73,78 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   );
 
   useFocusEffect(
-    React.useCallback(() => {
-      Animated.parallel([
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-        Animated.timing(scale, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-      ]).start();
+    React.useCallback(
+      () => {
+        Animated.parallel([
+          Animated.timing(opacity, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+          Animated.timing(scale, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+        ]).start();
 
-      setTimeout(() => {
-        navigator?.maxApi?.getDataObserver?.('current_screen', (data: any) => {
-          onScreenNavigated(data?.screenName, screenName);
-          navigator?.maxApi?.setObserver?.('current_screen', { screenName });
-        });
-      }, 100);
+        setTimeout(() => {
+          navigator?.maxApi?.getDataObserver?.(
+            'current_screen',
+            (data: any) => {
+              onScreenNavigated(data?.screenName, screenName);
+              navigator?.maxApi?.setObserver?.('current_screen', {
+                screenName,
+              });
+            },
+          );
+        }, 100);
 
-      return () => {
-        if (navigation.getState().index !== route?.params.index) {
-          Animated.parallel([
-            Animated.timing(opacity, {
-              toValue: opacityValue,
-              duration: 200,
-              useNativeDriver: true,
-            }),
-            Animated.timing(scale, {
-              toValue: scaleValue,
-              duration: 200,
-              useNativeDriver: true,
-            }),
-          ]).start();
-        }
-      };
-    }, [
-      navigation,
-      navigator?.maxApi,
-      onScreenNavigated,
-      opacity,
-      route?.params.index,
-      scale,
-      screenName,
-    ]),
+        return () => {
+          if (navigation.getState().index !== route?.params.index) {
+            Animated.parallel([
+              Animated.timing(opacity, {
+                toValue: opacityValue,
+                duration: 200,
+                useNativeDriver: true,
+              }),
+              Animated.timing(scale, {
+                toValue: scaleValue,
+                duration: 200,
+                useNativeDriver: true,
+              }),
+            ]).start();
+          }
+        };
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [],
+    ),
   );
 
-  useEffect(() => {
-    const onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
-      if (navigation.isFocused()) {
-        navigator?.maxApi?.getDataObserver?.('current_screen', (data: any) => {
-          onScreenNavigated(data?.screenName, screenName);
-          navigator?.maxApi?.setObserver?.('current_screen', { screenName });
-        });
-      }
-    });
-
-    return () => {
-      onFocusApp?.remove?.();
-    };
-  }, [navigation, navigator?.maxApi, onScreenNavigated, screenName]);
+  useEffect(
+    () => {
+      const onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
+        if (navigation.isFocused()) {
+          navigator?.maxApi?.getDataObserver?.(
+            'current_screen',
+            (data: any) => {
+              onScreenNavigated(data?.screenName, screenName);
+              navigator?.maxApi?.setObserver?.('current_screen', {
+                screenName,
+              });
+            },
+          );
+        }
+      });
 
-  let opacityStyle: undefined | Animated.Value;
-  let scaleStyle: number | Animated.Value = 1;
-  if (useAnimation) {
-    opacityStyle = opacity;
-    scaleStyle = scale;
-  }
+      return () => {
+        onFocusApp?.remove?.();
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
   let stackOptions = {};
   if (options) {
@@ -155,8 +157,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
         style={[
           styles.container,
           {
-            opacity: opacityStyle,
-            transform: [{ scale: scaleStyle }],
+            opacity,
+            transform: [{ scale }],
           },
         ]}
       >
@@ -188,8 +190,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
       style={[
         styles.container,
         {
-          opacity: opacityStyle,
-          transform: [{ scale: scaleStyle }],
+          opacity,
+          transform: [{ scale }],
         },
       ]}
     >
@@ -227,7 +229,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
   navigation,
   initialRouteName,
   floatingButton,
-  useAnimation = true,
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
   const dimensions = useWindowDimensions();
@@ -340,7 +341,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             key={`BottomTab-${item.name}`}
             name={item.name}
             component={TabScreen}
-            initialParams={{ ...item, nested, index, useAnimation }}
+            initialParams={{ ...item, nested, index }}
             listeners={handler}
             options={{
               tabBarLabel: ({ focused, color }) => {

package/Application/StackScreen.tsx

@@ -285,15 +285,15 @@ const StackScreen: React.FC<any> = props => {
    * tracking for loading screen
    */
   const onScreenLoading = () => {
-    if (!tracking.current?.releaseLoading) {
-      const timeLoad =
-        tracking.current.timeEndLoading - tracking.current.timeStartLoading;
+    const start = tracking.current.timeStartLoading;
+    const end = tracking.current.timeEndLoading;
+    if (!tracking.current?.releaseLoading && start && end && end > start) {
       context?.autoTracking?.({
         ...context,
         screenName,
         componentName: 'Screen',
         state: 'loading',
-        duration: timeLoad,
+        duration: end - start,
         loadingType: 'skeleton',
       });
       tracking.current.releaseLoading = true;
@@ -380,7 +380,6 @@ const StackScreen: React.FC<any> = props => {
           /**
            * tracking for loading screen
            */
-          clearTimeout(tracking.current.timeoutLoading);
           if (!loading) {
             tracking.current.timeEndLoading = Date.now();
           }
@@ -388,6 +387,7 @@ const StackScreen: React.FC<any> = props => {
           /**
            * timeout for handle tracking screen
            */
+          clearTimeout(tracking.current.timeoutLoading);
           tracking.current.timeoutLoading = setTimeout(() => {
             onScreenLoading();
           }, 2000);

package/Application/types.ts

@@ -269,7 +269,6 @@ export type BottomTabProps = {
     blur?: (e: EventArg<'blur', false, unknown>) => void;
   };
   floatingButton?: FloatingButtonProps;
-  useAnimation?: boolean;
 };
 
 export type FloatingButtonProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.150.2-beta.32",
+    "version": "0.150.2-beta.34",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},