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

package/Application/Components.tsx

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

package/Application/NavigationContainer.tsx

@@ -31,7 +31,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const [language, setLanguage] = useState<'vi' | 'en'>('vi');
   const [config, setConfig] = useState<any>(undefined);
   let assets = theme.assets;
-  if (config) {
+  if (config && theme.assets?.headerBackground) {
     assets = {...assets, headerBackground: config.navigationBar?.headerBar};
   }
 

package/Button/index.tsx

@@ -85,7 +85,6 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
-  accessibilityLabel,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -303,14 +302,10 @@ const Button: FC<ButtonProps> = ({
         componentName: 'Button',
         params: {
           title,
-          accessibilityLabel,
         },
       }}>
       <TouchableOpacity
         {...rest}
-        accessibilityLabel={`${screenInfo.screenName}/Button/${
-          accessibilityLabel ?? title
-        }`}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>

package/CheckBox/index.tsx

@@ -6,6 +6,10 @@ 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,
@@ -19,6 +23,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<any>(ScreenContext);
 
   if (haveValue) {
     borderColor = theme.colors.primary;
@@ -35,27 +40,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={'description_default'}>{label}</Text>}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/IconButton/index.tsx

@@ -10,6 +10,10 @@ 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.
@@ -36,6 +40,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -121,14 +126,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/Layout/Screen.tsx

@@ -311,7 +311,6 @@ const Screen = forwardRef(
                 uri: headerBackground,
               }}
               style={styles.extendedHeader}
-              loading={false}
             />
             <View style={{height: heightHeader}} />
           </>

package/Radio/index.tsx

@@ -7,6 +7,10 @@ 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,
@@ -37,28 +41,38 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
+  const screenInfo = useContext<any>(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={'description_default'}>{label}</Text>}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Switch/index.tsx

@@ -1,13 +1,18 @@
-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';
 
+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) {
@@ -15,19 +20,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/package.json

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