@momo-kits/foundation 0.81.37-tracking.3 → 0.81.38

package/Application/Components.tsx

@@ -272,7 +272,6 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       />
       {!!headerImage && (
         <Image
-          key={headerImage}
           style={styles.headerBackground}
           source={{uri: headerImage}}
           loading={false}

package/Application/StackScreen.tsx

@@ -5,10 +5,6 @@ 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);
@@ -68,14 +64,10 @@ const StackScreen: React.FC<ScreenParams> = props => {
   }, []);
 
   return (
-    <ScreenContext.Provider
-      value={{
-        screenName: Component.name,
-        elementTracking: navigator?.maxApi?.elementTracking,
-      }}>
+    <>
       <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}
-    </ScreenContext.Provider>
+    </>
   );
 };
 

package/Button/index.tsx

@@ -6,6 +6,7 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
+
 import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
@@ -15,10 +16,6 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
 export interface ButtonProps extends TouchableOpacityProps {
@@ -97,8 +94,6 @@ const Button: FC<ButtonProps> = ({
       end: {x: 0, y: 0.5},
     };
   }
-
-  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -296,28 +291,20 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Button',
-        params: {
-          title,
-        },
-      }}>
-      <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>
+    <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>
   );
 };
 

package/CheckBox/index.tsx

@@ -6,10 +6,6 @@ import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const CheckBox: FC<CheckBoxProps> = ({
   value,
   disabled,
@@ -23,7 +19,6 @@ 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<any>(ScreenContext);
 
   if (haveValue) {
     borderColor = theme.colors.primary;
@@ -40,35 +35,27 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <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={'description_default'}>{label}</Text>}
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <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>
   );
 };
 

package/IconButton/index.tsx

@@ -10,10 +10,6 @@ import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
    * Represents the name or key of the icon to be displayed on the IconButton.
@@ -40,7 +36,6 @@ const IconButton: React.FC<IconButtonProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -126,22 +121,14 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <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>
+    <TouchableOpacity
+      {...rest}
+      accessibilityLabel={`IconButton/${icon}`}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      <Icon size={iconSize} source={icon} color={getIconColor()} />
+    </TouchableOpacity>
   );
 };
 

package/Image/index.tsx

@@ -55,6 +55,9 @@ const Image: React.FC<ImageProps> = ({
       onLoadStart={() => {
         error.current = false;
       }}
+      onLoad={() => {
+        error.current = false;
+      }}
       onLoadEnd={() => {
         let current: Status = 'success';
         if (error.current) {

package/Radio/index.tsx

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

package/Switch/index.tsx

@@ -1,18 +1,13 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
 
-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<any>(ScreenContext);
 
   let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
@@ -20,27 +15,19 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   return (
-    <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>
+    <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>
   );
 };
 

package/package.json

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