@momo-kits/foundation 1.0.3 → 1.0.4

package/Button/index.tsx

@@ -41,7 +41,6 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];

package/CheckBox/index.tsx

@@ -1,12 +1,10 @@
 import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
-
 import {CheckBoxProps} from './types';
-import {Text} from '@momo-kits/foundation';
 import styles from './styles';
 import Image from 'react-native-fast-image';
 import {ApplicationContext} from '../Navigation';
-import {Colors} from '../Consts';
+import {Text} from '../Text';
 
 const IC_INDETERMINATED = 'https://img.mservice.com.vn/app/img/kits/minus.png';
 const IC_CHECKED_DEFAULT =

package/ContentLoader/index.tsx

@@ -1,8 +1,8 @@
 import React, {useContext, useEffect, useMemo, useRef} from 'react';
 import {Animated, Platform, useWindowDimensions, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import {ContentLoaderTypes} from './types';
 import {ApplicationContext} from '../Navigation';
-import LinearGradient from 'react-native-linear-gradient';
 import {Styles} from '../Consts';
 import styles from './styles';
 const ContentLoader: React.FC<ContentLoaderTypes> = ({style}) => {

package/Icon/icon.json

@@ -3931,5 +3931,8 @@
   },
   "header_background": {
     "uri": "https://img.mservice.com.vn/app/img/kits/navigation-bar.png"
+  },
+  "ic_error": {
+    "uri": "https://img.mservice.com.vn/app/img/kits/error_mess_icon.png"
   }
 }

package/Icon/index.tsx

@@ -1,8 +1,10 @@
 import React, {useContext} from 'react';
-import {IconProps, Image, ApplicationContext} from '../index';
 import IconSources from './icon.json';
+import {IconProps} from './types';
+import {ApplicationContext} from '../Navigation';
+import {Image} from '../Image';
 
-const Icon: React.FC<IconProps> = ({source, size, color}) => {
+const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
   const {theme} = useContext(ApplicationContext);
 
   /**
@@ -10,7 +12,7 @@ const Icon: React.FC<IconProps> = ({source, size, color}) => {
    */
   const getIconSource = (): any => {
     if (source && !source.includes('http')) {
-      let icon: {[key: string]: object} = IconSources;
+      let icon: {[key: string]: {uri: string}} = IconSources;
       return icon[source] ?? icon.ic_warning;
     }
     return {uri: source};
@@ -19,7 +21,7 @@ const Icon: React.FC<IconProps> = ({source, size, color}) => {
   return (
     <Image
       source={getIconSource()}
-      style={{width: size, height: size}}
+      style={[style, {width: size, height: size}]}
       tintColor={color ?? theme.colors.text.default}
     />
   );

package/Icon/types.ts

@@ -1,5 +1,8 @@
+import {ViewStyle} from 'react-native';
+
 export type IconProps = {
-  source?: string;
+  source: string;
   size?: number;
   color?: string;
+  style?: ViewStyle;
 };

package/Image/index.tsx

@@ -1,15 +1,18 @@
 import React, {useContext, useState} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import FastImage from 'react-native-fast-image';
-
 import styles from './styles';
-import {ImageProps} from './types';
 import {ApplicationContext} from '../Navigation';
 import {ContentLoader} from '../ContentLoader';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
+import {FastImagePropsWithoutStyle} from './types';
+
+export interface ImageProps extends FastImagePropsWithoutStyle {
+  style?: StyleProp<ViewStyle>;
+}
 
-const Image: React.FC<ImageProps> = ({style, placeholder, source, ...rest}) => {
+const Image: React.FC<ImageProps> = ({style, source, ...rest}) => {
   const {theme} = useContext(ApplicationContext);
   const [loading, setLoading] = useState(typeof source === 'object');
   const [fail, setFail] = useState(false);
@@ -20,7 +23,7 @@ const Image: React.FC<ImageProps> = ({style, placeholder, source, ...rest}) => {
    */
   const renderContent = () => {
     if (loading || fail) {
-      let content = placeholder ?? (
+      let content = (
         <ContentLoader style={[StyleSheet.absoluteFill, styles.image]} />
       );
       if (fail) {
@@ -61,8 +64,4 @@ const Image: React.FC<ImageProps> = ({style, placeholder, source, ...rest}) => {
   );
 };
 
-Image.defaultProps = {
-  style: {},
-};
-
 export {Image};

package/Image/types.ts

@@ -1,5 +1,3 @@
 import {FastImageProps} from 'react-native-fast-image';
 
-export interface ImageProps extends FastImageProps {
-  placeholder?: boolean;
-}
+export type FastImagePropsWithoutStyle = Omit<FastImageProps, 'style'>;

package/Input/Input.tsx

@@ -3,7 +3,6 @@ import {
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
-  TextInputProps,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -13,12 +12,7 @@ import {Text} from '../Text';
 import {Image} from '../Image';
 import {getBorderColor, renderFloatingView} from './common';
 import {InputProps} from './index';
-
-const errorMessageIcon =
-  'https://img.mservice.com.vn/app/img/kits/error_mess_icon.png';
-const ic_clear =
-  'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_close_circle_full.png';
-const MAX_LENGTH = 100;
+import {Icon} from '../Icon';
 
 const Input: FC<InputProps> = ({
   value,
@@ -34,11 +28,11 @@ const Input: FC<InputProps> = ({
   disabled,
   floatingIconColor,
   iconColor,
+  ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
-
   const [focused, setFocused] = useState(false);
-  const inputRef = useRef(null);
+  const inputRef = useRef<any>(null);
 
   const onClearText = () => {
     inputRef?.current?.clear();
@@ -91,6 +85,7 @@ const Input: FC<InputProps> = ({
         )}
         <View style={styles.inputView}>
           <TextInput
+            {...props}
             editable={!disabled}
             textAlignVertical="top"
             ref={inputRef}
@@ -112,10 +107,10 @@ const Input: FC<InputProps> = ({
         <View style={styles.iconView}>
           {focused && (
             <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Image
-                tintColor={theme.colors.text.hint}
-                source={{uri: ic_clear}}
-                style={styles.iconClose}
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
               />
             </TouchableOpacity>
           )}
@@ -135,7 +130,13 @@ const Input: FC<InputProps> = ({
     if (errorMessage) {
       return (
         <View style={styles.errorView}>
-          <Image style={styles.errorIcon} source={{uri: errorMessageIcon}} />
+          <View style={styles.errorIcon}>
+            <Icon
+              source="ic_error"
+              size={16}
+              color={theme.colors.error.primary}
+            />
+          </View>
           <Text color={theme.colors.error.primary} typography={'description_s'}>
             {errorMessage}
           </Text>
@@ -154,8 +155,6 @@ const Input: FC<InputProps> = ({
 
 Input.defaultProps = {
   size: 'large',
-  maxLength: MAX_LENGTH,
-  disabled: false,
 };
 
 export default Input;

package/Input/TextArea.tsx

@@ -3,21 +3,16 @@ import {
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
-  TextInputProps,
   TouchableOpacity,
   View,
 } from 'react-native';
 import styles from './styles';
-import {Image} from '../Image';
 import {Text} from '../Text';
 import {ApplicationContext} from '../Navigation';
 import {getBorderColor, renderFloatingView} from './common';
 import {TextAreaProps} from './index';
+import {Icon} from '../Icon';
 
-const errorMessageIcon =
-  'https://img.mservice.com.vn/app/img/kits/error_mess_icon.png';
-const ic_clear =
-  'https://img.mservice.io/momo_app_v2/new_version/img/appx_icon/24_navigation_close_circle_full.png';
 const DEFAULT_HEIGHT = 112;
 const MAX_LENGTH = 300;
 
@@ -122,10 +117,10 @@ const TextArea: FC<TextAreaProps> = props => {
           </View>
           {focused && (
             <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Image
-                tintColor={theme.colors.text.hint}
-                source={{uri: ic_clear}}
-                style={styles.iconClose}
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
               />
             </TouchableOpacity>
           )}
@@ -139,7 +134,13 @@ const TextArea: FC<TextAreaProps> = props => {
     if (errorMessage) {
       return (
         <View style={styles.errorView}>
-          <Image style={styles.errorIcon} source={{uri: errorMessageIcon}} />
+          <View style={styles.errorIcon}>
+            <Icon
+              source="ic_error"
+              size={16}
+              color={theme.colors.error.primary}
+            />
+          </View>
           <Text color={theme.colors.error.primary} typography={'description_s'}>
             {errorMessage}
           </Text>

package/Input/styles.ts

@@ -29,7 +29,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
   },
   floatingIcon: {width: 16, height: 16, marginLeft: Spacing.XS},
-  errorIcon: {width: 16, height: 16, marginRight: Spacing.XS},
+  errorIcon: {marginRight: Spacing.XS},
   errorView: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -38,10 +38,6 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
     flex: 1,
   },
-  iconClose: {
-    width: 16,
-    height: 16,
-  },
   iconView: {
     flexDirection: 'row',
     alignItems: 'center',

package/Layout/ScreenContainer.tsx

@@ -1,36 +1,23 @@
 import {KeyboardAvoidingView, Platform, ScrollView, View} from 'react-native';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import React, {useContext, useLayoutEffect} from 'react';
+import React from 'react';
 import {ScreenContainerProps} from '../Navigation/types';
-import {ApplicationContext} from '../Navigation';
 import {Spacing, Styles} from '../Consts';
 import {ScreenSection, validateChildren} from './index';
 
 const ScreenContainer: React.FC<ScreenContainerProps> = ({
   children,
-  navigation,
-  options,
   edges,
   enableKeyboardAvoidingView,
   scrollable,
 }) => {
   let Component: any = View;
-  const {theme} = useContext(ApplicationContext);
   const headerHeight = useHeaderHeight();
   if (scrollable) {
     Component = ScrollView;
   }
 
-  /**
-   * handle set options for navigation if have props options
-   */
-  useLayoutEffect(() => {
-    if (options) {
-      navigation.setOptions(options);
-    }
-  }, [navigation, options]);
-
   /**
    * build content for screen
    */
@@ -54,14 +41,7 @@ const ScreenContainer: React.FC<ScreenContainerProps> = ({
   };
 
   return (
-    <SafeAreaView
-      style={[
-        Styles.flex,
-        {
-          backgroundColor: theme.colors.background.default,
-        },
-      ]}
-      edges={edges}>
+    <SafeAreaView style={Styles.flex} edges={edges}>
       <KeyboardAvoidingView
         style={Styles.flex}
         keyboardVerticalOffset={headerHeight}

package/Navigation/Components.tsx

@@ -1,10 +1,11 @@
 import React, {useContext} from 'react';
 import {StatusBar, StyleSheet, View} from 'react-native';
 import {ApplicationContext, NavigationButton} from './index';
-import {Styles} from '../Consts';
+import {Colors, Styles} from '../Consts';
 import {Image} from '../Image';
 import {HeaderBackgroundProps, TitleCustomProps} from './types';
 import {useGridSystem} from '../Layout';
+import {Text} from '../Text';
 
 const styles = StyleSheet.create({
   headerBackground: {
@@ -17,14 +18,21 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  avatar: {width: 36, height: 36, borderRadius: 18},
+  dotAvatar: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    bottom: 0,
+    right: 0,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+  },
 });
 
-const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
-  surface = false,
-  image,
-}) => {
+const HeaderBackground: React.FC<HeaderBackgroundProps> = ({image}) => {
   const {theme} = useContext(ApplicationContext);
-  const allowImage = !surface && theme.assets?.headerBackground;
   return (
     <View
       style={[
@@ -32,14 +40,9 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
         {backgroundColor: theme.colors.background.surface, overflow: 'hidden'},
       ]}>
       <StatusBar
-        barStyle={allowImage || theme.dark ? 'light-content' : 'dark-content'}
+        barStyle={image || theme.dark ? 'light-content' : 'dark-content'}
       />
-      {allowImage && (
-        <Image
-          style={styles.headerBackground}
-          source={{uri: image ?? theme.assets?.headerBackground}}
-        />
-      )}
+      {image && <Image style={styles.headerBackground} source={{uri: image}} />}
     </View>
   );
 };
@@ -49,12 +52,32 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   subTitle,
   image,
   content,
+  tintColor,
+  dotColor,
 }) => {
   const {getSizeSpan} = useGridSystem();
 
+  const header = (
+    <View style={Styles.row}>
+      <View>
+        <Image source={{uri: image}} style={styles.avatar} />
+        {dotColor && (
+          <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
+        )}
+      </View>
+      <View style={[Styles.flex, Styles.paddingHorizontal8]}>
+        <Text typography="title_xs" color={tintColor}>
+          {title}
+        </Text>
+        <Text typography="description_s" color={tintColor}>
+          {subTitle}
+        </Text>
+      </View>
+    </View>
+  );
   return (
     <View style={[styles.headerTitleContainer, {width: getSizeSpan(10)}]}>
-      {content ?? <View />}
+      {content ?? header}
     </View>
   );
 };

package/Navigation/ModalScreen.tsx

@@ -26,11 +26,12 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
     backgroundColor,
     screen,
     barrierDismissible,
+    options,
   }: ModalParams = route.params;
   const Component = useRef(screen).current;
   const params = {
     ...route.params,
-    navigation: new Navigation(navigation),
+    navigation: new Navigation(navigation, theme),
   };
   delete params.screen;
 
@@ -54,6 +55,7 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
    */
   if (isBottomSheet) {
     const bgColor = backgroundColor ?? theme.colors.background.surface;
+    const sheetTheme = {...theme, assets: undefined};
     return (
       <BottomSheet {...rest} onDismiss={onDismiss}>
         <View style={[styles.sheetContainer, {backgroundColor: bgColor}]}>
@@ -66,26 +68,22 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
             />
           </View>
           <NavigationContainer
-            theme={{...theme, assets: undefined}}
-            screen={props => <Component {...params} {...props} />}
-            onDismiss={() => {
-              navigation.pop();
-            }}
-            screenOptions={{
+            theme={sheetTheme}
+            screen={props => <Component {...props} {...params} />}
+            options={{
+              ...options,
+              hiddenBack: true,
+              headerTitleAlign: 'center',
               headerRight: (props: any) => (
                 <HeaderRightAction>
                   <NavigationButton
                     icon="24_navigation_close"
                     {...props}
-                    onPress={onDismiss}
+                    onPress={() => navigation.pop()}
                   />
                 </HeaderRightAction>
               ),
-              headerBackground: () => (
-                <View style={[Styles.flex, {backgroundColor: bgColor}]} />
-              ),
             }}
-            hideBackFirst={true}
           />
         </View>
       </BottomSheet>

package/Navigation/Navigation.ts

@@ -1,13 +1,15 @@
 import {NavigationProp} from '@react-navigation/native';
-import {NavigationOptions} from './types';
+import {NavigationOptions, Theme} from './types';
 import {HeaderRightAction} from './index';
 import {getOptions} from './utils';
 
 class Navigation {
   instance: NavigationProp<any>;
+  theme: Theme;
 
-  constructor(instance: any) {
+  constructor(instance: any, theme: Theme) {
     this.instance = instance;
+    this.theme = theme;
   }
 
   verifyParams = (params: NavigationOptions) => {
@@ -17,9 +19,9 @@ class Navigation {
         console.warn(
           'headerRight not return element type of HeaderRightAction, Please migrate to use HeaderRightAction of kits.',
         );
-        return;
       }
     }
+    return params;
   };
 
   filterParams = (params: NavigationOptions) => {
@@ -27,9 +29,8 @@ class Navigation {
   };
 
   setOptions = (params: NavigationOptions) => {
-    this.verifyParams(params);
-    params = this.filterParams(params);
-    params = getOptions(params);
+    params = this.verifyParams(params);
+    params = getOptions(params, this.theme);
     this.instance.setOptions(params);
   };
 }

package/Navigation/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-import React, {createContext, useRef} from 'react';
+import React, {createContext, useEffect, useRef} from 'react';
 import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
@@ -11,7 +11,7 @@ import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {GridSystem, useGridSystem} from '../Layout';
-import {defaultContext, defaultTheme} from '../Consts';
+import {defaultContext} from '../Consts';
 import {NavigationContainerProps} from './types';
 
 const Stack = createStackNavigator();
@@ -20,23 +20,17 @@ const ApplicationContext = createContext(defaultContext);
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
   theme,
-  onDismiss,
-  screenOptions,
-  hideBackFirst,
+  options,
 }) => {
   const grid = useGridSystem();
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
-  const themed: any = theme;
 
-  const goBack = () => {
-    const canGoBack = navigationRef?.current?.canGoBack();
-    if (canGoBack) {
-      navigationRef?.current?.goBack();
-    } else {
-      onDismiss?.();
+  useEffect(() => {
+    if (options) {
+      navigationRef.current?.setParams({options: options});
     }
-  };
+  }, []);
 
   return (
     <SafeAreaProvider>
@@ -44,20 +38,31 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         <ApplicationContext.Provider
           value={{theme, navigator: navigator.current}}>
           <ReactNavigationContainer
-            theme={themed}
+            theme={{
+              ...theme,
+              dark: false,
+              colors: {
+                ...theme.colors,
+                background: theme.colors.background.default,
+                card: theme.colors.background.surface,
+                text: theme.colors.text.default,
+                border: theme.colors.border.default,
+                notification: theme.colors.error.primary,
+              },
+            }}
             ref={navigator.current?.ref}
             independent={true}>
             <Stack.Navigator initialRouteName="Stack" headerMode="screen">
               <Stack.Screen
                 name="Stack"
                 component={StackScreen}
-                initialParams={{screen, hideBackFirst}}
-                options={{...getStackOptions(theme, goBack), ...screenOptions}}
+                initialParams={{screen}}
+                options={getStackOptions(theme)}
               />
               <Stack.Screen
                 name="Dialog"
                 component={StackScreen}
-                options={getDialogOptions(theme, goBack)}
+                options={getDialogOptions(theme)}
                 initialParams={{screen}}
               />
               <Stack.Screen

package/Navigation/StackScreen.tsx

@@ -1,23 +1,28 @@
-import React, {useLayoutEffect} from 'react';
+import React, {useContext, useEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
+import {ApplicationContext} from './NavigationContainer';
 
 const StackScreen: React.FC<any> = props => {
   const {route, navigation} = props;
-  const {screen: Component, hideBackFirst}: ScreenParams = route.params;
+  const {screen: Component, options}: ScreenParams = route.params;
+  const {theme} = useContext(ApplicationContext);
 
   const params = {
     ...route.params,
-    navigation: new Navigation(navigation),
+    navigation: new Navigation(navigation, theme),
   };
 
   delete params.screen;
 
-  useLayoutEffect(() => {
-    if (hideBackFirst && !navigation?.canGoBack()) {
-      navigation?.setOptions({headerLeft: null});
+  /**
+   * handle set options for navigation if have props options
+   */
+  useEffect(() => {
+    if (options) {
+      params.navigation.setOptions(options);
     }
-  }, []);
+  }, [navigation, options]);
 
   return <Component {...params} />;
 };

package/Navigation/types.ts

@@ -1,8 +1,6 @@
 import {ViewProps} from 'react-native';
 import React from 'react';
 import Navigator from './Navigator';
-import Navigation from './Navigation';
-import {StackNavigationOptions} from '@react-navigation/stack';
 
 export type Theme = {
   dark: boolean;
@@ -66,15 +64,11 @@ export type Context = {
 
 export type NavigationContainerProps = {
   screen: React.ElementType;
-  screenOptions?: StackNavigationOptions;
-  hideBackFirst?: boolean;
+  options?: NavigationOptions;
   theme: Theme;
-  onDismiss?: () => void;
 };
 
 export interface ScreenContainerProps extends ViewProps {
-  navigation: Navigation;
-  options?: NavigationOptions;
   edges?: any[];
   enableKeyboardAvoidingView?: boolean;
   scrollable: boolean;
@@ -102,6 +96,7 @@ export type NavigationButtonProps = {
 
 export type NavigationOptions = {
   surface?: boolean;
+  hiddenBack?: boolean;
   title?: string;
   headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
@@ -109,7 +104,6 @@ export type NavigationOptions = {
 };
 
 export type HeaderBackgroundProps = {
-  surface?: boolean;
   image?: string;
 };
 
@@ -117,5 +111,7 @@ export type TitleCustomProps = {
   title?: string;
   subTitle?: string;
   image?: string;
+  dotColor?: string;
+  tintColor?: string;
   content?: React.ReactNode;
 };

package/Navigation/utils.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {
   StackNavigationOptions,
   TransitionPresets,
@@ -7,9 +7,9 @@ import {HeaderBackground, HeaderCustom} from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
 import {Text} from '../Text';
-import {NavigationButton} from './index';
+import {ApplicationContext, NavigationButton} from './index';
 
-const renderTitle = (props: any) => {
+const HeaderTitle = (props: any) => {
   return (
     <Text
       {...props}
@@ -20,6 +20,17 @@ const renderTitle = (props: any) => {
   );
 };
 
+const HeaderLeft = (props: any) => {
+  const {navigator} = useContext(ApplicationContext);
+  const goBack = () => {
+    const canGoBack = navigator?.ref.current?.canGoBack();
+    if (canGoBack) {
+      navigator?.ref.current?.goBack();
+    }
+  };
+  return <NavigationButton icon="ic_back" {...props} onPress={goBack} />;
+};
+
 const getTintColor = (theme: Theme): any => {
   if (theme.assets?.headerBackground) {
     return {
@@ -31,32 +42,26 @@ const getTintColor = (theme: Theme): any => {
   };
 };
 
-const getStackOptions = (
-  theme: Theme,
-  goBack: () => void,
-): StackNavigationOptions => {
+const getStackOptions = (theme: Theme): StackNavigationOptions => {
   return {
     headerTitleAlign: 'center',
-    headerTitle: renderTitle,
-    headerBackground: HeaderBackground,
-    headerLeft: (props: any) => (
-      <NavigationButton icon="ic_back" {...props} onPress={goBack} />
+    headerTitle: HeaderTitle,
+    headerBackground: () => (
+      <HeaderBackground image={theme.assets?.headerBackground} />
     ),
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
     ...getTintColor(theme),
   };
 };
 
-const getDialogOptions = (
-  theme: Theme,
-  goBack: () => void,
-): StackNavigationOptions => {
+const getDialogOptions = (theme: Theme): StackNavigationOptions => {
   return {
     headerTitleAlign: 'center',
-    headerTitle: renderTitle,
-    headerLeft: (props: any) => (
-      <NavigationButton icon="ic_back" {...props} onPress={goBack} />
+    headerTitle: HeaderTitle,
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerBackground: () => (
+      <HeaderBackground image={theme.assets?.headerBackground} />
     ),
-    headerBackground: HeaderBackground,
     ...getTintColor(theme),
     ...TransitionPresets.ModalTransition,
   };
@@ -87,21 +92,51 @@ const getModalOptions = (): StackNavigationOptions => {
   };
 };
 
-const getOptions = (params: NavigationOptions) => {
+const getOptions = (params: NavigationOptions, theme: Theme) => {
+  let backTheme = {};
   let surfaceTheme = {};
   let titleTheme = {};
-  if (params.surface) {
+
+  if (params.hiddenBack == true) {
+    backTheme = {
+      headerLeft: null,
+    };
+  } else {
+    backTheme = {
+      headerLeft: (props: any) => <HeaderLeft {...props} />,
+    };
+  }
+
+  if (params.surface == true) {
     surfaceTheme = {
-      headerBackground: () => <HeaderBackground surface={true} />,
-      headerTintColor: undefined,
+      headerBackground: () => <HeaderBackground />,
+      ...getTintColor({
+        ...theme,
+        assets: {...theme.assets, headerBackground: undefined},
+      }),
+    };
+  } else {
+    surfaceTheme = {
+      headerBackground: () => (
+        <HeaderBackground image={theme.assets?.headerBackground} />
+      ),
+      ...getTintColor(theme),
     };
   }
+
   if (params.customTitle) {
     titleTheme = {
-      headerTitle: () => <HeaderCustom {...params.customTitle} />,
+      headerTitle: (props: any) => {
+        return <HeaderCustom {...params.customTitle} {...props} />;
+      },
+    };
+  } else {
+    titleTheme = {
+      headerTitle: HeaderTitle,
     };
   }
-  return {...params, ...surfaceTheme, ...titleTheme};
+
+  return {...params, ...backTheme, ...surfaceTheme, ...titleTheme};
 };
 
 export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Playground/index.tsx

@@ -1,13 +1,88 @@
 import React, {FC, useContext, useEffect, useState} from 'react';
-import {View} from 'react-native';
+import {FlatList, TouchableOpacity, View} from 'react-native';
 import {CheckBox, Input, Radio, Text} from '@momo-kits/foundation';
 import {PlaygroundProps, PropValue} from './types';
 import styles from './styles';
-import {Spacing} from '../Consts';
+import {Colors, Radius, Spacing} from '../Consts';
 import {ApplicationContext} from '../Navigation';
+import {ScreenSection, SectionItem} from '../Layout';
+import {Icon, IconSources} from '../Icon';
+import {string} from 'prop-types';
 
-const Playground: FC<PlaygroundProps> = ({params}) => {
+const ChooseOptionScreen = (
+  data: string[] = [],
+  optionType: 'color' | 'icon' | 'text' = 'text',
+  onPress: (value: string) => void,
+) => {
   const {theme} = useContext(ApplicationContext);
+
+  let mapData = data;
+  if (optionType === 'color') {
+    mapData = Object.values(Colors);
+  }
+  if (optionType === 'icon') {
+    mapData = Object.keys(IconSources);
+  }
+  const renderItemView = (item: string) => {
+    switch (optionType) {
+      case 'color': {
+        return (
+          <View
+            style={{
+              width: 36,
+              height: 36,
+              borderRadius: Radius.M,
+              backgroundColor: item,
+              marginRight: Spacing.S,
+            }}
+          />
+        );
+      }
+      case 'icon': {
+        return <Icon source={item} style={{marginRight: Spacing.S}} />;
+      }
+    }
+  };
+
+  const renderItem = ({item, index}) => {
+    const iconSource: {[key: string]: {uri: string}} = IconSources;
+    let key = item;
+    let chosenItem = item;
+    if (optionType === 'color') key = Object.keys(Colors)[index];
+    if (optionType === 'icon') chosenItem = iconSource[key].uri;
+    return (
+      <TouchableOpacity
+        key={`${item.toString()} ${index}`}
+        onPress={() => onPress(chosenItem)}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: Spacing.M,
+          borderBottomWidth: index !== mapData.length - 1 ? 1 : 0,
+          borderColor: theme.colors.border.default,
+          paddingBottom: Spacing.M,
+        }}>
+        {renderItemView(item)}
+        <Text typography={'description_default'}>{key}</Text>
+      </TouchableOpacity>
+    );
+  };
+  return (
+    <ScreenSection>
+      <SectionItem widthSpan={12}>
+        <FlatList
+          data={mapData}
+          renderItem={renderItem}
+          keyExtractor={(item, index) => `${item.toString()} ${index}`}
+          showsVerticalScrollIndicator={false}
+        />
+      </SectionItem>
+    </ScreenSection>
+  );
+};
+
+const Playground: FC<PlaygroundProps> = ({params}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
   const {props} = params;
   const [compProps, setCompProps] = useState<{[key: string]: any}>({});
   useEffect(() => {
@@ -37,6 +112,19 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
     setCompProps(newProps);
   };
 
+  const showOptions = (prop: any, key: string) => {
+    navigator?.showBottomSheet({
+      options: {
+        title: 'Choose option',
+      },
+      screen: () =>
+        ChooseOptionScreen(prop.data, prop.optionType, optionValue => {
+          onChangeOptions(optionValue, key);
+          navigator?.pop();
+        }),
+    });
+  };
+
   const generateView = (key: string, prop: PropValue) => {
     let PlayGroundView = <View />;
     switch (prop.type) {
@@ -50,6 +138,7 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
                   value={option}
                   onChange={() => onChangeOptions(option, key)}
                   groupValue={compProps?.[key]}
+                  style={{marginBottom: Spacing.S}}
                 />
               );
             })}
@@ -62,6 +151,7 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
           <Input
             size={'small'}
             floatingValue={key}
+            value={compProps?.[key]}
             onChangeText={text => onChangeOptions(text, key)}
           />
         );
@@ -79,6 +169,29 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
             onChange={value => onChangeOptions(value, key)}
           />
         );
+        break;
+      }
+      case 'options': {
+        PlayGroundView = (
+          <TouchableOpacity
+            style={{
+              width: '100%',
+              height: 48,
+              borderRadius: Radius.M,
+              borderColor: theme.colors.border.default,
+              borderWidth: 1,
+              justifyContent: 'center',
+              alignItems: 'center',
+              flexDirection: 'row',
+              backgroundColor: theme.colors.background.surface,
+            }}
+            onPress={() => showOptions(prop, key)}>
+            <Text typography={'description_default'}>{compProps?.[key]}</Text>
+            <View style={{position: 'absolute', right: Spacing.M}}>
+              <Icon source={'arrow_chevron_down_small'} size={24} />
+            </View>
+          </TouchableOpacity>
+        );
       }
     }
 
@@ -106,6 +219,7 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
 
   const Component = params.component ?? <View />;
   const propsKeys = Object.keys(props);
+
   return (
     <View>
       <Text style={{marginBottom: Spacing.M}} typography={'title_s'}>
@@ -114,9 +228,12 @@ const Playground: FC<PlaygroundProps> = ({params}) => {
       <View
         style={[
           styles.propView,
-          {backgroundColor: theme.colors.background.surface},
+          {
+            backgroundColor: theme.colors.background.surface,
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
         ]}>
-        <Text typography={'header_default'}>{params.displayName}</Text>
         <Component {...compProps} />
       </View>
       <Text style={{marginBottom: Spacing.M}} typography={'title_s'}>

package/Playground/types.ts

@@ -3,13 +3,14 @@ import {ReactElement} from 'react';
 export type PropValue = {
   value: any;
   options?: string[];
-  type: 'string' | 'enum' | 'bool';
+  type: 'string' | 'options' | 'enum' | 'bool';
   description?: string;
+  data?: {[key: string]: string}[];
+  optionType?: 'icon' | 'color';
 };
 export type PlaygroundProps = {
   params: {
     component: ReactElement;
-    displayName: string;
     props: {[key: string]: PropValue};
   };
 };

package/Popup/PopupPromotion.tsx

@@ -6,11 +6,7 @@ import {Image} from '../Image';
 import {Button} from '../Button';
 import {Spacing} from '../Consts';
 
-const PopupPromotion: React.FC<PopupPromotionProps> = ({
-  image,
-  primary,
-  onIconClose,
-}) => {
+const PopupPromotion: React.FC<PopupPromotionProps> = ({image, primary}) => {
   const {theme, navigator} = useContext(ApplicationContext);
 
   /**

package/Popup/types.ts

@@ -12,7 +12,6 @@ export type PopupNotifyProps = {
 export type PopupPromotionProps = {
   image: string;
   primary: PopupAction;
-  onIconClose?: () => void;
 };
 
 type PopupAction = {

package/Radio/index.tsx

@@ -13,6 +13,7 @@ const Radio: FC<RadioProps> = ({
   disabled,
   onChange,
   label,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const selected = value === groupValue;
@@ -26,15 +27,22 @@ const Radio: FC<RadioProps> = ({
 
   return (
     <TouchableOpacity
-      onPress={() => onChange?.(value)}
+      onPress={onChange}
       disabled={disabled}
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginRight: Spacing.S,
-      }}>
-      <View style={[styles.radio, {borderWidth, borderColor}]} />
-      <Text typography={'description_default'}>{label}</Text>
+      style={[
+        style,
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+      ]}>
+      <View
+        style={[
+          styles.radio,
+          {borderWidth, borderColor, marginRight: !!label ? Spacing.XS : 0},
+        ]}
+      />
+      {!!label && <Text typography={'description_default'}>{label}</Text>}
     </TouchableOpacity>
   );
 };

package/Radio/styles.ts

@@ -6,7 +6,6 @@ export default StyleSheet.create({
     height: 20,
     width: 20,
     borderRadius: Radius.M,
-    marginRight: Spacing.S,
   },
   container: {flex: 1, backgroundColor: 'red'},
 });

package/Radio/types.ts

@@ -1,7 +1,10 @@
+import {ViewStyle} from 'react-native';
+
 export type RadioProps = {
   value: string;
   disabled?: boolean;
   label?: string;
-  onChange: (newValue?: string) => void;
+  onChange: () => void;
   groupValue: string;
+  style?: ViewStyle;
 };

package/Switch/index.tsx

@@ -7,7 +7,7 @@ import {Colors} from '../Consts';
 
 const Switch: FC<SwitchProps> = props => {
   const {theme} = useContext(ApplicationContext);
-  const {value, onChange, disabled} = props;
+  const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
@@ -20,7 +20,11 @@ const Switch: FC<SwitchProps> = props => {
     <TouchableOpacity
       disabled={disabled}
       onPress={() => onChange?.(!value)}
-      style={[styles.container, {backgroundColor, alignItems: circleAlign}]}>
+      style={[
+        style,
+        styles.container,
+        {backgroundColor, alignItems: circleAlign},
+      ]}>
       <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
         <View style={[styles.circleSmall, {backgroundColor}]} />
       </View>

package/Switch/types.ts

@@ -1,5 +1,8 @@
+import {ViewStyle} from 'react-native';
+
 export type SwitchProps = {
   value: boolean;
   onChange: (value: boolean) => void;
-  disabled: boolean;
+  disabled?: boolean;
+  style?: ViewStyle;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {
@@ -11,7 +11,7 @@
   ],
   "dependencies": {
     "react-native-safe-area-context": "3.1.4",
-    "@react-navigation/bottom-tabs": "5.11.15",
+    "@react-navigation/bottom-tabs": "git+https://gitlab.com/dung.huynh1/react-navigation-bottom-tabs.git#main",
     "@react-navigation/core": "5.16.1",
     "@react-navigation/native": "5.9.8",
     "@react-navigation/routers": "5.7.4",