@momo-kits/foundation 1.0.13 → 1.0.15

package/Button/index.tsx

@@ -10,7 +10,6 @@ import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors} from '../Consts';
 import styles from './styles';
-import {Image} from '../Image';
 import {Icon} from '../Icon';
 
 export interface ButtonProps extends TouchableOpacityProps {
@@ -224,6 +223,7 @@ const Button: FC<ButtonProps> = ({
   return (
     <TouchableOpacity
       {...rest}
+      accessibilityLabel={`Button/${title}`}
       activeOpacity={activeOpacity}
       onPress={onPressButton}
       style={buttonStyle}>

package/CheckBox/index.tsx

@@ -35,6 +35,7 @@ const CheckBox: FC<CheckBoxProps> = props => {
   };
   return (
     <TouchableOpacity
+      accessibilityLabel={`CheckBox/${label}`}
       activeOpacity={0.8}
       onPress={onChangeValue}
       disabled={disabled}
@@ -48,7 +49,7 @@ const CheckBox: FC<CheckBoxProps> = props => {
           />
         )}
       </View>
-      <Text typography={'description_default'}>{label}</Text>
+      {!!label && <Text typography={'description_default'}>{label}</Text>}
     </TouchableOpacity>
   );
 };

package/Icon/index.tsx

@@ -20,6 +20,7 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
 
   return (
     <Image
+      accessibilityLabel={`Icon/${getIconSource()}`}
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}

package/IconButton/index.tsx

@@ -111,6 +111,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   return (
     <TouchableOpacity
       {...rest}
+      accessibilityLabel={`IconButton/${icon}`}
       activeOpacity={activeOpacity}
       onPress={onPressButton}
       style={buttonStyle}>

package/Image/index.tsx

@@ -11,9 +11,15 @@ import {FastImagePropsWithoutStyle} from './types';
 export interface ImageProps extends FastImagePropsWithoutStyle {
   style?: StyleProp<ViewStyle>;
   loading?: boolean;
+  accessibilityLabel?: string;
 }
 
-const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
+const Image: React.FC<ImageProps> = ({
+  style,
+  source,
+  accessibilityLabel,
+  ...rest
+}) => {
   const {theme} = useContext(ApplicationContext);
   const [loading, setLoading] = useState(rest.loading);
   const [fail, setFail] = useState(false);
@@ -48,7 +54,9 @@ const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
   };
 
   return (
-    <View style={[styles.container, style]}>
+    <View
+      style={[styles.container, style]}
+      accessibilityLabel={`Image/${accessibilityLabel ?? source}`}>
       <FastImage
         {...rest}
         source={source}
@@ -68,4 +76,5 @@ const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
 Image.defaultProps = {
   loading: true,
 };
+
 export {Image};

package/Input/Input.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react-native';
 import {ApplicationContext} from '../Navigation';
 import styles from './styles';
-import {Image} from '../Image';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import {Icon} from '../Icon';
@@ -112,16 +111,14 @@ const Input: FC<InputProps> = ({
               />
             </TouchableOpacity>
           )}
-          {icon && (
-            <Icon icon={iconTintColor} source={icon} style={styles.icon} />
-          )}
+          {icon && <Icon color={iconTintColor} source={icon} size={24} />}
         </View>
       </View>
     );
   };
 
   return (
-    <View style={styles.wrapper}>
+    <View style={styles.wrapper} accessibilityLabel={`Input`}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} />
     </View>

package/Input/InputMoney.tsx

@@ -123,7 +123,7 @@ const InputMoney: FC<InputMoneyProps> = ({
   };
 
   return (
-    <View style={styles.wrapper}>
+    <View style={styles.wrapper} accessibilityLabel={`InputMoney`}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} />
     </View>

package/Input/InputSearch.tsx

@@ -22,7 +22,6 @@ const InputSearch: FC<InputSearchProps> = ({
   icon,
   buttonText = 'Hủy',
   showButtonText = true,
-  showIcon = true,
   showBorder = true,
   style,
   ...props
@@ -104,7 +103,7 @@ const InputSearch: FC<InputSearchProps> = ({
             />
           </TouchableOpacity>
         )}
-        {showIcon && icon && (
+        {icon || (
           <View style={{flexDirection: 'row'}}>
             <View
               style={[
@@ -116,7 +115,7 @@ const InputSearch: FC<InputSearchProps> = ({
             />
             <Icon
               color={iconTintColor}
-              source={icon}
+              source={icon as string}
               style={styles.iconSearchInput}
             />
           </View>
@@ -125,7 +124,9 @@ const InputSearch: FC<InputSearchProps> = ({
     );
   };
   return (
-    <View style={[style, styles.searchInputContainer]}>
+    <View
+      style={[style, styles.searchInputContainer]}
+      accessibilityLabel={`InputSearch`}>
       <View
         style={[
           getBorderColor(),

package/Input/InputTextArea.tsx

@@ -138,7 +138,7 @@ const InputTextArea: FC<InputTextAreaProps> = props => {
   };
 
   return (
-    <View style={styles.wrapper}>
+    <View style={styles.wrapper} accessibilityLabel={`InputTextArea`}>
       {renderInputView()}
       <ErrorView errorMessage={errorMessage} />
     </View>

package/Input/common.tsx

@@ -1,7 +1,6 @@
 import {View} from 'react-native';
 import styles from './styles';
 import {Text} from '../Text';
-import {Image} from '../Image';
 import React, {FC, useContext} from 'react';
 import {ApplicationContext} from '../Navigation';
 import {Icon} from '../Icon';
@@ -99,10 +98,10 @@ export const FloatingView: FC<FloatingViewProps> = ({
             </Text>
           )}
         </Text>
-        {floatingIcon && (
+        {floatingIcon || (
           <Icon
             color={floatingIconTintColor}
-            source={floatingIcon}
+            source={floatingIcon as string}
             size={16}
             style={styles.floatingIcon}
           />

package/Input/index.tsx

@@ -33,7 +33,6 @@ export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
 export interface InputSearchProps extends InputPropsOmitForSearch {
   buttonText?: string;
   showButtonText?: boolean;
-  showIcon?: boolean;
   showBorder?: boolean;
 }
 

package/Layout/Card.tsx

@@ -0,0 +1,87 @@
+import React, {useContext} from 'react';
+import {View} from 'react-native';
+
+import {CardProps, GridContextProps} from './types';
+import {GridContext} from './index';
+
+const Card: React.FC<CardProps> = ({
+  widthSpan = 12,
+  heightSpan,
+  usePadding,
+  children,
+  style,
+}) => {
+  const grid = useContext(GridContext);
+
+  /**
+   * render overlay view only dev mode
+   */
+  const renderOverlay = () => {
+    return (
+      <View
+        pointerEvents={'none'}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderColor: 'red',
+          borderWidth: 1,
+        }}
+      />
+    );
+  };
+
+  const styles: any = style ?? {};
+
+  const numberOfColumns = 12;
+  const gutterSize = 8;
+  let margin = 0;
+  if (usePadding) {
+    margin = 12;
+  }
+  const widthSection = grid.getSizeSpan(widthSpan) - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
+  const gridContext: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    margin,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
+
+  return (
+    <View
+      accessibilityLabel={`Card`}
+      style={{
+        ...styles,
+        width: grid.getSizeSpan(widthSpan),
+        height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
+        paddingHorizontal: margin,
+        overflow: 'hidden',
+        margin: undefined,
+        marginTop: undefined,
+        marginBottom: undefined,
+        marginLeft: undefined,
+        marginRight: undefined,
+      }}>
+      <GridContext.Provider value={gridContext}>
+        {children}
+      </GridContext.Provider>
+      {__DEV__ && renderOverlay()}
+    </View>
+  );
+};
+
+Card.defaultProps = {
+  widthSpan: 12,
+  usePadding: false,
+};
+
+Card.displayName = 'Card';
+
+export default Card;

package/Layout/GridSystem.tsx

@@ -1,13 +1,28 @@
 import React, {useContext} from 'react';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {StyleSheet, View} from 'react-native';
+import {Dimensions, StyleSheet, View} from 'react-native';
 import {ApplicationContext} from '../Navigation';
-import {useGridSystem} from './index';
 import {Colors, Spacing} from '../Consts';
+import {GridContextProps} from './types';
 
 const GridSystem: React.FC = () => {
   const {theme} = useContext(ApplicationContext);
-  const grid = useGridSystem();
+  const numberOfColumns = 12;
+  const gutterSize = 12;
+  const margin = 12;
+  const widthSection = Dimensions.get('window').width - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
+
+  const grid: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    margin,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
   const insets = useSafeAreaInsets();
 
   const list = [];
@@ -24,7 +39,7 @@ const GridSystem: React.FC = () => {
           insets,
           {
             borderColor: theme.colors.error.primary,
-            marginHorizontal: grid.screenPadding,
+            marginHorizontal: grid.margin,
           },
         ]}>
         {list.map((i, index) => {

package/Layout/ScreenContainer.tsx

@@ -4,35 +4,57 @@ import {SafeAreaView} from 'react-native-safe-area-context';
 import React from 'react';
 import {ScreenContainerProps} from '../Navigation/types';
 import {Spacing, Styles} from '../Consts';
-import {ScreenSection, validateChildren} from './index';
-import {Image} from '../Image';
+import {Section, validateChildren} from './index';
 
 const ScreenContainer: React.FC<ScreenContainerProps> = ({
   children,
   edges,
   enableKeyboardAvoidingView,
   scrollable,
+  scrollY,
+  headerBackground,
   scrollViewProps,
-  headerImage,
+  footerComponent: Footer,
 }) => {
+  let marginHeader = 0;
+  let handleScroll;
+  let imageAnimatedStyle = {};
   let Component: any = View;
   const headerHeight = useHeaderHeight();
   if (scrollable) {
     Component = Animated.ScrollView;
   }
+  if (scrollY) {
+    marginHeader = useHeaderHeight();
+    imageAnimatedStyle = {
+      transform: [
+        {
+          scale: scrollY.interpolate?.({
+            inputRange: [-300, 0, 1],
+            outputRange: [1.75, 1, 1],
+            extrapolate: 'clamp',
+          }),
+        },
+      ],
+    };
+    handleScroll = Animated.event(
+      [{nativeEvent: {contentOffset: {y: scrollY}}}],
+      {useNativeDriver: true},
+    );
+  }
 
   /**
    * build content for screen
    */
   const renderContent = () => {
-    const results = validateChildren(children, ScreenSection);
+    const results = validateChildren(children, Section);
     if (Array.isArray(results)) {
       return results.map((item, index) => {
         return (
           <View
-            key={`ScreenSection${index}`}
+            key={`Section${index}`}
             style={{
-              paddingTop: index != 0 ? 12 : Spacing.S,
+              marginTop: item.props?.useMargin ? Spacing.M : 0,
               flex: item.props?.expanded ? 1 : undefined,
             }}>
             {item}
@@ -44,7 +66,28 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
   };
 
   return (
-    <SafeAreaView style={Styles.flex} edges={edges}>
+    <SafeAreaView
+      style={Styles.flex}
+      edges={edges}
+      accessibilityLabel={`ScreenContainer`}>
+      <View
+        style={{
+          position: 'absolute',
+          height: 300,
+          width: '100%',
+        }}>
+        {headerBackground || (
+          <Animated.Image
+            source={{
+              uri: headerBackground,
+            }}
+            style={{
+              aspectRatio: 1.3,
+              ...imageAnimatedStyle,
+            }}
+          />
+        )}
+      </View>
       <KeyboardAvoidingView
         style={Styles.flex}
         keyboardVerticalOffset={headerHeight}
@@ -53,17 +96,13 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
           ios: 'padding',
           android: undefined,
         })}>
-        <Component {...scrollViewProps} style={Styles.flex}>
-          {headerImage && (
-            <Image
-              source={{
-                uri: headerImage,
-              }}
-              style={{width: '100%', height: 300}}
-            />
-          )}
+        <Component
+          {...scrollViewProps}
+          onScroll={handleScroll}
+          style={[Styles.flex, {marginTop: marginHeader}]}>
           {renderContent()}
         </Component>
+        {Footer && <Section>{Footer}</Section>}
       </KeyboardAvoidingView>
     </SafeAreaView>
   );

package/Layout/{ScreenSection.tsx → Section.tsx}

@@ -1,11 +1,31 @@
 import React from 'react';
-import {View} from 'react-native';
-import {useGridSystem, validateChildren} from './utils';
-import SectionItem from './SectionItem';
-import {ScreenSectionProps} from './types';
+import {Dimensions, View} from 'react-native';
+import {validateChildren} from './utils';
+import Card from './Card';
+import {GridContextProps, SectionProps} from './types';
+import {GridContext} from './index';
 
-const ScreenSection: React.FC<ScreenSectionProps> = ({children}) => {
-  const grid = useGridSystem();
+const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
+  const numberOfColumns = 12;
+  const gutterSize = 12;
+  let margin = 0;
+  if (useMargin) {
+    margin = 12;
+  }
+  let widthSection = Dimensions.get('window').width;
+  if (useMargin) widthSection = widthSection - margin * 2;
+  const totalGutterSize = gutterSize * (numberOfColumns - 1);
+  const sizePerSpan = (widthSection - totalGutterSize) / numberOfColumns;
+
+  const gridContext: GridContextProps = {
+    numberOfColumns,
+    gutterSize,
+    margin,
+    sizePerSpan,
+    getSizeSpan: span => {
+      return span * sizePerSpan + (span - 1) * gutterSize;
+    },
+  };
 
   /**
    * render overlay only dev mode
@@ -40,17 +60,17 @@ const ScreenSection: React.FC<ScreenSectionProps> = ({children}) => {
   ) => {
     return (
       <View
-        key={`SectionItem${cursor}`}
+        key={`Card${cursor}`}
         style={{
           flexDirection: 'row',
-          marginBottom: endRow ? 0 : grid.gutterSize,
+          marginBottom: endRow ? 0 : gridContext.gutterSize,
         }}>
         {rows.map((i: React.ReactElement, index: number) => {
           return (
-            <View
-              key={`SectionItem${cursor}${index}`}
-              style={{flexDirection: 'row'}}>
-              {index != 0 && <View style={{width: grid.gutterSize}}></View>}
+            <View key={`Card${cursor}${index}`} style={{flexDirection: 'row'}}>
+              {index != 0 && (
+                <View style={{width: gridContext.gutterSize}}></View>
+              )}
               {i}
             </View>
           );
@@ -79,7 +99,7 @@ const ScreenSection: React.FC<ScreenSectionProps> = ({children}) => {
             return previousValue + currentValue;
           });
 
-        if (totalSpan <= grid.numberOfColumns) {
+        if (totalSpan <= gridContext.numberOfColumns) {
           rows.push(item);
         } else {
           cursor += 1;
@@ -99,19 +119,25 @@ const ScreenSection: React.FC<ScreenSectionProps> = ({children}) => {
   };
 
   return (
-    <View
-      style={{
-        width: grid.getSizeSpan(),
-        marginHorizontal: grid.screenPadding,
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-      }}>
-      {renderView(validateChildren(children, SectionItem))}
-      {grid.isDevMode && renderOverlay()}
-    </View>
+    <GridContext.Provider value={gridContext}>
+      <View
+        accessibilityLabel={`Section`}
+        style={{
+          width: gridContext.getSizeSpan(12),
+          marginHorizontal: gridContext.margin,
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        }}>
+        {renderView(validateChildren(children, Card))}
+        {__DEV__ && renderOverlay()}
+      </View>
+    </GridContext.Provider>
   );
 };
 
-ScreenSection.displayName = 'ScreenSection';
+Section.displayName = 'Section';
 
-export default ScreenSection;
+Section.defaultProps = {
+  useMargin: true,
+};
+export default Section;

package/Layout/index.ts

@@ -1,12 +1,16 @@
-import SectionItem from './SectionItem';
-import ScreenSection from './ScreenSection';
+import Card from './Card';
+import Section from './Section';
 import GridSystem from './GridSystem';
-import {useGridSystem, validateChildren} from './utils';
+import {validateChildren} from './utils';
+import {createContext} from 'react';
+import {GridContextProps} from './types';
 
-export {
-  SectionItem,
-  ScreenSection,
-  GridSystem,
-  useGridSystem,
-  validateChildren,
-};
+const GridContext = createContext<GridContextProps>({
+  numberOfColumns: 12,
+  gutterSize: 12,
+  margin: 12,
+  sizePerSpan: 0,
+  getSizeSpan: span => 0,
+});
+
+export {GridContext, Card, Section, GridSystem, validateChildren};

package/Layout/types.ts

@@ -2,11 +2,20 @@ import {ViewProps} from 'react-native';
 
 type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
-export interface ScreenSectionProps extends ViewProps {
+export type GridContextProps = {
+  numberOfColumns: number;
+  gutterSize: number;
+  margin?: number;
+  sizePerSpan: number;
+  getSizeSpan: (span: number) => number;
+};
+export interface SectionProps extends ViewProps {
   expanded?: boolean;
+  useMargin?: boolean;
 }
 
-export interface SectionItemProps extends ViewProps {
+export interface CardProps extends ViewProps {
   widthSpan: SpanNumber;
   heightSpan?: SpanNumber;
+  usePadding?: boolean;
 }

package/Layout/utils.ts

@@ -1,38 +1,5 @@
-import {Alert, Dimensions} from 'react-native';
+import {Alert} from 'react-native';
 import React, {ReactElement} from 'react';
-import {GutterSize, NumberOfColumns, ScreenPadding} from '../Consts';
-
-/**
- * hook component for use grid system
- * @param useMargin
- */
-const useGridSystem = (useMargin: boolean = true) => {
-  const isDevMode = false;
-  const gutterSize = GutterSize;
-  const screenPadding = useMargin ? ScreenPadding : 0;
-  const numberOfColumns = NumberOfColumns;
-  const widthDevice = Dimensions.get('window').width;
-  const parentWidth = widthDevice - screenPadding * 2;
-  const totalGutterSize = gutterSize * (numberOfColumns - 1);
-  const sizePerSpan = (parentWidth - totalGutterSize) / numberOfColumns;
-
-  /**
-   * get size of element with number span
-   * @param span
-   */
-  const getSizeSpan = (span: number = numberOfColumns): number => {
-    return span * sizePerSpan + (span - 1) * gutterSize;
-  };
-
-  return {
-    isDevMode,
-    gutterSize,
-    screenPadding,
-    numberOfColumns,
-    sizePerSpan,
-    getSizeSpan,
-  };
-};
 
 /**
  * validate children type
@@ -80,4 +47,4 @@ const validateChildren = (
   return results;
 };
 
-export {useGridSystem, validateChildren};
+export {validateChildren};

package/Navigation/Components.tsx

@@ -8,10 +8,9 @@ import {
   View,
 } from 'react-native';
 import {ApplicationContext, NavigationButton} from './index';
-import {Colors, Spacing, Styles} from '../Consts';
+import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {HeaderBackgroundProps, TitleCustomProps} from './types';
-import {useGridSystem} from '../Layout';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
 
@@ -25,8 +24,10 @@ const styles = StyleSheet.create({
   headerTitleContainer: {
     alignItems: 'center',
     justifyContent: 'center',
+    width: '100%',
   },
-  avatar: {width: 36, height: 36, borderRadius: 18},
+  circle: {width: 36, height: 36, borderRadius: 18},
+  square: {width: 36, height: 36, borderRadius: Radius.XS},
   dotAvatar: {
     position: 'absolute',
     width: 12,
@@ -74,6 +75,7 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
+      accessibilityLabel={`HeaderTitle/${props.children}`}
       style={[styles.title, {opacity, color: props.tintColor}]}
     />
   );
@@ -94,7 +96,12 @@ const HeaderLeft: React.FC<any> = ({tintColor}) => {
 
   return (
     <View style={styles.headerLeft}>
-      <NavigationButton icon="ic_back" tintColor={tintColor} onPress={goBack} />
+      <NavigationButton
+        icon="ic_back"
+        tintColor={tintColor}
+        onPress={goBack}
+        accessibilityLabel={'Back'}
+      />
     </View>
   );
 };
@@ -106,7 +113,9 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
   let headerImage = theme.assets?.headerBackground;
+  let borderBottomWidth = 0;
   if (image === null) {
+    borderBottomWidth = 1;
     headerImage = undefined;
   }
   const opacity = animatedValue?.interpolate({
@@ -114,6 +123,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
     outputRange: [0, 1],
     extrapolate: 'clamp',
   });
+
   return (
     <Animated.View
       style={[
@@ -121,7 +131,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
         {
           backgroundColor: backgroundColor ?? theme.colors.background.default,
           overflow: 'hidden',
-          borderBottomWidth: headerImage ? 0 : 1,
+          borderBottomWidth: borderBottomWidth,
           borderColor: theme.colors.border.default,
           opacity,
         },
@@ -129,7 +139,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       <StatusBar
         barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
       />
-      {headerImage && (
+      {headerImage || (
         <Image style={styles.headerBackground} source={{uri: headerImage}} />
       )}
     </Animated.View>
@@ -140,17 +150,17 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   title,
   subTitle,
   image,
+  imageShape = 'circle',
   content,
   tintColor,
   dotColor,
 }) => {
-  const {getSizeSpan} = useGridSystem();
-
+  const avatarStyle = imageShape == 'circle' ? styles.square : styles.square;
   const header = (
     <View style={Styles.row}>
       <View>
-        <Image source={{uri: image}} style={styles.avatar} />
-        {dotColor && (
+        <Image source={{uri: image}} style={avatarStyle} />
+        {dotColor || (
           <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
         )}
       </View>
@@ -164,11 +174,7 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
       </View>
     </View>
   );
-  return (
-    <View style={[styles.headerTitleContainer, {width: getSizeSpan(10)}]}>
-      {content ?? header}
-    </View>
-  );
+  return <View style={styles.headerTitleContainer}>{content ?? header}</View>;
 };
 
 const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
@@ -214,11 +220,11 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
             borderWidth: backgroundColor ? 0.5 : 0,
           },
         ]}>
-        <TouchableOpacity>
+        <TouchableOpacity accessibilityLabel={'Toolkit/More'}>
           <Icon color={tintColor} source="navigation_more_horiz" size={20} />
         </TouchableOpacity>
         <View style={[styles.divider, {backgroundColor: tintColor}]} />
-        <TouchableOpacity>
+        <TouchableOpacity accessibilityLabel={'Toolkit/Close'}>
           <Icon
             color={tintColor}
             source="16_navigation_close_circle"

package/Navigation/ModalScreen.tsx

@@ -63,7 +63,7 @@ const Modal: React.FC<ModalParams> = ({navigation, route}) => {
             style={styles.modalSpaceVertical}
             onPress={() => onDismiss()}
           />
-          <View style={styles.modalContent}>
+          <View style={styles.modalContent} accessibilityLabel={'Modal'}>
             <Component {...params} />
           </View>
           <Pressable
@@ -128,7 +128,9 @@ const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
         }}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View style={{paddingBottom: bottom}}>
+        <View
+          style={{paddingBottom: bottom}}
+          accessibilityLabel={'BottomSheet'}>
           <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View

package/Navigation/NavigationButton.tsx

@@ -11,6 +11,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   onPress,
   backgroundColor,
   useBorder = true,
+  accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
   if (!backgroundColor && tintColor != Colors.black_01) {
@@ -19,6 +20,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
 
   return (
     <TouchableOpacity
+      accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
       style={[
         styles.container,
         {

package/Navigation/NavigationContainer.tsx

@@ -10,7 +10,7 @@ import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
-import {GridSystem, useGridSystem} from '../Layout';
+import {GridSystem} from '../Layout';
 import {defaultContext} from '../Consts';
 import {NavigationContainerProps} from './types';
 
@@ -22,7 +22,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   theme,
   options,
 }) => {
-  const grid = useGridSystem();
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
 
@@ -75,7 +74,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
           </ReactNavigationContainer>
         </ApplicationContext.Provider>
       </BottomSheetModalProvider>
-      {grid.isDevMode && <GridSystem />}
+      {__DEV__ && <GridSystem />}
     </SafeAreaProvider>
   );
 };

package/Navigation/StackScreen.tsx

@@ -24,7 +24,6 @@ const StackScreen: React.FC<any> = props => {
     }
   }, [options]);
 
-  console.log(params);
   return <Component {...params} />;
 };
 

package/Navigation/types.ts

@@ -71,9 +71,11 @@ export type NavigationContainerProps = {
 export interface ScreenContainerProps extends ViewProps {
   edges?: any[];
   enableKeyboardAvoidingView?: boolean;
-  scrollable: boolean;
+  headerBackground?: string;
+  scrollable?: boolean;
+  scrollY?: Animated.Value;
   scrollViewProps?: ScrollViewProps;
-  headerImage?: string;
+  footerComponent?: React.ElementType;
 }
 
 export type ScreenParams = {
@@ -100,6 +102,7 @@ export type NavigationButtonProps = {
   backgroundColor?: string;
   useBorder?: boolean;
   onPress: () => void;
+  accessibilityLabel?: string;
 };
 
 export type NavigationOptions = {
@@ -121,6 +124,7 @@ export type TitleCustomProps = {
   title?: string;
   subTitle?: string;
   image?: string;
+  imageShape?: 'circle' | 'square';
   dotColor?: string;
   tintColor?: string;
   content?: React.ReactNode;

package/Popup/PopupNotify.tsx

@@ -36,11 +36,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     const renderRow = () => {
       return (
         <View style={Styles.row}>
-          {secondary?.title && (
+          {secondary?.title || (
             <>
               <View style={Styles.flex}>
                 <Button
-                  title={secondary.title}
+                  title={secondary?.title as string}
                   type="text"
                   size="medium"
                   onPress={() => {
@@ -73,11 +73,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               onAction(primary.onPress);
             }}
           />
-          {secondary?.title && (
+          {secondary?.title || (
             <>
               <View style={styles.buttonSpace} />
               <Button
-                title={secondary.title}
+                title={secondary?.title as string}
                 type="text"
                 size="medium"
                 onPress={() => {
@@ -132,6 +132,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
+      accessibilityLabel={'PopupNotify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},
@@ -146,7 +147,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             {description}
           </Text>
         </View>
-        {information && (
+        {information || (
           <View style={styles.information}>
             <Text
               typography={'description_xs'}

package/Popup/PopupPromotion.tsx

@@ -38,7 +38,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
   };
 
   return (
-    <>
+    <View accessibilityLabel={'PopupPromotion'}>
       <Image
         style={styles.container}
         source={{
@@ -46,7 +46,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
         }}
       />
       {buildCloseIcon()}
-    </>
+    </View>
   );
 };
 

package/Radio/index.tsx

@@ -39,6 +39,7 @@ const Radio: FC<RadioProps> = ({
 
   return (
     <TouchableOpacity
+      accessibilityLabel={`Radio/${label}`}
       onPress={onChange}
       disabled={disabled}
       style={[

package/Skeleton/index.tsx

@@ -2,9 +2,8 @@ import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {Animated, Easing, Platform, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {SkeletonTypes} from './types';
-import {Styles} from '../Consts';
+import {Colors, Styles} from '../Consts';
 import styles from './styles';
-import {Colors} from '@momo-kits/foundation';
 
 const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
   const [width, setWidth] = useState(0);
@@ -42,7 +41,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
     }
   };
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, style]} accessibilityLabel={'Skeleton'}>
       <View
         onLayout={e => onLayout(e.nativeEvent.layout.width)}
         style={[Styles.flex, {backgroundColor: PRIMARY_COLOR}]}>

package/Switch/index.tsx

@@ -18,6 +18,7 @@ const Switch: FC<SwitchProps> = props => {
 
   return (
     <TouchableOpacity
+      accessibilityLabel={'Switch'}
       disabled={disabled}
       onPress={() => onChange?.(!value)}
       style={[

package/Text/index.tsx

@@ -3,6 +3,7 @@ import {Text as RNText, TextProps as RNTextProps} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
 import {ApplicationContext} from '../Navigation';
+import {GridContext} from '../Layout';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -40,6 +41,7 @@ const FontStyle: {[key: string]: string} = {
 export interface TextProps extends RNTextProps {
   typography: Typography;
   color?: string;
+  widthSpan?: number;
 }
 
 const Text: React.FC<TextProps> = ({
@@ -47,8 +49,10 @@ const Text: React.FC<TextProps> = ({
   color,
   children,
   style,
+  widthSpan,
   ...rest
 }) => {
+  const grid = useContext(GridContext);
   const {theme} = useContext(ApplicationContext);
 
   const getTypoStyle = (typo: Typography) => {
@@ -83,11 +87,17 @@ const Text: React.FC<TextProps> = ({
   };
 
   const textStyle = getTypoStyle(typography);
-
+  const spanStyle = widthSpan ? {width: grid.getSizeSpan(widthSpan)} : {};
   return (
     <RNText
       {...rest}
-      style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
+      accessibilityLabel={`Text/${children}`}
+      style={[
+        style,
+        textStyle,
+        spanStyle,
+        {color: color ?? theme.colors.text.default},
+      ]}>
       {children ?? ''}
     </RNText>
   );

package/package.json

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

package/Layout/SectionItem.tsx

@@ -1,63 +0,0 @@
-import React, {useContext} from 'react';
-import {View} from 'react-native';
-import {useGridSystem} from './index';
-import {SectionItemProps} from './types';
-import {ApplicationContext} from '../Navigation';
-
-const SectionItem: React.FC<SectionItemProps> = ({
-  widthSpan = 12,
-  heightSpan,
-  children,
-  style,
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const grid = useGridSystem();
-
-  /**
-   * render overlay view only dev mode
-   */
-  const renderOverlay = () => {
-    return (
-      <View
-        pointerEvents={'none'}
-        style={{
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          borderColor: 'red',
-          borderWidth: 1,
-        }}
-      />
-    );
-  };
-
-  const styles: any = style ?? {};
-
-  return (
-    <View
-      style={{
-        ...styles,
-        width: grid.getSizeSpan(widthSpan),
-        height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
-        overflow: 'hidden',
-        margin: undefined,
-        marginTop: undefined,
-        marginBottom: undefined,
-        marginLeft: undefined,
-        marginRight: undefined,
-      }}>
-      {children}
-      {grid.isDevMode && renderOverlay()}
-    </View>
-  );
-};
-
-SectionItem.defaultProps = {
-  widthSpan: 12,
-};
-
-SectionItem.displayName = 'SectionItem';
-
-export default SectionItem;