@momo-kits/foundation 1.0.12 → 1.0.14

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,8 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
 
   return (
     <Image
+      accessibilityLabel={`Icon/${getIconSource()}`}
+      loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
       tintColor={color ?? theme.colors.text.default}

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

@@ -10,11 +10,18 @@ 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(typeof source === 'object');
+  const [loading, setLoading] = useState(rest.loading);
   const [fail, setFail] = useState(false);
 
   /**
@@ -47,14 +54,16 @@ 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}
         style={styles.image}
         onLoad={() => {
           setFail(false);
-          setLoading(true);
+          setLoading(rest.loading);
         }}
         onLoadEnd={() => setLoading(false)}
         onError={() => setFail(true)}
@@ -64,4 +73,8 @@ 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

@@ -7,16 +7,12 @@ import {
   View,
 } from 'react-native';
 import {InputSearchProps} from './index';
-import {getBorderColor} from './common';
 import {ApplicationContext} from '../Navigation';
 import styles from './styles';
 import {Icon} from '../Icon';
-import {Image} from '../Image';
 import {Text} from '../Text';
 
 const InputSearch: FC<InputSearchProps> = ({
-  errorMessage,
-  disabled,
   placeholder,
   onFocus,
   onBlur,
@@ -27,6 +23,7 @@ const InputSearch: FC<InputSearchProps> = ({
   buttonText = 'Hủy',
   showButtonText = true,
   showIcon = true,
+  showBorder = true,
   style,
   ...props
 }) => {
@@ -54,20 +51,25 @@ const InputSearch: FC<InputSearchProps> = ({
     onChangeText?.(text);
   };
 
+  const getBorderColor = () => {
+    let borderColor = showBorder
+      ? theme.colors.border.default
+      : theme.colors.background.surface;
+
+    if (focused) {
+      borderColor = theme.colors.primary;
+    }
+
+    return {borderColor};
+  };
+
   const renderInputView = () => {
-    const disabledColor = theme.colors.text.disable;
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
 
-    if (disabled) {
-      textColor = disabledColor;
-      placeholderColor = disabledColor;
-      iconTintColor = disabledColor;
-    }
     return (
       <TextInput
         {...props}
-        editable={!disabled}
         textAlignVertical="top"
         ref={inputRef}
         style={[
@@ -112,19 +114,27 @@ const InputSearch: FC<InputSearchProps> = ({
                 },
               ]}
             />
-            <Icon color={iconTintColor} source={icon} />
+            <Icon
+              color={iconTintColor}
+              source={icon}
+              style={styles.iconSearchInput}
+            />
           </View>
         )}
       </View>
     );
   };
   return (
-    <View style={[style, styles.searchInputContainer]}>
+    <View
+      style={[style, styles.searchInputContainer]}
+      accessibilityLabel={`InputSearch`}>
       <View
         style={[
-          getBorderColor(focused, errorMessage, disabled),
+          getBorderColor(),
           styles.searchInputWrapper,
-          {backgroundColor: theme.colors.background.surface},
+          {
+            backgroundColor: theme.colors.background.surface,
+          },
         ]}>
         <Icon
           source={'navigation_search'}

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/index.tsx

@@ -20,17 +20,21 @@ type InputPropsWithoutSizeAndIcon = Omit<
   InputProps,
   'size' | 'icon' | 'iconColor'
 >;
-type InputPropsWithoutRequiredAndSize = Omit<InputProps, 'required' | 'size'>;
+type InputPropsOmitForSearch = Omit<
+  InputProps,
+  'required' | 'size' | 'errorMessage' | 'disabled'
+>;
 type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
 export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
   height?: number;
 }
 
-export interface InputSearchProps extends InputPropsWithoutRequiredAndSize {
+export interface InputSearchProps extends InputPropsOmitForSearch {
   buttonText?: string;
   showButtonText?: boolean;
   showIcon?: boolean;
+  showBorder?: boolean;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Input/styles.ts

@@ -104,8 +104,6 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   iconSearchInput: {
-    width: 24,
-    height: 24,
     marginLeft: Spacing.S,
   },
   searchInputContainer: {flexDirection: 'row', alignItems: 'center'},

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

@@ -1,36 +1,60 @@
-import {KeyboardAvoidingView, Platform, ScrollView, View} from 'react-native';
+import {Animated, KeyboardAvoidingView, Platform, View} from 'react-native';
 import {useHeaderHeight} from '@react-navigation/stack';
 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 {Section, validateChildren} from './index';
 
 const ScreenContainer: React.FC<ScreenContainerProps> = ({
   children,
   edges,
   enableKeyboardAvoidingView,
   scrollable,
+  scrollY,
+  headerBackground,
   scrollViewProps,
+  footerComponent: Footer,
 }) => {
+  let marginHeader = 0;
+  let handleScroll;
+  let imageAnimatedStyle = {};
   let Component: any = View;
   const headerHeight = useHeaderHeight();
   if (scrollable) {
-    Component = ScrollView;
+    Component = Animated.ScrollView;
+  }
+  if (scrollY) {
+    marginHeader = useHeaderHeight();
+    imageAnimatedStyle = {
+      transform: [
+        {
+          scale: scrollY.interpolate?.({
+            inputRange: [-300, -110, 100],
+            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}
@@ -42,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}
@@ -51,9 +96,13 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
           ios: 'padding',
           android: undefined,
         })}>
-        <Component {...scrollViewProps} style={Styles.flex}>
+        <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/BottomTab.tsx

@@ -10,11 +10,10 @@ const BottomTab: FC<BottomTabProps> = ({tabs}) => {
     <Tab.Navigator>
       {tabs.map((item, index) => {
         return (
-          // @ts-ignore
           <Tab.Screen
             key={`${item.label}-${index}`}
             name={item.label}
-            component={item.component}
+            component={item.screen}
             options={{
               tabBarLabel: item.label,
               tabBarBadge: item?.badgeLabel,

package/Navigation/Components.tsx

@@ -1,5 +1,6 @@
 import React, {useContext} from 'react';
 import {
+  Animated,
   DeviceEventEmitter,
   StatusBar,
   StyleSheet,
@@ -10,7 +11,6 @@ import {ApplicationContext, NavigationButton} from './index';
 import {Colors, 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';
 
@@ -24,6 +24,7 @@ const styles = StyleSheet.create({
   headerTitleContainer: {
     alignItems: 'center',
     justifyContent: 'center',
+    width: '100%',
   },
   avatar: {width: 36, height: 36, borderRadius: 18},
   dotAvatar: {
@@ -47,7 +48,6 @@ const styles = StyleSheet.create({
     marginLeft: Spacing.S,
     padding: Spacing.XS,
     height: 28,
-    borderWidth: 0.5,
     borderRadius: 14,
     borderColor: '#00000066',
     justifyContent: 'center',
@@ -62,15 +62,20 @@ const styles = StyleSheet.create({
   headerLeft: {
     marginLeft: 12,
   },
+  title: {fontSize: 15, lineHeight: 22, fontWeight: '600'},
 });
 
-const HeaderTitle = (props: any) => {
+const HeaderTitle: React.FC<any> = props => {
+  const opacity = props.animatedValue?.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
   return (
-    <Text
+    <Animated.Text
       {...props}
-      typography="header_default"
-      weight="bold"
-      color={props.tintColor}
+      accessibilityLabel={`HeaderTitle/${props.children}`}
+      style={[styles.title, {opacity, color: props.tintColor}]}
     />
   );
 };
@@ -90,7 +95,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>
   );
 };
@@ -98,19 +108,31 @@ const HeaderLeft: React.FC<any> = ({tintColor}) => {
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
   backgroundColor,
+  animatedValue,
 }) => {
   const {theme} = useContext(ApplicationContext);
   let headerImage = theme.assets?.headerBackground;
+  let borderBottomWidth = 0;
   if (image === null) {
+    borderBottomWidth = 1;
     headerImage = undefined;
   }
+  const opacity = animatedValue?.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+
   return (
-    <View
+    <Animated.View
       style={[
         Styles.flex,
         {
           backgroundColor: backgroundColor ?? theme.colors.background.default,
           overflow: 'hidden',
+          borderBottomWidth: borderBottomWidth,
+          borderColor: theme.colors.border.default,
+          opacity,
         },
       ]}>
       <StatusBar
@@ -119,7 +141,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       {headerImage && (
         <Image style={styles.headerBackground} source={{uri: headerImage}} />
       )}
-    </View>
+    </Animated.View>
   );
 };
 
@@ -131,8 +153,6 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   tintColor,
   dotColor,
 }) => {
-  const {getSizeSpan} = useGridSystem();
-
   const header = (
     <View style={Styles.row}>
       <View>
@@ -151,11 +171,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}) => {
@@ -193,21 +209,19 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
 
   return (
     <View style={styles.headerRightButton}>
-      <NavigationButton
-        icon="addFavorite"
-        tintColor={tintColor}
-        onPress={() => {}}
-      />
       <View
         style={[
           styles.toolkitContainer,
-          {backgroundColor: backgroundColor ?? '#00000066'},
+          {
+            backgroundColor: backgroundColor ?? '#00000066',
+            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,11 +20,12 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
 
   return (
     <TouchableOpacity
+      accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
       style={[
         styles.container,
         {
           backgroundColor: backgroundColor ?? '#00000066',
-          borderWidth: useBorder ? 0.5 : 0,
+          borderWidth: useBorder && backgroundColor ? 0.5 : 0,
         },
       ]}
       onPress={onPress}>

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

@@ -22,7 +22,7 @@ const StackScreen: React.FC<any> = props => {
     if (options) {
       params.navigation.setOptions(options);
     }
-  }, [navigation, options]);
+  }, [options]);
 
   return <Component {...params} />;
 };

package/Navigation/types.ts

@@ -1,5 +1,5 @@
-import {ScrollViewProps, ViewProps} from 'react-native';
-import React, {ComponentType, ReactElement} from 'react';
+import {Animated, ScrollViewProps, ViewProps} from 'react-native';
+import React from 'react';
 import Navigator from './Navigator';
 
 export type Theme = {
@@ -71,8 +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;
+  footerComponent?: React.ElementType;
 }
 
 export type ScreenParams = {
@@ -99,6 +102,7 @@ export type NavigationButtonProps = {
   backgroundColor?: string;
   useBorder?: boolean;
   onPress: () => void;
+  accessibilityLabel?: string;
 };
 
 export type NavigationOptions = {
@@ -107,11 +111,13 @@ export type NavigationOptions = {
   headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
   headerRight?: (props?: any) => React.ReactElement;
+  animatedValue?: Animated.Value;
 };
 
 export type HeaderBackgroundProps = {
   image?: string | null;
   backgroundColor?: string | null;
+  animatedValue?: Animated.Value;
 };
 
 export type TitleCustomProps = {
@@ -128,7 +134,7 @@ export type BottomTabItemProps = {
   icon: string;
   showDot?: boolean;
   badgeLabel?: string;
-  component: ComponentType<any> | undefined;
+  screen: React.ComponentType<any>;
 };
 
 export type BottomTabProps = {

package/Navigation/utils.tsx

@@ -73,43 +73,58 @@ const getModalOptions = (): StackNavigationOptions => {
 };
 
 const getOptions = (params: NavigationOptions, theme: Theme) => {
-  let surfaceTheme: {};
-  let titleTheme: {};
+  let backgroundProps = {};
+  let titleProps = {};
+  let options = {};
 
   if (params.surface == true) {
-    surfaceTheme = {
-      headerBackground: () => (
-        <HeaderBackground
-          image={null}
-          backgroundColor={theme.colors.background.surface}
-        />
-      ),
+    options = {
+      ...options,
       ...getTintColor({
         ...theme,
         assets: {...theme.assets, headerBackground: undefined},
       }),
     };
-  } else {
-    surfaceTheme = {
-      headerBackground: HeaderBackground,
-      ...getTintColor(theme),
+    backgroundProps = {
+      ...backgroundProps,
+      image: null,
+      backgroundColor: theme.colors.background.surface,
     };
+  } else {
+    backgroundProps = {};
+    options = {...options, ...getTintColor(theme)};
+  }
+
+  if (params.animatedValue) {
+    backgroundProps = {...backgroundProps, animatedValue: params.animatedValue};
+    titleProps = {...titleProps, animatedValue: params.animatedValue};
+    options = {...options, headerTransparent: true};
+  } else {
+    options = {...options, headerTransparent: false};
   }
 
   if (params.customTitle) {
-    titleTheme = {
+    options = {
+      ...options,
       headerTitleAlign: 'left',
       headerTitle: (props: any) => {
         return <HeaderCustom {...params.customTitle} {...props} />;
       },
     };
   } else {
-    titleTheme = {
-      headerTitle: HeaderTitle,
+    options = {
+      ...options,
+      headerTitle: (props: any) => {
+        return <HeaderTitle {...titleProps} {...props} />;
+      },
     };
   }
 
-  return {...params, ...surfaceTheme, ...titleTheme};
+  return {
+    ...params,
+    ...options,
+    headerBackground: () => <HeaderBackground {...backgroundProps} />,
+  };
 };
 
 export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Popup/PopupNotify.tsx

@@ -132,6 +132,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
+      accessibilityLabel={'PopupNotify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -3,7 +3,7 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
 import {ApplicationContext} from '../Navigation';
 import {Image} from '../Image';
-import {Radius} from '../Consts';
+import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({image, onClose}) => {
@@ -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>
   );
 };
 
@@ -55,11 +55,10 @@ const styles = StyleSheet.create({
     aspectRatio: 0.72,
   },
   iconCloseContainer: {
-    position: 'absolute',
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'center',
-    bottom: -36,
+    marginTop: Spacing.L,
   },
   iconClose: {
     width: 20,

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

@@ -42,7 +42,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.12",
+  "version": "1.0.14",
   "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;