@momo-kits/foundation 0.89.4-tracking.17 → 0.89.4-tracking.19

package/Application/BottomTab.tsx

@@ -8,7 +8,7 @@ import {NavigationContainer} from '@react-navigation/native';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {ApplicationContext} from './index';
-import {getStackOptions} from './utils';
+import {getAccessibilityID, getStackOptions} from './utils';
 import StackScreen from './StackScreen';
 
 const Tab = createBottomTabNavigator();
@@ -58,8 +58,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
     });
   }, []);
 
+  const accessibilityID = getAccessibilityID("tbr_main_bottom")
+
   return (
     <Tab.Navigator
+        {...accessibilityID}
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
       tabBarOptions={{
@@ -72,8 +75,10 @@ const BottomTab: React.FC<BottomTabProps> = ({
         },
       }}>
       {tabs.map(item => {
+          const itemAccessibilityID = getAccessibilityID(`btn_tabbar_${item.name}`)
         return (
           <Tab.Screen
+              {...itemAccessibilityID}
             key={item.name}
             name={item.name}
             component={TabScreen}

package/Application/Components.tsx

@@ -29,6 +29,7 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
+import {getAccessibilityID} from "./utils";
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -37,6 +38,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
   badgeType,
   badgeValue,
+    accessibilityID = ''
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
@@ -63,8 +65,9 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     }
   }, [badgeType, badgeValue]);
 
+  const ID = getAccessibilityID(accessibilityID)
   return (
-    <View style={{width: scaleSize(28)}}>
+    <View {...ID} style={{width: scaleSize(28)}}>
       <TouchableOpacity
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
@@ -128,7 +131,8 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
           icon_name: 'back',
         };
         navigator?.maxApi?.showToastDebug?.({
-          title: 'service_icon_clicked',
+          appId: context.appId,
+          message: 'service_icon_clicked',
           params,
         });
         navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
@@ -165,10 +169,10 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     }
     return true;
   };
-
   return (
-    <View style={styles.headerLeft}>
+    <View  style={styles.headerLeft}>
       <NavigationButton
+          accessibilityID = "btn_navigation_back"
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
@@ -368,6 +372,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
+            accessibilityID  = "btn_navigation_pin"
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -385,7 +390,6 @@ const HeaderToolkitAction: React.FC<any> = ({
         />
       );
   };
-
   if (toolConfig) {
     return (
       <View style={styles.headerRightButton}>
@@ -398,11 +402,15 @@ const HeaderToolkitAction: React.FC<any> = ({
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <TouchableOpacity onPress={onMore}>
+          <TouchableOpacity
+              {...getAccessibilityID("btn_navigation_more")}
+              onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity onPress={onClose}>
+          <TouchableOpacity
+              {...getAccessibilityID("btn_navigation_close")}
+              onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"

package/Application/StackScreen.tsx

@@ -34,16 +34,17 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * set options for screen
    */
   useLayoutEffect(() => {
-    if (options) {
-      navigation.setOptions(options);
-    }
     InteractionManager.runAfterInteractions(() => {
       navigator?.maxApi?.showToastDebug?.({
-        title: `${Component.name} screen_interaction_time ${
+        appId: context.appId,
+        message: `${Component.name} screen_interaction_time ${
           Date.now() - startTime.current
         }`,
       });
     });
+    if (options) {
+      navigation.setOptions(options);
+    }
   }, [options]);
 
   /**
@@ -78,7 +79,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
     };
     navigator?.maxApi?.trackEvent?.('service_frame_displayed', params);
     navigator?.maxApi?.showToastDebug?.({
-      title: `${Component.name} service_frame_displayed`,
+      appId: context.appId,
+      message: `${Component.name} service_frame_displayed`,
       params,
     });
 
@@ -90,7 +92,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
       };
       navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       navigator?.maxApi?.showToastDebug?.({
-        title: `${Component.name} service_icon_clicked`,
+        appId: context.appId,
+        message: `${Component.name} service_icon_clicked`,
         params,
       });
     });
@@ -111,7 +114,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
           timeout.current = setTimeout(() => {
             timeLoad.current = endTime.current - startTime.current;
             navigator?.maxApi?.showToastDebug?.({
-              title: `${Component.name} screen_load_time ${timeLoad.current}`,
+              appId: context.appId,
+              message: `${Component.name} screen_load_time ${timeLoad.current}`,
             });
           }, 1000);
         },

package/Application/types.ts

@@ -129,6 +129,7 @@ export type NavigationButtonProps = {
   onPress: () => void;
   badgeType?: 'dot' | 'number';
   badgeValue?: number;
+  accessibilityID?: string
 };
 
 export type PinnedToolType = {

package/Application/utils.tsx

@@ -12,7 +12,8 @@ import {
 } from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-
+import {Platform} from "react-native";
+const isIOS = Platform.OS === 'ios'
 /**
  * default options for stack screen
  */
@@ -146,6 +147,19 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
+const getAccessibilityID = (key = "") => {
+  if (isIOS) {
+    return {
+      accessible: true,
+      testID: key
+    }
+  } else {
+    return {
+      accessibilityLabel: key
+    }
+  }
+}
+
 const  formatComponentName= (word: string) =>{
   const accentsMap = {
     'a': 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
@@ -181,4 +195,4 @@ const formatNameLength = (name: string) =>{
   }
   return formattedName
 }
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions, formatComponentName, formatNameLength};
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions, formatComponentName, formatNameLength, getAccessibilityID};

package/Button/index.tsx

@@ -7,14 +7,14 @@ import {
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
+import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -96,6 +96,7 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
+  const {appId, code} = useContext(MiniAppContext)
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
   if (gradient?.length > 0 && type == 'primary') {
@@ -302,7 +303,7 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-
+  const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|btn_${title}`)
   return (
     <ScreenContext.Provider
       value={{
@@ -320,6 +321,7 @@ const Button: FC<ButtonProps> = ({
       }}>
       <TouchableOpacity
         {...rest}
+        {...accessibilityID}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>

package/CheckBox/index.tsx

@@ -2,10 +2,10 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {formatNameLength} from '../Application/utils';
+import {formatNameLength, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -21,6 +21,7 @@ const CheckBox: FC<CheckBoxProps> = ({
   params,
   componentId,
 }) => {
+    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
   const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
@@ -41,6 +42,7 @@ const CheckBox: FC<CheckBoxProps> = ({
       backgroundColor = theme.colors.background.tonal;
     }
   }
+    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|cbx_${label}_${value}`)
 
   return (
     <ScreenContext.Provider
@@ -55,6 +57,7 @@ const CheckBox: FC<CheckBoxProps> = ({
         componentValue: indeterminate ? 'indetermine' : value,
       }}>
       <TouchableOpacity
+          {...accessibilityID}
         activeOpacity={0.8}
         onPress={() => onChange?.(!value)}
         disabled={disabled}

package/Image/index.tsx

@@ -7,6 +7,7 @@ import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {ImageProps} from './types';
+import {getAccessibilityID} from "../Application/utils";
 
 type Status = 'success' | 'loading' | 'error';
 
@@ -41,9 +42,11 @@ const Image: React.FC<ImageProps> = ({
     return children;
   };
 
+  const accessibilityID = getAccessibilityID(`img|${source}`)
   return (
     <FastImage
       {...rest}
+      {...accessibilityID}
       source={source}
       style={[styles.container, style]}
       onProgress={() => {

package/Input/Input.tsx

@@ -6,14 +6,14 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
+import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -51,6 +51,7 @@ const Input = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const {appId} = useContext(MiniAppContext)
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
@@ -201,6 +202,8 @@ const Input = forwardRef(
       inputState = 'disabled';
     }
 
+    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
+
     return (
       <ScreenContext.Provider
         value={{
@@ -211,7 +214,7 @@ const Input = forwardRef(
           state: inputState,
           componentId,
         }}>
-        <View style={[style, styles.wrapper]}>
+        <View {...accessibilityID} style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>

package/Input/InputDropDown.tsx

@@ -1,13 +1,13 @@
 import React, {useContext} from 'react';
 import {TextInput, TouchableOpacity, View} from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
-import {formatComponentName} from '../Application/utils';
+import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -35,6 +35,7 @@ const InputDropDown = ({
   componentId,
   ...props
 }: InputDropDownProps) => {
+    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
   const screenInfo = useContext<any>(ScreenContext);
@@ -111,6 +112,9 @@ const InputDropDown = ({
     );
   };
 
+    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
+
+
   return (
     <ScreenContext.Provider
       value={{
@@ -122,6 +126,7 @@ const InputDropDown = ({
         componentId,
       }}>
       <TouchableOpacity
+          {...accessibilityID}
         onPress={onPress}
         style={[style, full && styles.wrapper]}>
         {renderInputView()}

package/Input/InputMoney.tsx

@@ -12,13 +12,13 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {formatComponentName} from '../Application/utils';
+import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -49,6 +49,7 @@ const InputMoney = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const {appId} = useContext(MiniAppContext)
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const screenInfo = useContext<any>(ScreenContext);
@@ -172,6 +173,8 @@ const InputMoney = forwardRef(
       inputState = 'disabled';
     }
 
+      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
+
     return (
       <ScreenContext.Provider
         value={{
@@ -182,7 +185,9 @@ const InputMoney = forwardRef(
           state: inputState,
           componentId,
         }}>
-        <View style={[style, styles.wrapper]}>
+        <View
+            {...accessibilityID}
+            style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>

package/Input/InputOTP.tsx

@@ -19,9 +19,9 @@ import {CaretProps, InputOTPProps} from './index';
 import {scaleSize, Text} from '../Text';
 import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatComponentName} from '../Application/utils';
+import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -29,6 +29,7 @@ const {
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
+    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
   const opacity = useRef(new Animated.Value(0)).current;
 
@@ -91,6 +92,8 @@ const InputOTP = forwardRef(
     ref,
   ) => {
     const MAX_LENGTH = 10;
+      const {appId} = useContext(MiniAppContext)
+
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
@@ -227,6 +230,7 @@ const InputOTP = forwardRef(
         </View>
       );
     };
+      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <ScreenContext.Provider
@@ -239,6 +243,7 @@ const InputOTP = forwardRef(
           componentId,
         }}>
         <TouchableOpacity
+            {...accessibilityID}
           activeOpacity={1}
           onPress={onFocusInput}
           style={[style, styles.otpWrapper]}>

package/Input/InputSearch.tsx

@@ -7,11 +7,12 @@ import {
   View,
 } from 'react-native';
 import {InputSearchProps} from './index';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
+import {getAccessibilityID} from "../Application/utils";
 
 const {
   ScreenContext,
@@ -40,6 +41,7 @@ const InputSearch = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+    const {appId} = useContext(MiniAppContext)
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -137,9 +139,11 @@ const InputSearch = forwardRef(
     const backgroundColor = hasColorBG
       ? theme.colors.background.default
       : theme.colors.background.surface;
+      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_search`)
 
     return (
       <ScreenContext.Provider
+          {...accessibilityID}
         value={{
           ...screenInfo,
           componentName: 'InputSearch',

package/Input/InputTextArea.tsx

@@ -17,7 +17,12 @@ import {
 } from './common';
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
+import {getAccessibilityID} from "../Application/utils";
+
+const {
+    ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputTextArea = forwardRef(
   (
@@ -43,6 +48,8 @@ const InputTextArea = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
+      const screenInfo = useContext<any>(ScreenContext);
+      const {appId} = useContext(MiniAppContext)
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -146,9 +153,12 @@ const InputTextArea = forwardRef(
         </View>
       );
     };
+      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
-      <View style={[style, styles.wrapper]}>
+      <View
+          {...accessibilityID}
+          style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

package/Popup/PopupNotify.tsx

@@ -7,6 +7,7 @@ import {Text} from '../Text';
 import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
+import {getAccessibilityID} from "../Application/utils";
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -108,9 +109,13 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       );
     };
     const renderColumn = () => {
+      const accessibilityPrimaryID = getAccessibilityID('btn_popup_allow')
+      const accessibilitySecondID = getAccessibilityID('btn_popup_cancel')
+
       return (
         <View style={Styles.columnCenter}>
           <Button
+              {...accessibilityPrimaryID}
             title={primary.title}
             size="medium"
             onPress={() => {
@@ -122,6 +127,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
+                  {...accessibilitySecondID}
                 title={secondary?.title}
                 type="text"
                 size="medium"
@@ -155,8 +161,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
+    const accessibilityCloseID = getAccessibilityID('ic_popup_close')
+
     return (
       <TouchableOpacity
+          {...accessibilityCloseID}
         style={styles.iconCloseContainer}
         onPress={() => {
           closeAction.current = 'icon_close';
@@ -180,8 +189,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     );
   };
 
+  const accessibilityID = getAccessibilityID(`pu_${context.code}_notify`)
+
   return (
     <View
+        {...accessibilityID}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -5,6 +5,7 @@ import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
+import {getAccessibilityID} from "../Application/utils";
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   id,
@@ -48,8 +49,10 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
+    const accessibilityCloseID = getAccessibilityID('ic_popup_close')
+
     return (
-      <View style={styles.iconCloseContainer}>
+      <View {...accessibilityCloseID} style={styles.iconCloseContainer}>
         <TouchableOpacity
           onPress={() => {
             closeAction.current = 'icon_close';
@@ -75,9 +78,12 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       </View>
     );
   };
+  const accessibilityID = getAccessibilityID(`pu_${context.code}_promotion`)
 
   return (
-    <View>
+    <View
+        {...accessibilityID}
+    >
       <Image
         source={{
           uri: image,

package/Radio/index.tsx

@@ -4,9 +4,9 @@ import {TouchableOpacity, View} from 'react-native';
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatNameLength} from '../Application/utils';
+import {formatNameLength, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -22,6 +22,7 @@ const Radio: FC<RadioProps> = ({
   params,
   componentId,
 }) => {
+    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
   const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
@@ -44,6 +45,7 @@ const Radio: FC<RadioProps> = ({
         : theme.colors.text.disable,
     };
   }
+    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|rdo_${label}_${value}`)
 
   return (
     <ScreenContext.Provider
@@ -58,6 +60,7 @@ const Radio: FC<RadioProps> = ({
         action: 'click',
       }}>
       <TouchableOpacity
+          {...accessibilityID}
         onPress={onChange}
         disabled={disabled}
         style={[

package/Switch/index.tsx

@@ -3,12 +3,15 @@ import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
+import {getAccessibilityID} from "../Application/utils";
+import {MiniAppContext} from "../Application";
 
 const {
   ScreenContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const Switch: FC<SwitchProps> = props => {
+    const {appId} = useContext(MiniAppContext)
   const {value, onChange, disabled, style, params, componentId} = props;
   const screenInfo = useContext<any>(ScreenContext);
 
@@ -19,6 +22,7 @@ const Switch: FC<SwitchProps> = props => {
   if (disabled) {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
+    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|swt_${value}`)
 
   return (
     <ScreenContext.Provider
@@ -32,6 +36,7 @@ const Switch: FC<SwitchProps> = props => {
         action: 'click',
       }}>
       <TouchableOpacity
+          {...accessibilityID}
         disabled={disabled}
         onPress={() => onChange?.(!value)}
         style={[

package/index.ts

@@ -4,11 +4,12 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
+import {getAccessibilityID} from "./Application/utils";
 
 /**
  * native export
  */
-export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient};
+export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient, getAccessibilityID};
 
 /**
  * foundation component

package/package.json

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