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

package/Application/Components.tsx

@@ -15,7 +15,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {
@@ -31,6 +31,10 @@ import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
 import {getAccessibilityID} from './utils';
 
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
@@ -108,7 +112,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   onPressLeftHeader,
   useBorder,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
   useEffect(() => {
@@ -300,7 +304,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   preventClose,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const miniContext = useContext(MiniAppContext);
+  const miniContext = useContext<any>(MiniAppContext);
   const [toolConfig, setToolConfig] = useState<any>();
   const {onAction} = toolConfig ?? {};
 

package/Application/NavigationContainer.tsx

@@ -4,6 +4,7 @@ import {
   NavigationContainer as ReactNavigationContainer,
   NavigationContainerRef,
 } from '@react-navigation/native';
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {createStackNavigator} from '@react-navigation/stack';
 import {DeviceEventEmitter} from 'react-native';
 import StackScreen from './StackScreen';
@@ -11,9 +12,18 @@ import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {LocalizationObject, NavigationContainerProps} from './types';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
+/**
+ * link for deprecated
+ */
+const deprecated = BottomSheetModalProvider;
+
 const Stack = createStackNavigator();
 
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
@@ -23,7 +33,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   maxApi,
   localization,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));

package/Application/StackScreen.tsx

@@ -1,13 +1,14 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {Alert, InteractionManager} from 'react-native';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const StackScreen: React.FC<ScreenParams> = props => {
@@ -17,7 +18,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const timeLoad = useRef(0);
   const timeout = useRef<any>();
 
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
 
   const {screen: Component, options}: ScreenParams = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
@@ -119,7 +120,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
                 message: `${Component.name} screen_load_time ${timeLoad.current}`,
               });
             }
-          }, 1000);
+          }, 2000);
         },
       }}>
       <Component

package/Button/index.tsx

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
@@ -18,6 +18,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
@@ -79,7 +80,7 @@ export interface ButtonProps extends TouchableOpacityProps {
 
   componentId?: string;
 
-  accessibilityID?: object
+  accessibilityID?: object;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -95,11 +96,11 @@ const Button: FC<ButtonProps> = ({
   params,
   componentId,
   accessibilityLabel,
-                                   accessibilityID,
+  accessibilityID,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
-  const {appId, code} = useContext(MiniAppContext)
+  const {appId, code} = useContext<any>(MiniAppContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
   if (gradient?.length > 0 && type == 'primary') {
@@ -306,7 +307,11 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-  const selfAccessibilityID = accessibilityID ? accessibilityID : getAccessibilityID?.(`${appId}/${code}/${screenInfo.screenName}/btn_${title}`)
+  const selfAccessibilityID = accessibilityID
+    ? accessibilityID
+    : getAccessibilityID?.(
+        `${appId}/${code}/${screenInfo.screenName}/btn_${title}`,
+      );
   return (
     <ScreenContext.Provider
       value={{

package/CheckBox/index.tsx

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

package/Input/Input.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
@@ -17,6 +17,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
@@ -51,7 +52,7 @@ const Input = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
@@ -121,7 +122,11 @@ const Input = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
-        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
+      const accessibilityID = getAccessibilityID?.(
+        `${appId}/${screenInfo.screenName}/input_${floatingValue}${
+          disabled && '_disabled'
+        }`,
+      );
 
       return (
         <View
@@ -204,7 +209,6 @@ const Input = forwardRef(
       inputState = 'disabled';
     }
 
-
     return (
       <ScreenContext.Provider
         value={{

package/Input/InputDropDown.tsx

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {TextInput, TouchableOpacity, View} from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
@@ -11,6 +11,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputDropDown = ({
@@ -35,7 +36,7 @@ const InputDropDown = ({
   componentId,
   ...props
 }: InputDropDownProps) => {
-    const {appId} = useContext(MiniAppContext)
+  const {appId} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
   const screenInfo = useContext<any>(ScreenContext);
@@ -60,7 +61,11 @@ const InputDropDown = ({
       placeholderColor = disabledColor;
       iconTintColor = disabledColor;
     }
-      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
+    const accessibilityID = getAccessibilityID?.(
+      `${appId}/${screenInfo.screenName}/input_${floatingValue}${
+        disabled && '_disabled'
+      }`,
+    );
 
     return (
       <View
@@ -114,8 +119,6 @@ const InputDropDown = ({
     );
   };
 
-
-
   return (
     <ScreenContext.Provider
       value={{

package/Input/InputMoney.tsx

@@ -12,7 +12,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
@@ -22,6 +22,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputMoney = forwardRef(
@@ -49,7 +50,7 @@ const InputMoney = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const screenInfo = useContext<any>(ScreenContext);
@@ -104,7 +105,11 @@ const InputMoney = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
-        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
+      const accessibilityID = getAccessibilityID?.(
+        `${appId}/${screenInfo.screenName}/input_${floatingValue}${
+          disabled && '_disabled'
+        }`,
+      );
 
       return (
         <View
@@ -175,7 +180,6 @@ const InputMoney = forwardRef(
       inputState = 'disabled';
     }
 
-
     return (
       <ScreenContext.Provider
         value={{
@@ -186,8 +190,7 @@ const InputMoney = forwardRef(
           state: inputState,
           componentId,
         }}>
-        <View
-            style={[style, styles.wrapper]}>
+        <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>

package/Input/InputOTP.tsx

@@ -19,17 +19,17 @@ import {CaretProps, InputOTPProps} from './index';
 import {scaleSize, Text} from '../Text';
 import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
 import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 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;
 
@@ -92,7 +92,7 @@ const InputOTP = forwardRef(
     ref,
   ) => {
     const MAX_LENGTH = 10;
-      const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
 
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);
@@ -191,7 +191,9 @@ const InputOTP = forwardRef(
       );
     };
 
-      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}`)
+    const accessibilityID = getAccessibilityID?.(
+      `${appId}/${screenInfo.screenName}/input_${floatingValue}`,
+    );
     const renderInputView = () => {
       return (
         <View

package/Input/InputSearch.tsx

@@ -7,15 +7,16 @@ import {
   View,
 } from 'react-native';
 import {InputSearchProps} from './index';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
-import {getAccessibilityID} from "../Application/utils";
+import {getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputSearch = forwardRef(
@@ -41,7 +42,7 @@ const InputSearch = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -66,7 +67,9 @@ const InputSearch = forwardRef(
       checkTyping(text, haveValue, setHaveValue);
       onChangeText?.(text);
     };
-      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_search`)
+    const accessibilityID = getAccessibilityID?.(
+      `${appId}/${screenInfo.screenName}/input_search`,
+    );
 
     const renderInputView = () => {
       return (

package/Input/InputTextArea.tsx

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

package/Popup/PopupNotify.tsx

@@ -4,10 +4,14 @@ import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
-import {getAccessibilityID} from "../Application/utils";
+import {getAccessibilityID} from '../Application/utils';
+
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -20,7 +24,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   buttonDirection = 'row',
   onIconClose,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {theme, navigator, translate} = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
   const closeAction = useRef('touch_outside');
@@ -109,8 +113,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       );
     };
     const renderColumn = () => {
-      const accessibilityPrimaryID = getAccessibilityID?.('btn_popup_allow')
-      const accessibilitySecondID = getAccessibilityID?.('btn_popup_cancel')
+      const accessibilityPrimaryID = getAccessibilityID?.('btn_popup_allow');
+      const accessibilitySecondID = getAccessibilityID?.('btn_popup_cancel');
 
       return (
         <View style={Styles.columnCenter}>
@@ -127,7 +131,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
-                  accessibilityID={accessibilitySecondID}
+                accessibilityID={accessibilitySecondID}
                 title={secondary?.title}
                 type="text"
                 size="medium"
@@ -161,11 +165,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close')
+    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close');
 
     return (
       <TouchableOpacity
-          {...accessibilityCloseID}
+        {...accessibilityCloseID}
         style={styles.iconCloseContainer}
         onPress={() => {
           closeAction.current = 'icon_close';
@@ -189,11 +193,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     );
   };
 
-  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_notify`)
+  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_notify`);
 
   return (
     <View
-        {...accessibilityID}
+      {...accessibilityID}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -1,18 +1,22 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
-import {getAccessibilityID} from "../Application/utils";
+import {getAccessibilityID} from '../Application/utils';
+
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   id,
   image,
   onIconClose,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {theme, navigator} = useContext(ApplicationContext);
   const closeAction = useRef('touch_outside');
 
@@ -49,7 +53,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close')
+    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close');
 
     return (
       <View {...accessibilityCloseID} style={styles.iconCloseContainer}>
@@ -78,12 +82,10 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       </View>
     );
   };
-  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_promotion`)
+  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_promotion`);
 
   return (
-    <View
-        {...accessibilityID}
-    >
+    <View {...accessibilityID}>
       <Image
         source={{
           uri: image,

package/Radio/index.tsx

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

package/Switch/index.tsx

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

package/package.json

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