@momo-kits/foundation 0.92.2 → 0.92.3-tracking.10

package/Application/BottomTab/BottomTabBar.tsx

@@ -28,12 +28,12 @@ import {Radius} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {FloatingButtonProps} from '../types';
-import {getAccessibilityID} from '../utils';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
   inactiveTintColor?: string;
   floatingButton?: FloatingButtonProps;
+  accessibilityLabel?: string;
 };
 
 type Options = {
@@ -317,7 +317,6 @@ export default function BottomTabBar({
                 labelStyle={labelStyle}
                 iconStyle={iconStyle}
                 style={tabStyle}
-                {...getAccessibilityID(`btn_tabbar_${route.name}`)}
               />
             </NavigationRouteContext.Provider>
           </NavigationContext.Provider>

package/Application/BottomTab/index.tsx

@@ -9,7 +9,7 @@ import {Text} from '../../Text';
 import {ApplicationContext} from '../index';
 import StackScreen from '../StackScreen';
 import {BottomTabProps, NavigationScreenProps} from '../types';
-import {getAccessibilityID, getStackOptions} from '../utils';
+import {getStackOptions} from '../utils';
 import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
@@ -67,8 +67,8 @@ const BottomTab: React.FC<BottomTabProps> = ({
       backBehavior={'firstRoute'}
       tabBar={props => (
         <BottomTabBar
-          {...getAccessibilityID('tbr_main_bottom')}
           {...props}
+          accessibilityLabel={'BottomTabBar'}
           floatingButton={floatingButton}
         />
       )}

package/Application/Components.tsx

@@ -15,7 +15,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {ApplicationContext} from './index';
+import {ApplicationContext, MiniAppContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {
@@ -29,11 +29,6 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 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,
@@ -42,7 +37,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
   badgeType,
   badgeValue,
-  accessibilityID = '',
+  accessibilityLabel = '',
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
@@ -70,10 +65,9 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <View
-      {...getAccessibilityID(accessibilityID)}
-      style={{width: scaleSize(28)}}>
+    <View style={{width: scaleSize(28)}}>
       <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
         <Icon
@@ -98,7 +92,7 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
-      {...getAccessibilityID('title_navigation_header')}
+      accessibilityLabel={'title_navigation_header'}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -127,26 +121,25 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
   const goBackSafe = () => {
     const goBack = () => {
-      const canGoBack = navigator?.ref.current?.canGoBack();
-      if (!canGoBack) {
-        const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
-        const params = {
-          ...context,
-          screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
-          trigger_id: '111154000000000000',
-          icon_name: 'back',
-        };
-        navigator?.maxApi?.showToastDebug?.({
-          appId: `auto - ${context.appId}`,
-          message: 'service_icon_clicked',
-          params,
-        });
-        navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
-      }
+      const canGoBack = navigator?.ref?.current?.canGoBack?.();
+      const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+      const params = {
+        appId: context.appId,
+        code: context.code,
+        screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+        trigger_id: '111154000000000000',
+        icon_name: 'back',
+      };
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: 'service_icon_clicked',
+        params,
+      });
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       if (canGoBack) {
-        navigator?.ref.current?.goBack();
+        navigator?.ref?.current?.goBack?.();
       } else if (navigator?.maxApi) {
-        navigator?.maxApi?.dismiss(navigator.dismissData);
+        navigator?.maxApi?.dismiss?.(navigator?.dismissData);
       } else {
         const currentTime = new Date().getTime();
         const requestId = `navigationBackPress#${currentTime}`;
@@ -178,7 +171,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
-        accessibilityID="btn_navigation_back"
+        accessibilityLabel="btn_navigation_back"
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
@@ -253,7 +246,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
         <Text
-          {...getAccessibilityID('title_navigation_header')}
+          accessibilityLabel={'title_navigation_header'}
           typography="header_default_bold"
           color={tintColor}>
           {title}
@@ -381,7 +374,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
-          accessibilityID="btn_navigation_pin"
+          accessibilityLabel="btn_navigation_pin"
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -412,13 +405,13 @@ const HeaderToolkitAction: React.FC<any> = ({
             },
           ]}>
           <TouchableOpacity
-            {...getAccessibilityID('btn_navigation_more')}
+            accessibilityLabel={'btn_navigation_more'}
             onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
           <TouchableOpacity
-            {...getAccessibilityID('btn_navigation_close')}
+            accessibilityLabel={'btn_navigation_close'}
             onPress={onClose}>
             <Icon
               color={tintColor}

package/Application/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
@@ -15,10 +15,6 @@ import {LocalizationObject, NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
-const {
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 /**
  * link for deprecated
  */
@@ -35,7 +31,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   localization,
   initialParams,
 }) => {
-  const context = useContext<any>(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
@@ -69,7 +64,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
    * @param key
    */
   const translate = (key: string) => {
-    const language: 'vi' | 'en' = context?.language ?? 'vi';
+    const language: 'vi' | 'en' = 'vi';
     const mergedLocalization: LocalizationObject = {
       vi: {...localization?.vi, ...kitLocalization.vi},
       en: {...localization?.en, ...kitLocalization.en},

package/Application/StackScreen.tsx

@@ -1,23 +1,25 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext} from './index';
+import {ApplicationContext, MiniAppContext, ScreenContext} 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 => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const startTime = useRef(Date.now());
   const endTime = useRef(Date.now());
   const timeLoad = useRef(0);
-  const timeout = useRef<any>();
-
+  const timeInteraction = useRef(0);
+  const timeoutLoad = useRef<any>();
+  const tracked = useRef<any>({
+    releaseLoad: undefined,
+    releaseInteraction: undefined,
+    timeoutLoad: undefined,
+    timeoutInteraction: undefined,
+  });
+  const interaction = useRef<any>();
   const context = useContext<any>(MiniAppContext);
 
   const {screen: Component, options, initialParams} = props.route.params;
@@ -39,16 +41,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * set options for screen
    */
   useLayoutEffect(() => {
-    const host = (global as any).miniAppApi?.currentHost || {};
-    host.screenName = screenName;
-    InteractionManager.runAfterInteractions(() => {
-      navigator?.maxApi?.showToastDebug?.({
-        appId: `auto - ${context.appId}`,
-        message: `${screenName} screen_interaction_time ${
-          Date.now() - startTime.current
-        }`,
-      });
-    });
     if (options) {
       navigation.setOptions(options);
     }
@@ -58,73 +50,86 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    if (__DEV__) {
-      if (!screenName || screenName === 'screen') {
-        Alert.alert(
-          'Design system',
-          `Unvalidated screen name "${screenName}" !`,
-        );
-      }
+    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
+      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
     }
 
-    const tracking = {
-      ...context,
-      screen_name: screenName,
+    navigator?.maxApi?.of?.({screenName});
+
+    tracked.current.timeoutLoad = setTimeout(() => {
+      onScreenLoad();
+    }, 5000);
+    tracked.current.timeoutInteraction = setTimeout(() => {
+      onScreenInteraction();
+    }, 5000);
+    return () => {
+      onScreenLoad();
+      onScreenInteraction();
     };
+  }, []);
 
-    const routes = props.navigation.getState()?.routes || [];
-    const routesLength = routes.length;
-    let pre_screen_name = '';
-    if (routesLength > 1) {
-      pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
+  /**
+   * tracking for screen load
+   */
+  const onScreenLoad = () => {
+    clearTimeout(tracked.current.timeoutLoad);
+    if (!tracked.current?.releaseLoad) {
+      navigator?.maxApi?.dispatchFunction?.('autoTracking', {
+        appId: context.appId,
+        code: context.code,
+        screenName,
+        componentName: 'Screen',
+        state: 'load',
+        time: timeLoad.current,
+      });
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_load_time ${timeLoad.current}`,
+      });
+      tracked.current.releaseLoad = true;
     }
+  };
 
-    const params = {
-      ...tracking,
-      pre_screen_name,
-      trigger_id: '111378000000000000',
-    };
-    navigator?.maxApi?.trackEvent?.('service_frame_displayed', params);
-    navigator?.maxApi?.showToastDebug?.({
-      appId: `auto - ${context.appId}`,
-      message: `${screenName} service_frame_displayed`,
-      params,
-    });
+  /**
+   * tracking for screen load
+   */
+  const onScreenInteraction = () => {
+    clearTimeout(tracked.current.timeoutInteraction);
+    if (!tracked.current?.releaseInteraction) {
+      navigator?.maxApi?.dispatchFunction?.('autoTracking', {
+        appId: context.appId,
+        code: context.code,
+        screenName,
+        componentName: 'Screen',
+        state: 'interaction',
+        time: timeInteraction.current,
+      });
 
-    return props.navigation.addListener('beforeRemove', () => {
-      const params = {
-        ...tracking,
-        trigger_id: '111154000000000000',
-        icon_name: 'back',
-      };
-      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
       navigator?.maxApi?.showToastDebug?.({
         appId: `auto - ${context.appId}`,
-        message: `${screenName} service_icon_clicked`,
-        params,
+        message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
       });
-    });
-  }, []);
+      tracked.current.releaseInteraction = true;
+    }
+  };
 
   return (
     <ScreenContext.Provider
       value={{
-        appId: context.appId,
-        code: context.code,
         screenName,
         autoTracking: (data: any) => {
           navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
         },
         onElementLoad: () => {
           endTime.current = Date.now();
-          clearTimeout(timeout.current);
-          timeout.current = setTimeout(() => {
+          interaction.current?.cancel?.();
+          interaction.current = InteractionManager.runAfterInteractions(() => {
+            timeInteraction.current = Date.now() - startTime.current;
+          });
+          clearTimeout(timeoutLoad.current);
+          timeoutLoad.current = setTimeout(() => {
             if (timeLoad.current === 0) {
               timeLoad.current = endTime.current - startTime.current;
-              navigator?.maxApi?.showToastDebug?.({
-                appId: `auto - ${context.appId}`,
-                message: `${screenName} screen_load_time ${timeLoad.current}`,
-              });
             }
           }, 2000);
         },
@@ -132,7 +137,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
       <Component
         heightHeader={heightHeader}
         {...data}
-        onScreenLoad={() => {}}
+        onScreenLoad={onScreenLoad}
+        onScreenInteraction={onScreenInteraction}
       />
       {showGrid && <GridSystem />}
     </ScreenContext.Provider>

package/Application/index.ts

@@ -1,3 +1,4 @@
+import {Platform} from 'react-native';
 import {NavigationContainer} from './NavigationContainer';
 import Screen from '../Layout/Screen';
 import {
@@ -11,20 +12,19 @@ import {
 import BottomTab from './BottomTab';
 import {createContext} from 'react';
 import {defaultContext} from '../Consts';
-import {MiniAppInfo} from './types';
 
+const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
-const MiniAppContext = createContext<MiniAppInfo>({
-  appId: '',
-  buildNumber: 0,
-  code: '',
-  toolkitConfig: {},
-  fromCode: '',
-});
+
+const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
+const ScreenContext = (Platform as any).ScreenContext ?? Context;
+const ComponentContext = (Platform as any).ComponentContext ?? Context;
 
 export {
   ApplicationContext,
   MiniAppContext,
+  ScreenContext,
+  ComponentContext,
   NavigationContainer,
   Screen,
   BottomTab,

package/Application/types.ts

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

package/Application/utils.tsx

@@ -158,41 +158,6 @@ const getAccessibilityID = (
   }
 };
 
-const cleanNameForTracking = (word = ''): string => {
-  return word
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f |\s]/g, '')
-    .toLowerCase();
-};
-
-const formatComponentName = (word = '') => {
-  const accentsMap = {
-    a: 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
-    A: 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
-    e: 'é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ',
-    E: 'É|È|Ẻ|Ẽ|Ẹ|Ê|Ế|Ề|Ể|Ễ|Ệ',
-    i: 'í|ì|ỉ|ĩ|ị',
-    I: 'Í|Ì|Ỉ|Ĩ|Ị',
-    o: 'ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ',
-    O: 'Ó|Ò|Ỏ|Õ|Ọ|Ô|Ố|Ồ|Ổ|Ỗ|Ộ|Ơ|Ớ|Ờ|Ở|Ỡ|Ợ',
-    u: 'ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự',
-    U: 'Ú|Ù|Ủ|Ũ|Ụ|Ư|Ứ|Ừ|Ử|Ữ|Ự',
-    y: 'ý|ỳ|ỷ|ỹ|ỵ',
-    Y: 'Ý|Ỳ|Ỷ|Ỹ|Ỵ',
-    d: 'đ',
-    D: 'Đ',
-  };
-
-  for (const [nonAccent, accentGroup] of Object.entries(accentsMap)) {
-    const accents = new RegExp(accentGroup, 'g');
-    word = word.replace(accents, nonAccent);
-  }
-
-  word = word.replace(/\s+/g, '_').toLowerCase();
-
-  return word;
-};
-
 const formatNameLength = (name = '') => {
   let formattedName = name;
   if (formattedName.length > 100) {
@@ -205,8 +170,6 @@ export {
   getDialogOptions,
   getModalOptions,
   getOptions,
-  formatComponentName,
   formatNameLength,
   getAccessibilityID,
-  cleanNameForTracking,
 };

package/Button/index.tsx

@@ -7,23 +7,13 @@ import {
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} 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 {
-  cleanNameForTracking,
-  formatComponentName,
-  getAccessibilityID,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -81,8 +71,6 @@ export interface ButtonProps extends TouchableOpacityProps {
   onPress: () => void;
 
   params?: any;
-
-  componentId?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -96,14 +84,16 @@ const Button: FC<ButtonProps> = ({
   title = 'Button',
   onPress,
   params,
-  componentId,
   accessibilityLabel,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
-  const {appId, code} = useContext<any>(MiniAppContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
+  let state = 'enabled';
+  if (loading) {
+    state = 'loading';
+  }
   if (gradient?.length > 0 && type == 'primary') {
     gradientPros = {
       colors: gradient,
@@ -112,7 +102,6 @@ const Button: FC<ButtonProps> = ({
     };
   }
 
-  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -310,28 +299,18 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
         componentName: 'Button',
         params,
-        state: loading
-          ? 'loading'
-          : type === 'disabled'
-          ? 'disabled'
-          : 'enabled',
-        componentId,
-        componentValue: formatComponentName(title),
+        state: state,
+        componentId: accessibilityLabel,
+        componentValue: title,
         action: 'click',
       }}>
       <TouchableOpacity
         {...rest}
-        {...getAccessibilityID(
-          `${appId}/${code}/${screenInfo.screenName}/btn_${cleanNameForTracking(
-            title,
-          )}`,
-          accessibilityLabel,
-        )}
+        accessibilityLabel={accessibilityLabel}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>
@@ -343,7 +322,7 @@ const Button: FC<ButtonProps> = ({
         )}
         {gradientPros && <View style={styles.strokeView} />}
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 

package/CheckBox/index.tsx

@@ -2,33 +2,22 @@ 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, ComponentContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {
-  cleanNameForTracking,
-  formatNameLength,
-  getAccessibilityID,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
+import {formatNameLength} from '../Application/utils';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
-  disabled,
+  disabled = false,
   onChange,
   style,
   label,
   indeterminate,
   params,
-  componentId,
+  accessibilityLabel,
 }) => {
-  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
@@ -48,26 +37,19 @@ const CheckBox: FC<CheckBoxProps> = ({
     }
   }
 
-  const accessibilityID = getAccessibilityID(
-    `${appId}/${code}/${screenInfo.screenName}/cbx_${cleanNameForTracking(
-      label,
-    )}_${indeterminate ? 'na' : value}`,
-  );
-
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
-        componentName: 'Button',
+        componentName: 'CheckBox',
         params,
         state: disabled ? 'disabled' : 'filled',
-        componentId,
+        componentId: accessibilityLabel,
         action: 'click',
         componentLabel: formatNameLength(label || ''),
-        componentValue: indeterminate ? 'indetermine' : value,
+        componentValue: indeterminate ? 'undetermined' : value,
       }}>
       <TouchableOpacity
-        {...accessibilityID}
+        accessibilityLabel={accessibilityLabel}
         activeOpacity={0.8}
         onPress={() => onChange?.(!value)}
         disabled={disabled}
@@ -87,12 +69,8 @@ const CheckBox: FC<CheckBoxProps> = ({
         </View>
         {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 
-CheckBox.defaultProps = {
-  disabled: false,
-};
-
 export {CheckBox};