@momo-kits/foundation 0.102.3-beta.1 → 0.102.3-optimize.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';
 
 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} />;
@@ -666,7 +672,7 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
   if (__DEV__) {
     Alert.alert(
       'HeaderRightAction',
-      'This component is deprecated, please use HeaderRight instead v0.92.34'
+      'This component is deprecated and will removed 10/2024, please use new type headerRight specs instead v0.92.34'
     );
   }
   const validateType = (child: React.ReactElement) => {
@@ -763,6 +769,11 @@ const styles = StyleSheet.create({
     top: -Spacing.XS,
     right: -Spacing.XS,
   },
+  badgeDotAnimation: {
+    position: 'absolute',
+    top: -Spacing.XS,
+    right: -Spacing.XS,
+  },
   extendedHeader: {
     aspectRatio: 1.75,
     position: 'absolute',

package/Application/Localize.ts

@@ -0,0 +1,37 @@
+import {NativeModules} from 'react-native';
+import {LocalizationObject} from './types';
+import defaultLanguage from '../Assets/language.json';
+
+class Localize {
+  private assets: LocalizationObject;
+  private currentLanguage: 'en' | 'vi';
+
+  constructor(assets: LocalizationObject) {
+    this.assets = {
+      vi: {...assets?.vi, ...defaultLanguage.vi},
+      en: {...assets?.en, ...defaultLanguage.en},
+    };
+    this.currentLanguage = 'vi';
+    if (NativeModules?.RNResource?.language === 'en') {
+      this.currentLanguage = 'en';
+    }
+  }
+
+  translate(key: string) {
+    return this.assets[this.currentLanguage]?.[key] || key;
+  }
+
+  translateData(data: {vi: string; en: string}) {
+    return data[this.currentLanguage] || data.vi || JSON.stringify(data);
+  }
+
+  addTranslations(translations: LocalizationObject) {
+    this.assets = translations;
+  }
+
+  setLanguage(language: 'en' | 'vi') {
+    this.currentLanguage = language;
+  }
+}
+
+export default Localize;

package/Application/NavigationContainer.tsx

@@ -10,9 +10,9 @@ import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
-import {LocalizationObject, NavigationContainerProps} from './types';
+import {NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
-import kitLocalization from '../Assets/language.json';
+import Localize from './Localize';
 
 const Stack = createStackNavigator();
 
@@ -21,15 +21,18 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   theme,
   options,
   maxApi,
-  localization,
   initialParams,
+  localize = new Localize({vi: {}, en: {}}),
 }) => {
   const navigationRef = useRef<NavigationContainerRef>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
   const config = useRef<any>();
-
+  /**
+   * inject data for navigator
+   */
+  navigator.current.maxApi = maxApi;
   /**
    * handle mini language & listen change
    * engine only shake to enable grid view
@@ -39,7 +42,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       'onChangeGrid',
       enable => {
         setShowGrid(!!enable);
-      },
+      }
     );
 
     return () => {
@@ -47,22 +50,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
-  /**
-   * inject data for navigator
-   */
-  navigator.current.maxApi = maxApi;
-
-  /**
-   * translate
-   * @param key
-   */
   const translate = (key: string) => {
-    const language: 'vi' | 'en' = 'vi';
-    const mergedLocalization: LocalizationObject = {
-      vi: {...localization?.vi, ...kitLocalization.vi},
-      en: {...localization?.en, ...kitLocalization.en},
-    };
-    return mergedLocalization?.[language]?.[key] || key;
+    return localize?.translate(key);
   };
 
   return (

package/Application/StackScreen.tsx

@@ -8,80 +8,6 @@ import {GridSystem} from '../Layout';
 import {Text} from '../Text';
 import {Colors, Radius, Spacing} from '../Consts';
 
-/**
- * Empty screen for unvalidated screen name
- * @constructor
- */
-const EmptyScreen: React.FC = () => {
-  return (
-    <View
-      style={{
-        backgroundColor: Colors.black_01,
-        padding: Spacing.M,
-        borderRadius: Radius.M,
-      }}>
-      <Text typography={'header_m_bold'}>Unvalidated screen name</Text>
-      <Text
-        typography={'description_default_regular'}
-        style={{paddingVertical: Spacing.S}}>
-        Your screen has not been rendered because Platform has not detected the
-        screen name. Please migrate to support this feature.
-      </Text>
-      <Text typography={'header_default'} style={{width: '100%'}}>
-        Possible fixes:
-      </Text>
-      <View style={{marginLeft: Spacing.S}}>
-        <Text typography={'body_default_regular'}>1. Off webpack config</Text>
-        <Text typography={'body_default_regular'}>
-          2. Screen name refactoring
-        </Text>
-        <View style={{marginLeft: Spacing.S}}>
-          <Text
-            typography={'description_default_regular'}
-            style={{marginBottom: Spacing.S}}>
-            - Với các screen push/import dạng arrow function ={'>'} đổi thành
-            named function
-          </Text>
-          <Text
-            typography={'description_default_regular'}
-            style={{marginBottom: Spacing.S}}>
-            - Với các screen import dạng High Order Component ={'>'} rename
-            generic function thành named function
-          </Text>
-          <Text
-            typography={'description_default_regular'}
-            style={{marginBottom: Spacing.S}}>
-            - Với Tab Navigator, Platform sẽ lấy Tab Container làm screen name.
-            Trong trường hợp miniapp muốn track riêng action cho từng tab, tham
-            khảo theo docs
-          </Text>
-        </View>
-      </View>
-      <Text typography={'header_s_semibold'}>More information: </Text>
-      <Text
-        typography={'body_default_regular'}
-        color={Colors.blue_01}
-        onPress={() => {
-          Linking.openURL(
-            'https://gitlab.mservice.com.vn/momo-platform/mini-app/-/tree/vn.momo.uikits/dev/app'
-          );
-        }}>
-        Mini App: vn.momo.uikits/dev
-      </Text>
-      <Text
-        typography={'body_default_regular'}
-        color={Colors.blue_01}
-        onPress={() => {
-          Linking.openURL(
-            'https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing'
-          );
-        }}>
-        https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing
-      </Text>
-    </View>
-  );
-};
-
 /**
  * container for stack screen
  * @param props
@@ -89,20 +15,20 @@ const EmptyScreen: React.FC = () => {
  */
 const StackScreen: React.FC<ScreenParams> = props => {
   const {showGrid, navigator} = useContext(ApplicationContext);
-  const startTime = useRef(Date.now());
-  const endTime = useRef(Date.now());
-  const timeLoad = useRef(0);
-  const timeInteraction = useRef(0);
-  const timeoutLoad = useRef<any>();
-  const tracked = useRef<any>({
+  const tracking = useRef<any>({
+    timeoutLoad: undefined,
+    timeoutInteraction: undefined,
+    timeoutTracking: undefined,
+    startTime: Date.now(),
+    endTime: Date.now(),
     traceIdLoad: undefined,
     traceIdInteraction: undefined,
     releaseLoad: undefined,
     releaseInteraction: undefined,
-    timeoutLoad: undefined,
-    timeoutInteraction: undefined,
+    timeLoad: 0,
+    timeInteraction: 0,
   });
-  const interaction = useRef<any>();
+
   const context = useContext<any>(MiniAppContext);
   const {screen: Component, options, initialParams} = props.route.params;
   const navigation = new Navigation(props.navigation);
@@ -118,6 +44,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
   delete data.initialParams;
 
   const screenName = Component?.name || Component?.type?.name || 'Invalid';
+  const routes = props.navigation.getState()?.routes || [];
 
   /**
    * set options for screen
@@ -135,15 +62,6 @@ 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]);
 
   /**
@@ -155,19 +73,39 @@ const StackScreen: React.FC<ScreenParams> = props => {
         navigator?.showModal({screen: EmptyScreen});
       }, 300);
     }
-    navigator?.maxApi?.of?.({screenName});
-    tracked.current.timeoutLoad = setTimeout(() => {
+
+    const subscription = props.navigation?.addListener?.('focus', () => {
+      navigator?.maxApi?.of?.({screenName});
+      navigator?.maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
+        let preScreenName = data?.screenName;
+        if (routes?.length > 1) {
+          const screen = routes?.[routes?.length - 2]?.params?.screen;
+          preScreenName = screen?.name || screen?.type?.name || 'Invalid';
+        }
+        onScreenNavigated(preScreenName);
+        navigator?.maxApi?.setObserver('CURRENT_SCREEN', {screenName});
+      });
+    });
+    navigator?.maxApi?.startTraceScreenLoad?.(screenName, (data: any) => {
+      tracking.current.traceIdLoad = data?.traceId;
+    });
+    navigator?.maxApi?.startTraceScreenInteraction?.(
+      screenName,
+      (data: any) => {
+        tracking.current.traceIdInteraction = data?.traceId;
+      }
+    );
+
+    tracking.current.timeoutTracking = setTimeout(() => {
       onScreenLoad();
-    }, 5000);
-    tracked.current.timeoutInteraction = setTimeout(() => {
       onScreenInteraction();
     }, 5000);
 
     return () => {
-      clearTimeout(tracked.current.timeoutLoad);
-      clearTimeout(tracked.current.timeoutInteraction);
       onScreenLoad();
       onScreenInteraction();
+      clearTimeout(tracking.current.timeoutTracking);
+      subscription?.();
     };
   }, []);
 
@@ -175,9 +113,10 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen load
    */
   const onScreenLoad = () => {
-    if (!tracked.current?.releaseLoad) {
-      if (timeLoad.current === 0) {
-        timeLoad.current = endTime.current - startTime.current;
+    if (!tracking.current?.releaseLoad) {
+      if (tracking.current.timeLoad === 0) {
+        tracking.current.timeLoad =
+          tracking.current.endTime - tracking.current.startTime;
       }
 
       context.autoTracking?.({
@@ -185,26 +124,26 @@ const StackScreen: React.FC<ScreenParams> = props => {
         code: context.code,
         buildNumber: context.buildNumber,
         screenName,
-        action: 'push',
         componentName: 'Screen',
         state: 'load',
-        duration: timeLoad.current,
+        duration: tracking.current.timeLoad,
       });
       navigator?.maxApi?.stopTrace?.(
-        tracked.current.traceIdLoad,
-        {value: timeLoad.current / 1000},
+        tracking.current.traceIdLoad,
+        {value: tracking.current.timeLoad / 1000},
         null
       );
-      tracked.current.releaseLoad = true;
+      tracking.current.releaseLoad = true;
 
       /**
        * debug
        */
       navigator?.maxApi?.showToastDebug?.({
-        appId: `auto - ${context.appId}`,
-        message: `${screenName} screen_load_time ${timeLoad.current}`,
+        appId: context.appId,
+        message: `${screenName} screen_load_time ${tracking.current.timeLoad}`,
+        type: 'ERROR',
       });
-      if (timeLoad.current <= 0 && context.enableAutoId) {
+      if (tracking.current.timeLoad <= 0 && context.enableAutoId) {
         Alert.alert(screenName, "Can't get screen load time");
       }
     }
@@ -214,12 +153,13 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen load
    */
   const onScreenInteraction = () => {
-    if (!tracked.current?.releaseInteraction) {
-      if (timeLoad.current === 0) {
-        timeLoad.current = endTime.current - startTime.current;
+    if (!tracking.current?.releaseInteraction) {
+      if (tracking.current.timeLoad === 0) {
+        tracking.current.timeLoad =
+          tracking.current.endTime - tracking.current.startTime;
       }
-      if (timeInteraction.current === 0) {
-        timeInteraction.current = timeLoad.current;
+      if (tracking.current.timeInteraction === 0) {
+        tracking.current.timeInteraction = tracking.current.timeLoad;
       }
 
       context.autoTracking?.({
@@ -229,43 +169,74 @@ const StackScreen: React.FC<ScreenParams> = props => {
         screenName,
         componentName: 'Screen',
         state: 'interaction',
-        duration: timeInteraction.current - timeLoad.current,
+        duration: tracking.current.timeInteraction - tracking.current.timeLoad,
+        totalDuration: tracking.current.timeInteraction,
       });
       navigator?.maxApi?.stopTrace?.(
-        tracked.current.traceIdInteraction,
-        {value: timeInteraction.current / 1000},
+        tracking.current.traceIdInteraction,
+        {value: tracking.current.timeInteraction / 1000},
         null
       );
-      tracked.current.releaseInteraction = true;
+      tracking.current.releaseInteraction = true;
 
       /**
        * debug toast
        */
       navigator?.maxApi?.showToastDebug?.({
-        appId: `auto - ${context.appId}`,
-        message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
+        appId: context.appId,
+        message: `${screenName} screen_interaction_time ${tracking.current.timeInteraction}`,
+        type: 'ERROR',
       });
-      if (timeInteraction.current <= 0 && context.enableAutoId) {
+      if (tracking.current.timeInteraction <= 0 && context.enableAutoId) {
         Alert.alert(screenName, "Can't get screen interaction time");
       }
     }
   };
 
+  /**
+   * tracking for screen navigated
+   */
+  const onScreenNavigated = (preScreenName: string) => {
+    context.autoTracking?.({
+      appId: context.appId,
+      code: context.code,
+      buildNumber: context.buildNumber,
+      preScreenName,
+      screenName,
+      componentName: 'Screen',
+      state: 'navigated',
+    });
+
+    /**
+     * debug toast
+     */
+    navigator?.maxApi?.showToastDebug?.({
+      appId: context.appId,
+      message: `${screenName} screen_navigated`,
+      type: 'ERROR',
+    });
+  };
+
   return (
     <ScreenContext.Provider
       value={{
         screenName,
         onElementLoad: () => {
-          clearTimeout(timeoutLoad.current);
-          endTime.current = Date.now();
-          interaction.current?.cancel?.();
-          interaction.current = InteractionManager.runAfterInteractions(() => {
-            timeInteraction.current = Date.now() - startTime.current;
-          });
-          timeoutLoad.current = setTimeout(() => {
-            if (timeLoad.current === 0) {
-              timeLoad.current = endTime.current - startTime.current;
+          clearTimeout(tracking.current.timeoutLoad);
+          tracking.current.endTime = Date.now();
+          tracking.current.timeoutInteraction?.cancel?.();
+          tracking.current.timeoutInteraction =
+            InteractionManager.runAfterInteractions(() => {
+              tracking.current.timeInteraction =
+                Date.now() - tracking.current.startTime;
+            });
+          tracking.current.timeoutLoad = setTimeout(() => {
+            if (tracking.current.timeLoad === 0) {
+              tracking.current.timeLoad =
+                tracking.current.endTime - tracking.current.startTime;
             }
+            onScreenLoad();
+            onScreenInteraction();
           }, 2000);
         },
       }}>
@@ -280,4 +251,78 @@ const StackScreen: React.FC<ScreenParams> = props => {
   );
 };
 
+/**
+ * Empty screen for unvalidated screen name
+ * @constructor
+ */
+const EmptyScreen: React.FC = () => {
+  return (
+    <View
+      style={{
+        backgroundColor: Colors.black_01,
+        padding: Spacing.M,
+        borderRadius: Radius.M,
+      }}>
+      <Text typography={'header_m_bold'}>Unvalidated screen name</Text>
+      <Text
+        typography={'description_default_regular'}
+        style={{paddingVertical: Spacing.S}}>
+        Your screen has not been rendered because Platform has not detected the
+        screen name. Please migrate to support this feature.
+      </Text>
+      <Text typography={'header_default'} style={{width: '100%'}}>
+        Possible fixes:
+      </Text>
+      <View style={{marginLeft: Spacing.S}}>
+        <Text typography={'body_default_regular'}>1. Off webpack config</Text>
+        <Text typography={'body_default_regular'}>
+          2. Screen name refactoring
+        </Text>
+        <View style={{marginLeft: Spacing.S}}>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với các screen push/import dạng arrow function ={'>'} đổi thành
+            named function
+          </Text>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với các screen import dạng High Order Component ={'>'} rename
+            generic function thành named function
+          </Text>
+          <Text
+            typography={'description_default_regular'}
+            style={{marginBottom: Spacing.S}}>
+            - Với Tab Navigator, Platform sẽ lấy Tab Container làm screen name.
+            Trong trường hợp miniapp muốn track riêng action cho từng tab, tham
+            khảo theo docs
+          </Text>
+        </View>
+      </View>
+      <Text typography={'header_s_semibold'}>More information: </Text>
+      <Text
+        typography={'body_default_regular'}
+        color={Colors.blue_01}
+        onPress={() => {
+          Linking.openURL(
+            'https://gitlab.mservice.com.vn/momo-platform/mini-app/-/tree/vn.momo.uikits/dev/app'
+          );
+        }}>
+        Mini App: vn.momo.uikits/dev
+      </Text>
+      <Text
+        typography={'body_default_regular'}
+        color={Colors.blue_01}
+        onPress={() => {
+          Linking.openURL(
+            'https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing'
+          );
+        }}>
+        https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing
+      </Text>
+    </View>
+  );
+};
+
 export default StackScreen;

package/Application/index.ts

@@ -1,5 +1,7 @@
 import {Platform} from 'react-native';
+import {createContext} from 'react';
 import {NavigationContainer} from './NavigationContainer';
+import Localize from './Localize';
 import Screen from '../Layout/Screen';
 import {
   HeaderAnimated,
@@ -10,7 +12,6 @@ import {
   HeaderRightAction,
 } from './Components';
 import BottomTab from './BottomTab';
-import {createContext} from 'react';
 import {defaultContext} from '../Consts';
 
 const Context = createContext({});
@@ -26,6 +27,7 @@ export {
   ScreenContext,
   ComponentContext,
   NavigationContainer,
+  Localize,
   Screen,
   BottomTab,
   NavigationButton,

package/Application/types.ts

@@ -1,8 +1,9 @@
-import {StackNavigationOptions} from '@react-navigation/stack';
 import {EventArg} from '@react-navigation/core';
+import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
+import Localize from './Localize';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
 
@@ -85,8 +86,8 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
-  localization?: LocalizationObject;
   initialParams?: any;
+  localize: Localize;
 };
 
 export type NavigationScreenProps = {
@@ -129,7 +130,7 @@ export type NavigationButtonProps = {
   tintColor?: string;
   useBorder?: boolean;
   onPress: () => void;
-  badgeType?: 'dot' | 'number';
+  badgeType?: 'dot' | 'number' | 'dot-animation';
   badgeValue?: number;
   accessibilityLabel?: string;
 };
@@ -137,7 +138,7 @@ export type NavigationButtonProps = {
 export type PinnedToolType = {
   key: string;
   badgeValue?: number;
-  badgeType?: 'number' | 'dot';
+  badgeType?: 'number' | 'dot' | 'dot-animation';
 };
 
 export type RuntimeToolType = {

package/Badge/BadgeDotAnimation.tsx

@@ -0,0 +1,95 @@
+import React, {useEffect, useRef} from 'react';
+import {Animated, View} from 'react-native';
+import {BadgeDotProps} from './types';
+import styles 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.dotAnimationSmall : styles.dotAnimation;
+  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.1,
+            friction: 5,
+            tension: 30,
+            useNativeDriver: true,
+          }),
+        ]), // Wave animation
+        Animated.sequence([
+          Animated.timing(waveScaleAnim, {
+            toValue: 2.5,
+            duration: DURATION * 3,
+            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 * 2,
+            useNativeDriver: true,
+          }),
+          Animated.timing(waveOpacityAnim, {
+            toValue: 0, // Wave fades out
+            duration: DURATION,
+            useNativeDriver: true,
+          }),
+        ]),
+      ])
+    );
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, []);
+
+  return (
+    <View style={[styles.dotAnimationContainer, style]}>
+      {/* Wave Animation */}
+      <Animated.View
+        style={[
+          waveStyle,
+          {
+            transform: [{scale: waveScaleAnim}],
+            opacity: waveOpacityAnim,
+          },
+        ]}
+      />
+      {/* Dot Animation */}
+      <Animated.View
+        style={[
+          dotStyle,
+          {
+            transform: [{scale: scaleAnim}],
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+export default BadgeDotAnimation;

package/Badge/index.tsx

@@ -1,7 +1,8 @@
 import Badge from './Badge';
 import BadgeDot from './BadgeDot';
 import BadgeRibbon from './BadgeRibbon';
+import BadgeDotAnimation from './BadgeDotAnimation';
 import {BadgeProps, BadgeDotProps, BadgeRibbonProps} from './types';
 
-export {Badge, BadgeRibbon, BadgeDot};
+export {Badge, BadgeRibbon, BadgeDot, BadgeDotAnimation};
 export type {BadgeProps, BadgeDotProps, BadgeRibbonProps};

package/Badge/styles.ts

@@ -2,6 +2,10 @@ import {StyleSheet} from 'react-native';
 import {Colors, Radius, Spacing} from '../Consts';
 import {scaleSize} from '../Text';
 
+const DOT_SIZE = 16;
+
+const DOT_SMALL_SIZE = 10;
+
 export default StyleSheet.create({
   badge: {
     paddingHorizontal: Spacing.XS,
@@ -15,21 +19,61 @@ export default StyleSheet.create({
     borderColor: Colors.black_01,
     alignSelf: 'baseline',
   },
+  dotAnimationContainer: {
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   dot: {
-    width: 16,
-    height: 16,
+    width: DOT_SIZE,
+    height: DOT_SIZE,
     borderWidth: 2,
     borderColor: Colors.black_01,
     backgroundColor: Colors.red_03,
-    borderRadius: 8,
+    borderRadius: DOT_SIZE / 2,
   },
   dotSmall: {
-    width: 10,
-    height: 10,
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
     borderWidth: 1,
     borderColor: Colors.black_01,
     backgroundColor: Colors.red_03,
-    borderRadius: 5,
+    borderRadius: DOT_SMALL_SIZE / 2,
+  },
+  dotAnimation: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SIZE / 2,
+    borderWidth: 0,
+  },
+  dotAnimationSmall: {
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SMALL_SIZE / 2,
+    borderWidth: 0,
+  },
+  wave: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SIZE / 2,
+    opacity: 0,
+    position: 'absolute',
+    borderWidth: 0,
+  },
+  waveSmall: {
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SMALL_SIZE / 2,
+    borderWidth: 0,
+    position: 'absolute',
   },
   ribbon: {
     alignSelf: 'baseline',

package/Input/styles.ts

@@ -32,10 +32,9 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   floatingIcon: {marginLeft: Spacing.XS},
-  errorIcon: {marginRight: Spacing.XS},
+  errorIcon: {marginRight: Spacing.XS, marginTop: Spacing.XXS},
   errorView: {
     flexDirection: 'row',
-    alignItems: 'center',
     marginTop: Spacing.XS,
   },
   inputView: {

package/Layout/Screen.tsx

@@ -132,13 +132,12 @@ const Screen = forwardRef(
       inputSearchProps,
       inputSearchRef,
     }: ScreenProps,
-    ref
+    ref: any
   ) => {
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
-    const scrollViewRef = useRef<any>(ref);
     const currentTint = useRef(Colors.black_01);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';
 
@@ -345,7 +344,7 @@ const Screen = forwardRef(
           useNativeDriver: true,
           duration: 300,
         }).start();
-        scrollViewRef.current?.scrollTo({y: 0, animated: true});
+        ref?.scrollTo({y: 0, animated: true});
       }
       scrollViewProps?.onScrollEndDrag?.(e);
     };
@@ -433,7 +432,7 @@ const Screen = forwardRef(
 
           <Component
             {...scrollViewProps}
-            ref={scrollViewRef}
+            ref={ref}
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
             onScrollEndDrag={handleScrollEnd}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.102.3-beta.1",
+    "version": "0.102.3-optimize.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