@momo-kits/foundation 1.0.8 → 1.0.10

package/Consts/styles.ts

@@ -47,38 +47,6 @@ const Styles = StyleSheet.create({
     alignItems: 'flex-end',
     justifyContent: 'center',
   },
-  //padding
-  padding4: {
-    padding: 4,
-  },
-  padding8: {
-    padding: 8,
-  },
-  padding16: {
-    padding: 16,
-  },
-  padding24: {
-    padding: 24,
-  },
-  padding32: {
-    padding: 32,
-  },
-  //margin
-  margin4: {
-    margin: 4,
-  },
-  margin8: {
-    margin: 8,
-  },
-  margin16: {
-    margin: 16,
-  },
-  margin24: {
-    margin: 24,
-  },
-  margin32: {
-    margin: 32,
-  },
   //paddingHorizontal
   paddingHorizontal4: {
     paddingHorizontal: 4,
@@ -105,33 +73,6 @@ const Styles = StyleSheet.create({
   paddingVertical24: {
     paddingVertical: 24,
   },
-  //button
-  buttonContent: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    flexDirection: 'row',
-  },
-
-  headerRightButton: {
-    flexDirection: 'row',
-    overflow: 'hidden',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 4,
-  },
-  //text
-  textCenter: {textAlign: 'center'},
-  //card
-  card: {
-    shadowColor: 'gray',
-    shadowOffset: {
-      width: 1,
-      height: 1,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 4,
-    elevation: 4,
-  },
 });
 
 export {Styles};

package/Consts/theme.ts

@@ -60,14 +60,14 @@ const defaultTheme: Theme = {
 const defaultDarkTheme: Theme = {
   dark: true,
   colors: {
-    primary: '#ff79b0',
-    secondary: '#ffacdc',
+    primary: Colors.pink_04,
+    secondary: Colors.pink_08,
     background: {
       default: '#121212', // Dark background
       surface: '#1e1e1e', // Slightly lighter surface background
-      tonal: '#171717', // Tonal background
+      tonal: Colors.pink_10,
       pressed: '#1a1a1a', // Pressed state background
-      selected: '#1a1a1a', // Selected state background
+      selected: Colors.pink_11,
       disable: '#303030', // Disabled state background
     },
     text: {

package/Input/Input.tsx

@@ -27,6 +27,7 @@ const Input: FC<InputProps> = ({
   disabled,
   floatingIconColor,
   iconColor,
+  required,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -81,6 +82,7 @@ const Input: FC<InputProps> = ({
           floatingValue={floatingValue}
           floatingIconColor={floatingIconColor}
           disabled={disabled}
+          required={required}
           floatingIcon={floatingIcon}
         />
         <View style={styles.inputView}>
@@ -95,6 +97,7 @@ const Input: FC<InputProps> = ({
                 color: textColor,
               },
             ]}
+            textBreakStrategy="highQuality"
             value={value}
             onChangeText={_onChangeText}
             onFocus={_onFocus}

package/Input/MoneyInput.tsx

@@ -0,0 +1,151 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+import styles from './styles';
+import {Image} from '../Image';
+import {ErrorView, FloatingView, getBorderColor} from './common';
+import {MoneyInputProps} from './index';
+import {Icon} from '../Icon';
+
+const MoneyInput: FC<MoneyInputProps> = ({
+  onChangeText,
+  floatingValue,
+  floatingIcon,
+  size,
+  onBlur,
+  onFocus,
+  errorMessage,
+  icon,
+  disabled,
+  floatingIconColor,
+  iconColor,
+  required,
+  ...props
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const [value, setValue] = useState('');
+  const inputRef = useRef<any>(null);
+
+  const onClearText = () => {
+    inputRef?.current?.clear();
+  };
+
+  const formatNumberWithDots = (num: string) => {
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+  };
+  const _onChangeText = (text: string) => {
+    let numericValue = text.replace(/[^0-9]/g, '');
+    if (numericValue === '') numericValue = '0';
+    const formattedNumber = formatNumberWithDots(numericValue);
+    const formattedValue = `${formattedNumber}đ`;
+    onChangeText?.(formattedValue);
+    setValue(formattedValue);
+  };
+  const getSizeStyle = () => {
+    if (size === 'small') {
+      return styles.smallContainer;
+    }
+    return styles.container;
+  };
+
+  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+
+  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  const renderInputView = () => {
+    const disabledColor = theme.colors.text.disable;
+    let textColor = theme.colors.text.default;
+    let placeholderColor = theme.colors.text.hint;
+    let iconTintColor = iconColor;
+
+    if (disabled) {
+      textColor = disabledColor;
+      placeholderColor = disabledColor;
+      iconTintColor = disabledColor;
+    }
+
+    return (
+      <View
+        style={[
+          getSizeStyle(),
+          getBorderColor(focused, errorMessage, disabled),
+          styles.inputWrapper,
+          {backgroundColor: theme.colors.background.surface},
+        ]}>
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          required={required}
+          floatingIcon={floatingIcon}
+        />
+        <View style={styles.inputView}>
+          <TextInput
+            {...props}
+            editable={!disabled}
+            textAlignVertical="top"
+            ref={inputRef}
+            keyboardType={'number-pad'}
+            style={[
+              styles.moneyInput,
+              {
+                color: textColor,
+              },
+            ]}
+            value={value}
+            onChangeText={_onChangeText}
+            onFocus={_onFocus}
+            onBlur={_onBlur}
+            selectionColor={theme.colors.primary}
+            placeholderTextColor={placeholderColor}
+            placeholder={'0đ'}
+          />
+        </View>
+        <View style={styles.iconView}>
+          {focused && (
+            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
+              />
+            </TouchableOpacity>
+          )}
+          {icon && (
+            <Image
+              tintColor={iconTintColor}
+              source={{uri: icon}}
+              style={styles.icon}
+            />
+          )}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} />
+    </View>
+  );
+};
+
+MoneyInput.defaultProps = {
+  size: 'small',
+};
+
+export default MoneyInput;

package/Input/SearchInput.tsx

@@ -25,8 +25,9 @@ const SearchInput: FC<SearchInputProps> = ({
   onChangeText,
   icon,
   buttonText = 'Hủy',
-  showButtonText,
+  showButtonText = true,
   showIcon = true,
+  style,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -63,32 +64,25 @@ const SearchInput: FC<SearchInputProps> = ({
       iconTintColor = disabledColor;
     }
     return (
-      <View style={styles.searchInputView}>
-        <Icon
-          source={'navigation_search'}
-          size={24}
-          color={theme.colors.text.hint}
-        />
-        <TextInput
-          {...props}
-          editable={!disabled}
-          textAlignVertical="top"
-          ref={inputRef}
-          style={[
-            styles.searchInput,
-            {
-              color: textColor,
-            },
-          ]}
-          value={value}
-          onChangeText={_onChangeText}
-          onFocus={_onFocus}
-          onBlur={_onBlur}
-          placeholder={placeholder}
-          selectionColor={theme.colors.primary}
-          placeholderTextColor={placeholderColor}
-        />
-      </View>
+      <TextInput
+        {...props}
+        editable={!disabled}
+        textAlignVertical="top"
+        ref={inputRef}
+        style={[
+          styles.searchInput,
+          {
+            color: textColor,
+          },
+        ]}
+        value={value}
+        onChangeText={_onChangeText}
+        onFocus={_onFocus}
+        onBlur={_onBlur}
+        placeholder={placeholder}
+        selectionColor={theme.colors.primary}
+        placeholderTextColor={placeholderColor}
+      />
     );
   };
 
@@ -108,7 +102,7 @@ const SearchInput: FC<SearchInputProps> = ({
           </TouchableOpacity>
         )}
         {showIcon && icon && (
-          <View>
+          <View style={{flexDirection: 'row'}}>
             <View
               style={[
                 styles.divider,
@@ -117,7 +111,6 @@ const SearchInput: FC<SearchInputProps> = ({
                 },
               ]}
             />
-
             <Image
               tintColor={iconTintColor}
               source={{uri: icon}}
@@ -129,13 +122,18 @@ const SearchInput: FC<SearchInputProps> = ({
     );
   };
   return (
-    <View style={styles.searchInputContainer}>
+    <View style={[style, styles.searchInputContainer]}>
       <View
         style={[
           getBorderColor(focused, errorMessage, disabled),
           styles.searchInputWrapper,
           {backgroundColor: theme.colors.background.surface},
         ]}>
+        <Icon
+          source={'navigation_search'}
+          size={24}
+          color={theme.colors.text.hint}
+        />
         {renderInputView()}
         {renderIconView()}
       </View>

package/Input/TextArea.tsx

@@ -35,6 +35,7 @@ const TextArea: FC<TextAreaProps> = props => {
     height,
     placeholder,
     maxLength,
+    required,
   } = props;
 
   const [focused, setFocused] = useState(false);
@@ -83,7 +84,7 @@ const TextArea: FC<TextAreaProps> = props => {
       <View
         style={[
           getBorderColor(focused, errorMessage, disabled),
-          styles.textAreaWrapper,
+          styles.textAreaWradpper,
           {
             height: height || DEFAULT_HEIGHT,
             backgroundColor: theme.colors.background.surface,
@@ -94,6 +95,7 @@ const TextArea: FC<TextAreaProps> = props => {
           floatingIconColor={floatingIconColor}
           disabled={disabled}
           floatingIcon={floatingIcon}
+          required={required}
         />
         <View style={styles.rowArea}>
           <View style={styles.textAreaView}>
@@ -108,6 +110,7 @@ const TextArea: FC<TextAreaProps> = props => {
                 },
               ]}
               maxLength={maxLength}
+              textBreakStrategy="highQuality"
               multiline={true}
               value={value}
               onChangeText={_onChangeText}

package/Input/common.tsx

@@ -11,6 +11,7 @@ type FloatingViewProps = {
   floatingIconColor?: string;
   disabled?: boolean;
   floatingIcon?: string;
+  required?: boolean;
 };
 
 export const DEFAULT_HEIGHT = 112;
@@ -63,6 +64,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   floatingIconColor,
   disabled,
   floatingIcon,
+  required,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -85,6 +87,11 @@ export const FloatingView: FC<FloatingViewProps> = ({
         ]}>
         <Text color={floatingTextColor} typography={'label_s'}>
           {floatingValue}
+          {required && (
+            <Text typography={'label_s'} color={theme.colors.error.primary}>
+              *
+            </Text>
+          )}
         </Text>
         {floatingIcon && (
           <Image

package/Input/index.tsx

@@ -1,6 +1,7 @@
 import Input from './Input';
 import TextArea from './TextArea';
 import SearchInput from './SearchInput';
+import MoneyInput from './MoneyInput';
 import {TextInputProps} from 'react-native';
 
 export interface InputProps extends TextInputProps {
@@ -12,20 +13,26 @@ export interface InputProps extends TextInputProps {
   disabled?: boolean;
   floatingIconColor?: string;
   iconColor?: string;
+  required?: boolean;
 }
 
-type InputPropsWithoutSize = Omit<InputProps, 'size'>;
+type InputPropsWithoutSizeAndIcon = Omit<
+  InputProps,
+  'size' | 'icon' | 'iconColor'
+>;
+type InputPropsWithoutRequiredAndSize = Omit<InputProps, 'required' | 'size'>;
+type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
-export interface TextAreaProps extends TextInputProps, InputPropsWithoutSize {
+export interface TextAreaProps extends InputPropsWithoutSizeAndIcon {
   height?: number;
 }
 
-export interface SearchInputProps
-  extends TextInputProps,
-    InputPropsWithoutSize {
+export interface SearchInputProps extends InputPropsWithoutRequiredAndSize {
   buttonText?: string;
   showButtonText?: boolean;
   showIcon?: boolean;
 }
 
-export {Input, TextArea, SearchInput};
+export interface MoneyInputProps extends InputPropsWithoutPlaceholder {}
+
+export {Input, TextArea, SearchInput, MoneyInput};

package/Input/styles.ts

@@ -10,14 +10,12 @@ export default StyleSheet.create({
   container: {
     borderWidth: 1,
     borderRadius: Radius.S,
-    marginBottom: Spacing.XS,
     height: 56,
     paddingVertical: 8,
   },
   smallContainer: {
     borderRadius: Radius.S,
     borderWidth: 1,
-    marginBottom: Spacing.XS,
     height: 48,
   },
   floatingView: {
@@ -32,6 +30,7 @@ export default StyleSheet.create({
   errorView: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginTop: Spacing.XS,
   },
   inputView: {
     justifyContent: 'space-between',
@@ -96,12 +95,11 @@ export default StyleSheet.create({
     flex: 1,
   },
   searchInput: {
-    width: '100%',
     height: 36,
     marginLeft: Spacing.S,
+    flex: 1,
   },
   searchInputView: {
-    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
   },
@@ -116,4 +114,11 @@ export default StyleSheet.create({
     width: 1,
     marginLeft: Spacing.XS,
   },
+  moneyInput: {
+    width: '100%',
+    paddingLeft: Spacing.M,
+    height: '100%',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
 });

package/Navigation/Components.tsx

@@ -1,11 +1,18 @@
 import React, {useContext} from 'react';
-import {DeviceEventEmitter, StatusBar, StyleSheet, View} from 'react-native';
+import {
+  DeviceEventEmitter,
+  StatusBar,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {ApplicationContext, NavigationButton} from './index';
-import {Colors, Styles} from '../Consts';
+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';
 
 const styles = StyleSheet.create({
   headerBackground: {
@@ -29,10 +36,47 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: Colors.black_01,
   },
+  headerRightButton: {
+    flexDirection: 'row',
+    overflow: 'hidden',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: Spacing.M,
+  },
+  toolkitContainer: {
+    marginLeft: Spacing.S,
+    padding: Spacing.XS,
+    height: 28,
+    borderWidth: 0.5,
+    borderRadius: 14,
+    borderColor: '#00000066',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  divider: {
+    width: 1,
+    height: 12,
+    marginHorizontal: 4,
+  },
+  headerLeft: {
+    marginLeft: 12,
+  },
 });
 
-const HeaderLeft = (props: any) => {
-  const {navigator} = useContext(ApplicationContext);
+const HeaderTitle = (props: any) => {
+  return (
+    <Text
+      {...props}
+      typography="header_default"
+      weight="bold"
+      color={props.tintColor}
+    />
+  );
+};
+
+const HeaderLeft: React.FC<any> = ({tintColor}) => {
+  const {theme, navigator} = useContext(ApplicationContext);
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
     if (canGoBack) {
@@ -43,12 +87,30 @@ const HeaderLeft = (props: any) => {
       DeviceEventEmitter.emit('dismiss', {requestId});
     }
   };
-  return <NavigationButton icon="ic_back" {...props} onPress={goBack} />;
+
+  let backgroundColor;
+  if (tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  return (
+    <View style={styles.headerLeft}>
+      <NavigationButton
+        icon="ic_back"
+        tintColor={tintColor}
+        backgroundColor={backgroundColor}
+        onPress={goBack}
+      />
+    </View>
+  );
 };
 
-const HeaderBackground: React.FC<HeaderBackgroundProps> = ({image}) => {
+const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
+  image,
+  backgroundColor,
+}) => {
   const {theme} = useContext(ApplicationContext);
-  let headerImage = image ?? theme.assets?.headerBackground;
+  let headerImage = theme.assets?.headerBackground;
   if (image === null) {
     headerImage = undefined;
   }
@@ -56,10 +118,13 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({image}) => {
     <View
       style={[
         Styles.flex,
-        {backgroundColor: theme.colors.background.surface, overflow: 'hidden'},
+        {
+          backgroundColor: backgroundColor ?? theme.colors.background.default,
+          overflow: 'hidden',
+        },
       ]}>
       <StatusBar
-        barStyle={image || theme.dark ? 'light-content' : 'dark-content'}
+        barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
       />
       {headerImage && (
         <Image style={styles.headerBackground} source={{uri: headerImage}} />
@@ -126,7 +191,50 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
     validType(children);
     return React.cloneElement(children, {...restProps});
   };
-  return <View style={Styles.headerRightButton}>{renderAction()}</View>;
+  return <View style={styles.headerRightButton}>{renderAction()}</View>;
+};
+
+const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
+  const {theme} = useContext(ApplicationContext);
+  let backgroundColor;
+  if (tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  return (
+    <View style={styles.headerRightButton}>
+      <NavigationButton
+        icon="addFavorite"
+        tintColor={tintColor}
+        backgroundColor={backgroundColor}
+        onPress={() => {}}
+      />
+      <View
+        style={[
+          styles.toolkitContainer,
+          {backgroundColor: backgroundColor ?? '#00000066'},
+        ]}>
+        <TouchableOpacity>
+          <Icon color={tintColor} source="navigation_more_horiz" size={20} />
+        </TouchableOpacity>
+        <View style={[styles.divider, {backgroundColor: tintColor}]} />
+        <TouchableOpacity>
+          <Icon
+            color={tintColor}
+            source="16_navigation_close_circle"
+            size={20}
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
 };
 
-export {HeaderLeft, HeaderBackground, HeaderRightAction, HeaderCustom};
+export {
+  HeaderTitle,
+  HeaderLeft,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderToolkitAction,
+  HeaderCustom,
+};

package/Navigation/ModalScreen.tsx

@@ -10,7 +10,7 @@ import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
 import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types';
 import Navigation from './Navigation';
-import {ModalParams} from './types';
+import {BottomSheetParams, ModalParams} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {
   ApplicationContext,
@@ -19,15 +19,22 @@ import {
   NavigationContainer,
 } from './index';
 
-const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
+const ModalScreen: React.FC<any> = props => {
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
+  if (props.route?.params?.isBottomSheet) {
+    return <BottomSheet {...props} />;
+  }
+  return <Modal {...props} />;
+};
+
+const Modal: React.FC<ModalParams> = ({navigation, route}) => {
   const {theme} = useContext(ApplicationContext);
-  const {
-    isBottomSheet,
-    backgroundColor,
-    screen,
-    barrierDismissible,
-    options,
-  }: ModalParams = route.params;
+  const {screen, barrierDismissible}: ModalParams = route.params;
   const Component = useRef(screen).current;
   const params = {
     ...route.params,
@@ -35,61 +42,13 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
   };
   delete params.screen;
 
-  /**
-   * onDismiss modal
-   */
   const onDismiss = (pop = true) => {
-    let action = navigation.pop;
-    if (!pop) {
-      action = () => {};
-    }
-    if (barrierDismissible && !isBottomSheet) {
+    if (barrierDismissible) {
       return;
     }
-    params?.onDismiss?.();
-    action();
+    navigation.pop();
   };
 
-  /**
-   * build bottom sheet
-   */
-  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}]}>
-          <View style={styles.indicatorContainer}>
-            <View
-              style={[
-                styles.indicator,
-                {backgroundColor: theme.colors.text.disable},
-              ]}
-            />
-          </View>
-          <NavigationContainer
-            theme={sheetTheme}
-            screen={props => <Component {...props} {...params} />}
-            options={{
-              ...options,
-              hiddenBack: true,
-              headerTitleAlign: 'center',
-              headerRight: (props: any) => (
-                <HeaderRightAction>
-                  <NavigationButton
-                    icon="24_navigation_close"
-                    {...props}
-                    onPress={() => navigation.pop()}
-                  />
-                </HeaderRightAction>
-              ),
-            }}
-          />
-        </View>
-      </BottomSheet>
-    );
-  }
-
   return (
     <KeyboardAvoidingView
       style={Styles.flex}
@@ -121,7 +80,16 @@ const ModalScreen: React.FC<ModalParams> = ({navigation, route, ...rest}) => {
   );
 };
 
-const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
+const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
+  const {theme} = useContext(ApplicationContext);
+  const {screen, options}: BottomSheetParams = route.params;
+  const Component = useRef(screen).current;
+  const params = {
+    ...route.params,
+    navigation: new Navigation(navigation, theme),
+  };
+  delete params.screen;
+
   const snapPoints = useMemo(() => ['50%', '90%'], []);
   const {bottom} = useSafeAreaInsets();
   const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
@@ -142,24 +110,57 @@ const BottomSheet: React.FC<ModalParams> = ({children, onDismiss}) => {
     />
   );
 
+  let backgroundColor = theme.colors.background.default;
+  if (options?.surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+  const sheetTheme = {...theme, assets: undefined};
+
   return (
     <SafeAreaView style={Styles.flex}>
       <BottomSheetModal
         ref={bottomSheetRef}
         snapPoints={snapPoints}
-        onDismiss={() => onDismiss?.(mountedRef.current)}
+        onDismiss={navigation.pop}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View style={{paddingBottom: bottom}}>{children}</View>
+        <View style={{paddingBottom: bottom}}>
+          <View style={[styles.sheetContainer, {backgroundColor}]}>
+            <View style={styles.indicatorContainer}>
+              <View
+                style={[
+                  styles.indicator,
+                  {backgroundColor: theme.colors.text.disable},
+                ]}
+              />
+            </View>
+            <NavigationContainer
+              theme={sheetTheme}
+              screen={props => <Component {...props} {...params} />}
+              options={{
+                ...options,
+                ...{headerLeft: null},
+                headerTitleAlign: 'center',
+                headerRight: props => (
+                  <HeaderRightAction>
+                    <NavigationButton
+                      {...props}
+                      icon="24_navigation_close"
+                      backgroundColor="transparent"
+                      useBorder={false}
+                      onPress={() => bottomSheetRef.current?.dismiss()}
+                    />
+                  </HeaderRightAction>
+                ),
+              }}
+            />
+          </View>
+        </View>
       </BottomSheetModal>
     </SafeAreaView>
   );
 };
 
-ModalScreen.defaultProps = {
-  barrierDismissible: false,
-};
-
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {

package/Navigation/NavigationButton.tsx

@@ -8,20 +8,35 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
   onPress,
+  backgroundColor,
+  useBorder = true,
 }) => {
   const {theme} = useContext(ApplicationContext);
   return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Icon source={icon} color={tintColor ?? theme.colors.text.default} />
+    <TouchableOpacity
+      style={[
+        styles.container,
+        {
+          backgroundColor: backgroundColor ?? '#00000066',
+          borderWidth: useBorder ? 0.5 : 0,
+        },
+      ]}
+      onPress={onPress}>
+      <Icon
+        source={icon}
+        color={tintColor ?? theme.colors.text.default}
+        size={20}
+      />
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    height: 36,
-    width: 36,
-    borderRadius: 18,
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    borderColor: '#00000066',
     justifyContent: 'center',
     alignItems: 'center',
   },

package/Navigation/Navigator.ts

@@ -1,5 +1,5 @@
 import {StackActions} from '@react-navigation/native';
-import {ModalParams, ScreenParams} from './types';
+import {BottomSheetParams, ModalParams, ScreenParams} from './types';
 
 class Navigator {
   ref?: any;
@@ -28,7 +28,7 @@ class Navigator {
     this.ref.current.dispatch(StackActions.push('Modal', params));
   };
 
-  showBottomSheet = (params: ModalParams) => {
+  showBottomSheet = (params: BottomSheetParams) => {
     this.ref.current.dispatch(
       StackActions.push('Modal', {
         ...params,

package/Navigation/types.ts

@@ -85,18 +85,23 @@ export interface ModalParams extends ScreenParams {
   screen: React.ElementType;
   onDismiss?: (mounted?: boolean) => void;
   barrierDismissible?: boolean;
-  backgroundColor?: string;
+}
+
+export interface BottomSheetParams extends ScreenParams {
+  [key: string]: any;
+  onDismiss?: () => void;
 }
 
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
+  backgroundColor?: string;
+  useBorder?: boolean;
   onPress: () => void;
 };
 
 export type NavigationOptions = {
   surface?: boolean;
-  hiddenBack?: boolean;
   title?: string;
   headerTitleAlign?: 'left' | 'center';
   customTitle?: TitleCustomProps;
@@ -105,6 +110,7 @@ export type NavigationOptions = {
 
 export type HeaderBackgroundProps = {
   image?: string | null;
+  backgroundColor?: string | null;
 };
 
 export type TitleCustomProps = {

package/Navigation/utils.tsx

@@ -3,21 +3,15 @@ import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import {HeaderBackground, HeaderCustom, HeaderLeft} from './Components';
+import {
+  HeaderBackground,
+  HeaderCustom,
+  HeaderLeft,
+  HeaderTitle,
+  HeaderToolkitAction,
+} from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-import {Text} from '../Text';
-
-const HeaderTitle = (props: any) => {
-  return (
-    <Text
-      {...props}
-      typography="header_default"
-      weight="bold"
-      color={props.tintColor}
-    />
-  );
-};
 
 const getTintColor = (theme: Theme): any => {
   if (theme.assets?.headerBackground) {
@@ -36,6 +30,7 @@ const getStackOptions = (theme: Theme): StackNavigationOptions => {
     headerTitle: HeaderTitle,
     headerBackground: HeaderBackground,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
     ...getTintColor(theme),
   };
 };
@@ -45,6 +40,7 @@ const getDialogOptions = (theme: Theme): StackNavigationOptions => {
     headerTitleAlign: 'center',
     headerTitle: HeaderTitle,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
     headerBackground: HeaderBackground,
     ...getTintColor(theme),
     ...TransitionPresets.ModalTransition,
@@ -77,23 +73,17 @@ const getModalOptions = (): StackNavigationOptions => {
 };
 
 const getOptions = (params: NavigationOptions, theme: Theme) => {
-  let backTheme: {};
   let surfaceTheme: {};
   let titleTheme: {};
 
-  if (params.hiddenBack == true) {
-    backTheme = {
-      headerLeft: null,
-    };
-  } else {
-    backTheme = {
-      headerLeft: (props: any) => <HeaderLeft {...props} />,
-    };
-  }
-
   if (params.surface == true) {
     surfaceTheme = {
-      headerBackground: () => <HeaderBackground image={null} />,
+      headerBackground: () => (
+        <HeaderBackground
+          image={null}
+          backgroundColor={theme.colors.background.surface}
+        />
+      ),
       ...getTintColor({
         ...theme,
         assets: {...theme.assets, headerBackground: undefined},
@@ -119,7 +109,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  return {...params, ...backTheme, ...surfaceTheme, ...titleTheme};
+  return {...params, ...surfaceTheme, ...titleTheme};
 };
 
 export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Popup/PopupNotify.tsx

@@ -148,7 +148,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         </View>
         {information && (
           <View style={styles.information}>
-            <Text typography={'description_xs'} numberOfLines={1}>
+            <Text
+              typography={'description_xs'}
+              color={theme.colors.text.hint}
+              numberOfLines={1}>
               {information}
             </Text>
           </View>

package/Text/index.tsx

@@ -18,6 +18,20 @@ const SFProText: TypographyWeight = {
   bold: 'Bold',
 };
 
+const AlegreyaSans: TypographyWeight = {
+  100: 'Thin',
+  200: 'Thin',
+  300: 'Thin',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Medium',
+  700: 'Bold',
+  800: 'Black',
+  900: 'Black',
+  normal: 'Regular',
+  bold: 'Bold',
+};
+
 const FontStyle: {[key: string]: string} = {
   italic: 'Italic',
   normal: '',
@@ -43,14 +57,18 @@ const Text: React.FC<TextProps> = ({
     } = styles;
     const typoStyle = styleSheet[typo] ?? styleSheet.paragraph_default;
     const {fontWeight, fontSize, fontStyle, lineHeight} = typoStyle;
-    let fontFamily: string;
     const style = FontStyle[fontStyle ?? 'normal'];
+    let fontFamily: string;
 
     switch (theme.font) {
       case 'SFProText': {
         fontFamily = `${theme.font}-${SFProText[fontWeight]}${style}`;
         break;
       }
+      case 'AlegreyaSans': {
+        fontFamily = `${theme.font}-${AlegreyaSans[fontWeight]}${style}`;
+        break;
+      }
       default: {
         fontFamily = `SFProText-${SFProText[fontWeight]}${style}`;
       }

package/package.json

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