@momo-kits/foundation 0.102.6-beta.0 → 0.102.6-beta.1

package/Application/Components.tsx

@@ -35,6 +35,7 @@ import {Badge, BadgeDot} from '../Badge';
 import {HeaderType} from '../Layout/types';
 import Navigation from './Navigation';
 import {InputRef, InputSearch, InputSearchProps} from '../Input';
+import BadgeDotAnimation from '../Badge/BadgeDotAnimation';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
@@ -71,6 +72,11 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     if (badgeType === 'dot') {
       return <BadgeDot size="small" style={styles.badgeDot} />;
     }
+    if (badgeType === 'dot-animation') {
+      return (
+        <BadgeDotAnimation size="small" style={styles.badgeDotAnimation} />
+      );
+    }
 
     if (isNumber(badgeValue)) {
       return <Badge label={badgeValue} style={styles.badge} />;
@@ -763,6 +769,11 @@ const styles = StyleSheet.create({
     top: -Spacing.XS,
     right: -Spacing.XS,
   },
+  badgeDotAnimation: {
+    position: 'absolute',
+    top: -Spacing.S,
+    right: -Spacing.S,
+  },
   extendedHeader: {
     aspectRatio: 1.75,
     position: 'absolute',

package/Application/StackScreen.tsx

@@ -99,6 +99,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
     traceIdInteraction: undefined,
     releaseLoad: undefined,
     releaseInteraction: undefined,
+    timeoutLoad: undefined,
+    timeoutInteraction: undefined,
   });
   const interaction = useRef<any>();
   const context = useContext<any>(MiniAppContext);
@@ -133,6 +135,15 @@ const StackScreen: React.FC<ScreenParams> = props => {
       };
     }
     navigation.setOptions(defaultOptions);
+    navigator?.maxApi?.startTraceScreenLoad?.(screenName, (data: any) => {
+      tracked.current.traceIdLoad = data?.traceId;
+    });
+    navigator?.maxApi?.startTraceScreenInteraction?.(
+      screenName,
+      (data: any) => {
+        tracked.current.traceIdInteraction = data?.traceId;
+      }
+    );
   }, [options]);
 
   /**
@@ -145,16 +156,16 @@ const StackScreen: React.FC<ScreenParams> = props => {
       }, 300);
     }
     navigator?.maxApi?.of?.({screenName});
-    navigator?.maxApi?.startTraceScreenLoad?.(screenName, (data: any) => {
-      tracked.current.traceIdLoad = data?.traceId;
-    });
-    navigator?.maxApi?.startTraceScreenInteraction?.(
-      screenName,
-      (data: any) => {
-        tracked.current.traceIdInteraction = data?.traceId;
-      }
-    );
+    tracked.current.timeoutLoad = setTimeout(() => {
+      onScreenLoad();
+    }, 5000);
+    tracked.current.timeoutInteraction = setTimeout(() => {
+      onScreenInteraction();
+    }, 5000);
+
     return () => {
+      clearTimeout(tracked.current.timeoutLoad);
+      clearTimeout(tracked.current.timeoutInteraction);
       onScreenLoad();
       onScreenInteraction();
     };
@@ -190,9 +201,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
        * debug
        */
       navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
+        appId: `auto - ${context.appId}`,
         message: `${screenName} screen_load_time ${timeLoad.current}`,
-        type: 'error',
       });
       if (timeLoad.current <= 0 && context.enableAutoId) {
         Alert.alert(screenName, "Can't get screen load time");
@@ -232,9 +242,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
        * debug toast
        */
       navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
+        appId: `auto - ${context.appId}`,
         message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
-        type: 'error',
       });
       if (timeInteraction.current <= 0 && context.enableAutoId) {
         Alert.alert(screenName, "Can't get screen interaction time");
@@ -257,8 +266,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
             if (timeLoad.current === 0) {
               timeLoad.current = endTime.current - startTime.current;
             }
-            onScreenLoad();
-            onScreenInteraction();
           }, 2000);
         },
       }}>

package/Application/types.ts

@@ -129,7 +129,7 @@ export type NavigationButtonProps = {
   tintColor?: string;
   useBorder?: boolean;
   onPress: () => void;
-  badgeType?: 'dot' | 'number';
+  badgeType?: 'dot' | 'number' | 'dot-animation';
   badgeValue?: number;
   accessibilityLabel?: string;
 };

package/Badge/BadgeDotAnimation.tsx

@@ -0,0 +1,122 @@
+import React, {useEffect, useRef} from 'react';
+import {Animated, StyleSheet, View} from 'react-native';
+import {BadgeDotProps} from './types';
+import CommonStyle from './styles';
+
+const DURATION = 500;
+
+const BadgeDotAnimation = ({size, style}: BadgeDotProps) => {
+  // Refs for animated values
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const waveScaleAnim = useRef(new Animated.Value(1)).current;
+  const waveOpacityAnim = useRef(new Animated.Value(0)).current;
+
+  const dotStyle = size === 'small' ? styles.dotSmall : styles.dot;
+  const waveStyle = size === 'small' ? styles.waveSmall : styles.wave;
+
+  useEffect(() => {
+    // Infinite loop animation for the scale and wave effect
+    const animation = Animated.loop(
+      Animated.parallel([
+        // Dot pulse animation
+        Animated.sequence([
+          Animated.spring(scaleAnim, {
+            toValue: 1, // Scale up slightly
+            friction: 5, // Controls the "bounciness" of the spring
+            tension: 30, // Controls the "stiffness" of the spring
+            useNativeDriver: true,
+          }),
+          Animated.spring(scaleAnim, {
+            toValue: 1.2,
+            friction: 5,
+            tension: 30,
+            useNativeDriver: true,
+          }),
+        ]), // Wave animation
+        Animated.sequence([
+          Animated.timing(waveScaleAnim, {
+            toValue: 2.5,
+            duration: DURATION * 2,
+            useNativeDriver: true,
+          }),
+          Animated.timing(waveScaleAnim, {
+            toValue: 1, // Reset wave size
+            duration: 0,
+            useNativeDriver: true,
+          }),
+        ]), // Wave opacity animation
+        Animated.sequence([
+          Animated.timing(waveOpacityAnim, {
+            toValue: 0.3, // Wave becomes visible
+            duration: DURATION,
+            useNativeDriver: true,
+          }),
+          Animated.timing(waveOpacityAnim, {
+            toValue: 0, // Wave fades out
+            duration: DURATION * 1.2,
+            useNativeDriver: true,
+          }),
+        ]),
+      ])
+    );
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, [scaleAnim, waveScaleAnim, waveOpacityAnim]);
+
+  return (
+    <View style={[styles.container, style]}>
+      {/* Wave Animation */}
+      <Animated.View
+        style={[
+          waveStyle,
+          {
+            transform: [{scale: waveScaleAnim}],
+            opacity: waveOpacityAnim,
+          },
+        ]}
+      />
+      {/* Dot Animation */}
+      <Animated.View
+        style={[
+          dotStyle,
+          {
+            transform: [{scale: scaleAnim}],
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  ...CommonStyle,
+  container: {
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dot: {
+    ...CommonStyle.dot,
+    borderWidth: 0,
+  },
+  dotSmall: {
+    ...CommonStyle.dotSmall,
+    borderWidth: 0,
+  },
+  wave: {
+    ...CommonStyle.dot,
+    opacity: 0,
+    position: 'absolute',
+    borderWidth: 0,
+  },
+  waveSmall: {
+    ...CommonStyle.dotSmall,
+    borderWidth: 0,
+    position: 'absolute',
+  },
+});
+
+export default BadgeDotAnimation;

package/package.json

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

package/publish.sh

@@ -9,8 +9,8 @@ elif [ "$1" == "latest" ]; then
   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