@momo-kits/foundation 0.81.43-rc.5 → 0.81.43-tracking.1

package/Application/BottomTab.tsx

@@ -84,7 +84,9 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 return (
                   <Text
                     numberOfLines={1}
-                    typography={focused ? 'label_xs' : 'description_xs'}
+                    typography={
+                      focused ? 'label_xs_medium' : 'description_xs_regular'
+                    }
                     color={color}>
                     {item.label}
                   </Text>

package/Application/Components.tsx

@@ -22,7 +22,6 @@ import {
   HeaderAnimatedProps,
   HeaderBackgroundProps,
   HeaderBackProps,
-  HeaderToolkitProps,
   NavigationButtonProps,
   TitleCustomProps,
 } from './types';
@@ -245,10 +244,10 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text typography="title_xs" color={tintColor}>
+        <Text typography="header_default_bold" color={tintColor}>
           {title}
         </Text>
-        <Text typography="description_s" color={tintColor}>
+        <Text typography="description_default_regular" color={tintColor}>
           {subTitle}
         </Text>
       </View>

package/Application/NavigationContainer.tsx

@@ -6,7 +6,7 @@ import {
   NavigationContainerRef,
 } from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
-import {DeviceEventEmitter, NativeModules} from 'react-native';
+import {Alert, DeviceEventEmitter, NativeModules} from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';

package/Application/StackScreen.tsx

@@ -5,6 +5,10 @@ import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
@@ -64,10 +68,15 @@ const StackScreen: React.FC<ScreenParams> = props => {
   }, []);
 
   return (
-    <>
+    <ScreenContext.Provider
+      value={{
+        ...navigator?.trackingInfo,
+        screenName: Component.name,
+        autoTracking: navigator?.maxApi?.autoTracking,
+      }}>
       <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
   );
 };
 

package/Application/types.ts

@@ -82,10 +82,10 @@ export type LocalizationObject = {
 
 export type TrackingInfo = {
   [key: string]: any;
-  code: string;
-  appId: string;
-  buildNumber: number;
-  flowPartnerId?: string;
+  app_id: string;
+  feature_code: string;
+  screen_name: string;
+  flow_partner_id?: string;
 };
 
 export type NavigationContainerProps = {

package/Badge/Badge.tsx

@@ -46,7 +46,7 @@ const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
 
   return (
     <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
-      <Text color={Colors.black_01} typography={'action_xxs'}>
+      <Text color={Colors.black_01} typography={'action_xs_bold'}>
         {formatTitle()}
       </Text>
     </View>

package/Badge/BadgeRibbon.tsx

@@ -54,7 +54,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
             },
           ]}
           color={Colors.black_01}
-          typography={'label_xs'}>
+          typography={'label_xs_medium'}>
           {label}
         </Text>
       </View>
@@ -87,7 +87,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
               },
             ]}
             color={Colors.black_01}
-            typography={'label_xs'}>
+            typography={'label_xs_medium'}>
             {label}
           </Text>
         </View>

package/Button/index.tsx

@@ -6,7 +6,6 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
-
 import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
@@ -15,6 +14,11 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
+import {TrackingInfo} from '../Application/types';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -70,6 +74,8 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  A callback function that is called when the button is pressed.
    */
   onPress: () => void;
+
+  trackingParams?: any;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -82,6 +88,7 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
+  trackingParams,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -94,6 +101,8 @@ const Button: FC<ButtonProps> = ({
       end: {x: 0, y: 0.5},
     };
   }
+
+  const screenInfo = useContext<TrackingInfo>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -172,14 +181,14 @@ const Button: FC<ButtonProps> = ({
   const getTypography = (): Typography => {
     switch (size) {
       case 'large':
-        return 'action_default';
+        return 'action_default_bold';
       case 'medium':
-        return 'action_s';
+        return 'action_s_bold';
       case 'small':
-        return 'action_xs';
+        return 'action_xs_bold';
 
       default:
-        return 'action_default';
+        return 'action_default_bold';
     }
   };
 
@@ -291,20 +300,27 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      accessibilityLabel={`Button/${title}`}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      {renderLeading()}
-      {renderTitle()}
-      {renderTrailing()}
-      {gradientPros && (
-        <AnimationLinear {...gradientPros} style={styles.gradientView} />
-      )}
-      {gradientPros && <View style={styles.strokeView} />}
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params: trackingParams,
+        state: type === 'disabled' ? 'disabled' : 'enabled',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        {renderLeading()}
+        {renderTitle()}
+        {renderTrailing()}
+        {gradientPros && (
+          <AnimationLinear {...gradientPros} style={styles.gradientView} />
+        )}
+        {gradientPros && <View style={styles.strokeView} />}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/CheckBox/index.tsx

@@ -5,6 +5,11 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import {TrackingInfo} from '../Application/types';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -19,6 +24,7 @@ const CheckBox: FC<CheckBoxProps> = ({
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
   let backgroundColor = theme.colors.background.surface;
+  const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
   if (haveValue) {
     borderColor = theme.colors.primary;
@@ -35,27 +41,35 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <TouchableOpacity
-      accessibilityLabel={`CheckBox/${label}/${value}`}
-      activeOpacity={0.8}
-      onPress={() => onChange?.(!value)}
-      disabled={disabled}
-      style={[style, styles.container]}>
-      <View
-        style={[
-          {borderColor, backgroundColor, borderWidth: 1},
-          styles.checkbox,
-        ]}>
-        {haveValue && (
-          <Icon
-            color={theme.colors.background.surface}
-            size={20}
-            source={iconSource}
-          />
-        )}
-      </View>
-      {!!label && <Text typography={'description_default'}>{label}</Text>}
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'CheckBox',
+        params: {
+          value,
+        },
+      }}>
+      <TouchableOpacity
+        activeOpacity={0.8}
+        onPress={() => onChange?.(!value)}
+        disabled={disabled}
+        style={[style, styles.container]}>
+        <View
+          style={[
+            {borderColor, backgroundColor, borderWidth: 1},
+            styles.checkbox,
+          ]}>
+          {haveValue && (
+            <Icon
+              color={theme.colors.background.surface}
+              size={20}
+              source={iconSource}
+            />
+          )}
+        </View>
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/IconButton/index.tsx

@@ -9,6 +9,11 @@ import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
+import {TrackingInfo} from '../Application/types';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
@@ -36,6 +41,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
   /**
    * get size icon button
@@ -121,14 +127,22 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      accessibilityLabel={`IconButton/${icon}`}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      <Icon size={iconSize} source={icon} color={getIconColor()} />
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'IconButton',
+        params: {
+          icon,
+        },
+      }}>
+      <TouchableOpacity
+        {...rest}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        <Icon size={iconSize} source={icon} color={getIconColor()} />
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Input/Input.tsx

@@ -13,6 +13,10 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
+import {TrackingInfo} from '../Application/types';
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
   (
@@ -38,6 +42,7 @@ const Input = forwardRef(
       fontWeight = 'Regular',
       onPressIcon,
       style,
+      trackingParams,
       ...props
     }: InputProps,
     ref,
@@ -47,6 +52,7 @@ const Input = forwardRef(
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `Input/${floatingValue ?? placeholder}`;
+    const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -160,12 +166,20 @@ const Input = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </View>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'Input',
+          params: trackingParams,
+          state: disabled ? 'disabled' : 'enabled',
+        }}>
+        <View
+          style={[style, styles.wrapper]}
+          accessibilityLabel={accessibilityLabel}>
+          {renderInputView()}
+          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        </View>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputMoney.tsx

@@ -12,6 +12,10 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
+import {TrackingInfo} from '../Application/types';
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputMoney = forwardRef(
   (
@@ -30,6 +34,7 @@ const InputMoney = forwardRef(
       required = false,
       errorSpacing,
       style,
+      trackingParams,
       defaultValue = '',
       ...props
     }: InputMoneyProps,
@@ -39,6 +44,7 @@ const InputMoney = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `InputMoney/${floatingValue}`;
+    const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -142,12 +148,20 @@ const InputMoney = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </View>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'InputMoney',
+          params: trackingParams,
+          state: 'enable',
+        }}>
+        <View
+          style={[style, styles.wrapper]}
+          accessibilityLabel={accessibilityLabel}>
+          {renderInputView()}
+          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        </View>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputOTP.tsx

@@ -21,6 +21,10 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
+import {TrackingInfo} from '../Application/types';
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -57,7 +61,7 @@ const OTPCaret: FC<CaretProps> = ({index, length}) => {
           opacity,
         }}
       />
-      <Text color={theme.colors.text.hint} typography={'paragraph_default'}>
+      <Text color={theme.colors.text.hint} typography={'body_default_regular'}>
         -
       </Text>
     </View>
@@ -78,6 +82,7 @@ const InputOTP = forwardRef(
       onFocus,
       onBlur,
       dataType = 'number',
+      trackingParams,
       style,
       ...props
     }: InputOTPProps,
@@ -89,6 +94,7 @@ const InputOTP = forwardRef(
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
     const accessibilityLabel = `InputOTP/${floatingValue ?? placeholder}`;
+    const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -135,7 +141,9 @@ const InputOTP = forwardRef(
                     ? theme.colors.text.default
                     : theme.colors.text.hint
                 }
-                typography={!!value[i] ? 'title_s' : 'paragraph_default'}>
+                typography={
+                  !!value[i] ? 'header_m_bold' : 'body_default_regular'
+                }>
                 {value[i] || '-'}
               </Text>
             )}
@@ -150,7 +158,9 @@ const InputOTP = forwardRef(
 
       if (!focused && value.length === 0 && !!placeholder) {
         return (
-          <Text color={theme.colors.text.hint} typography={'description_s'}>
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_default_regular'}>
             {placeholder}
           </Text>
         );
@@ -167,7 +177,7 @@ const InputOTP = forwardRef(
                     marginRight: Spacing.L,
                   }
                 }
-                typography={'title_s'}>
+                typography={'header_m_bold'}>
                 {letter}
               </Text>
             );
@@ -191,7 +201,9 @@ const InputOTP = forwardRef(
                 styles.otpFloatingView,
                 {backgroundColor: theme.colors.background.surface},
               ]}>
-              <Text typography={'description_s'}>{floatingValue}</Text>
+              <Text typography={'description_default_regular'}>
+                {floatingValue}
+              </Text>
             </View>
           )}
           <View style={styles.otpInputsView}>
@@ -217,14 +229,22 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={onFocusInput}
-        style={[style, styles.otpWrapper]}
-        accessibilityLabel={accessibilityLabel}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </TouchableOpacity>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'InputOTP',
+          params: trackingParams,
+          state: 'enable',
+        }}>
+        <TouchableOpacity
+          activeOpacity={1}
+          onPress={onFocusInput}
+          style={[style, styles.otpWrapper]}
+          accessibilityLabel={accessibilityLabel}>
+          {renderInputView()}
+          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        </TouchableOpacity>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputSearch.tsx

@@ -12,6 +12,10 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
+import {TrackingInfo} from '../Application/types';
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputSearch = forwardRef(
   (
@@ -29,6 +33,7 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
+      trackingParams,
       ...props
     }: InputSearchProps,
     ref,
@@ -38,6 +43,7 @@ const InputSearch = forwardRef(
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const accessibilityLabel = `InputMoney/${placeholder}`;
+    const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -119,35 +125,45 @@ const InputSearch = forwardRef(
       );
     };
     return (
-      <View
-        style={[style, styles.searchInputContainer]}
-        accessibilityLabel={accessibilityLabel}>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'InputSearch',
+          params: trackingParams,
+          state: 'enabled',
+        }}>
         <View
-          style={[
-            styles.searchInputWrapper,
-            {
-              backgroundColor: theme.colors.background.surface,
-              borderColor: theme.colors.background.surface,
-            },
-            showBorder && {borderColor: theme.colors.border.default},
-            focused && {borderColor: theme.colors.primary},
-          ]}>
-          <Icon
-            source={'navigation_search'}
-            size={24}
-            color={theme.colors.text.hint}
-          />
-          {renderInputView()}
-          {renderIconView()}
+          style={[style, styles.searchInputContainer]}
+          accessibilityLabel={accessibilityLabel}>
+          <View
+            style={[
+              styles.searchInputWrapper,
+              {
+                backgroundColor: theme.colors.background.surface,
+                borderColor: theme.colors.background.surface,
+              },
+              showBorder && {borderColor: theme.colors.border.default},
+              focused && {borderColor: theme.colors.primary},
+            ]}>
+            <Icon
+              source={'navigation_search'}
+              size={24}
+              color={theme.colors.text.hint}
+            />
+            {renderInputView()}
+            {renderIconView()}
+          </View>
+          {showButtonText && (
+            <TouchableOpacity onPress={onPressButtonText}>
+              <Text
+                typography={'action_default_bold'}
+                style={styles.textButton}>
+                {buttonText}
+              </Text>
+            </TouchableOpacity>
+          )}
         </View>
-        {showButtonText && (
-          <TouchableOpacity onPress={onPressButtonText}>
-            <Text typography={'action_default'} style={styles.textButton}>
-              {buttonText}
-            </Text>
-          </TouchableOpacity>
-        )}
-      </View>
+      </ScreenContext.Provider>
     );
   },
 );

package/Input/InputTextArea.tsx

@@ -71,7 +71,9 @@ const InputTextArea = forwardRef(
     const renderCountingView = () => {
       return (
         <View style={styles.countingView}>
-          <Text color={theme.colors.text.hint} typography={'description_xs'}>
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_xs_regular'}>
             {`${inputValue.length}/${maxLength}`}
           </Text>
         </View>

package/Input/common.tsx

@@ -64,7 +64,7 @@ export const ErrorView: FC<{errorMessage?: string; errorSpacing?: boolean}> = ({
           style={Styles.flex}
           color={errorColor}
           numberOfLines={2}
-          typography={'description_s'}>
+          typography={'description_default_regular'}>
           {errorMessage}
         </Text>
       </View>
@@ -104,10 +104,12 @@ export const FloatingView: FC<FloatingViewProps> = ({
           },
           style,
         ]}>
-        <Text color={floatingTextColor} typography={'label_s'}>
+        <Text color={floatingTextColor} typography={'label_s_medium'}>
           {floatingValue}
           {required && (
-            <Text typography={'label_s'} color={theme.colors.error.primary}>
+            <Text
+              typography={'label_s_medium'}
+              color={theme.colors.error.primary}>
               *
             </Text>
           )}

package/Input/index.tsx

@@ -80,6 +80,8 @@ export interface InputProps extends TextInputProps {
   fontWeight?: 'Regular' | 'Bold';
 
   onPressIcon?: () => void;
+
+  trackingParams?: any;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -126,6 +128,8 @@ export interface InputSearchProps extends TextInputProps {
    * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
   icon?: string;
+
+  trackingParams?: any;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Pagination/PaginationNumber.tsx

@@ -13,7 +13,7 @@ const PaginationNumber: FC<ChildPaginationProps> = ({
   return (
     <View style={[style, styles.row]}>
       <View style={styles.paginationNumberContainer}>
-        <Text color={Colors.black_01} typography={'label_default'}>{`${
+        <Text color={Colors.black_01} typography={'label_default_medium'}>{`${
           activeIndex + 1
         }/${dataLength}`}</Text>
       </View>

package/Popup/PopupNotify.tsx

@@ -192,12 +192,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       ]}>
       {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
-        <Text typography={'title_xs'} numberOfLines={1}>
+        <Text typography={'header_default_bold'} numberOfLines={1}>
           {title}
         </Text>
         <Description style={[styles.description, descriptionStyle]}>
           <Text
-            typography={'paragraph_default'}
+            typography={'body_default_regular'}
             onTextLayout={({nativeEvent: {lines}}) => {
               const enableScroll = lines.length > 3;
               if (enableScroll != scrollContent) {
@@ -210,7 +210,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         {!!error && (
           <View style={styles.information}>
             <Text
-              typography={'description_xs'}
+              typography={'description_xs_regular'}
               color={theme.colors.text.hint}
               numberOfLines={1}>
               {translate?.('errorCode')}

package/Radio/index.tsx

@@ -6,6 +6,11 @@ import {Text} from '../Text';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
+import {TrackingInfo} from '../Application/types';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -37,28 +42,38 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
+  const screenInfo = useContext<TrackingInfo>(ScreenContext);
+
   return (
-    <TouchableOpacity
-      accessibilityLabel={`Radio/${label}/${value}`}
-      onPress={onChange}
-      disabled={disabled}
-      style={[
-        style,
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Radio',
+        params: {
+          value,
         },
-      ]}>
-      <View
+      }}>
+      <TouchableOpacity
+        onPress={onChange}
+        disabled={disabled}
         style={[
-          styles.radio,
-          checkBoxStyle,
-          disabledStyle,
-          {marginRight: label ? Spacing.XS : 0},
-        ]}
-      />
-      {!!label && <Text typography={'description_default'}>{label}</Text>}
-    </TouchableOpacity>
+          style,
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+        ]}>
+        <View
+          style={[
+            styles.radio,
+            checkBoxStyle,
+            disabledStyle,
+            {marginRight: label ? Spacing.XS : 0},
+          ]}
+        />
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Switch/index.tsx

@@ -1,13 +1,19 @@
-import React, {FC} from 'react';
+import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
+import {TrackingInfo} from '../Application/types';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const Switch: FC<SwitchProps> = props => {
   const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
+  const screenInfo = useContext<TrackingInfo>(ScreenContext);
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
@@ -15,19 +21,27 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   return (
-    <TouchableOpacity
-      accessibilityLabel={'Switch'}
-      disabled={disabled}
-      onPress={() => onChange?.(!value)}
-      style={[
-        style,
-        styles.container,
-        {backgroundColor, alignItems: circleAlign},
-      ]}>
-      <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
-        <View style={[styles.circleSmall, {backgroundColor}]} />
-      </View>
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Switch',
+        params: {
+          value,
+        },
+      }}>
+      <TouchableOpacity
+        disabled={disabled}
+        onPress={() => onChange?.(!value)}
+        style={[
+          style,
+          styles.container,
+          {backgroundColor, alignItems: circleAlign},
+        ]}>
+        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+          <View style={[styles.circleSmall, {backgroundColor}]} />
+        </View>
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Tag/index.tsx

@@ -71,7 +71,7 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text color={labelColor} typography={'label_s'}>
+      <Text color={labelColor} typography={'label_s_medium'}>
         {label}
       </Text>
     </View>

package/Text/styles.ts

@@ -5,7 +5,7 @@ export default {
   header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
   header_xs_semibold: {fontSize: 12, lineHeight: 16, fontWeight: '600'},
   body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
-  body_default_regularstrikethrought: {
+  body_regularstrikethrought: {
     fontSize: 14,
     lineHeight: 20,
     fontWeight: '400',

package/Text/types.ts

@@ -20,7 +20,7 @@ export type Typography =
   | 'header_s_semibold'
   | 'header_xs_semibold'
   | 'body_default_regular'
-  | 'body_default_regularstrikethrought'
+  | 'body_regularstrikethrought'
   | 'description_default_regular'
   | 'description_default_regularstrikethrought'
   | 'description_xs_regular'

package/Title/index.tsx

@@ -39,7 +39,7 @@ const Title: FC<TitleProps> = ({
   const renderAction = () => {
     return !!actionTitle && titleFlex ? (
       <TouchableOpacity onPress={onPressAction}>
-        <Text typography={'action_s'} color={theme.colors.primary}>
+        <Text typography={'action_s_bold'} color={theme.colors.primary}>
           {actionTitle}
         </Text>
       </TouchableOpacity>
@@ -116,7 +116,7 @@ const Title: FC<TitleProps> = ({
           {!!description && type !== 'screen' && (
             <Text
               numberOfLines={1}
-              typography={'description_s'}
+              typography={'description_default_regular'}
               color={theme.colors.text.secondary}>
               {description}
             </Text>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.81.43-rc.5",
+    "version": "0.81.43-tracking.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {