@momo-kits/foundation 0.79.6 → 0.80.2-beta.1

package/Application/Components.tsx

@@ -3,11 +3,13 @@ import {
   Alert,
   Animated,
   DeviceEventEmitter,
+  Platform,
   StatusBar,
   StyleSheet,
-  TouchableOpacity,
   View,
+  TouchableOpacity as TouchableRN,
 } from 'react-native';
+import {TouchableOpacity as TouchableGesture} from 'react-native-gesture-handler';
 import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
@@ -22,6 +24,8 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 
+const Touchable = Platform.OS === 'android' ? TouchableGesture : TouchableRN;
+
 const styles = StyleSheet.create({
   navigationButton: {
     height: 28,
@@ -101,7 +105,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }
 
   return (
-    <TouchableOpacity
+    <Touchable
       accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
       style={[
         styles.navigationButton,
@@ -116,7 +120,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         color={tintColor ?? theme.colors.text.default}
         size={20}
       />
-    </TouchableOpacity>
+    </Touchable>
   );
 };
 
@@ -225,7 +229,11 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
         barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
       />
       {!!headerImage && (
-        <Image style={styles.headerBackground} source={{uri: headerImage}} />
+        <Image
+          style={styles.headerBackground}
+          source={{uri: headerImage}}
+          loading={false}
+        />
       )}
     </Animated.View>
   );
@@ -388,21 +396,17 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <TouchableOpacity
-            accessibilityLabel={'Toolkit/More'}
-            onPress={onMore}>
+          <Touchable accessibilityLabel={'Toolkit/More'} onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
-          </TouchableOpacity>
+          </Touchable>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity
-            accessibilityLabel={`Toolkit/Close`}
-            onPress={onClose}>
+          <Touchable accessibilityLabel={`Toolkit/Close`} onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"
               size={20}
             />
-          </TouchableOpacity>
+          </Touchable>
         </View>
       </View>
     );

package/Application/ModalScreen.tsx

@@ -1,20 +1,18 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, {useContext, useEffect, useMemo, useRef} from 'react';
 import {
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
   View,
+  Keyboard,
 } from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {
+  BottomSheetBackdrop,
+  BottomSheetModal,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
 import Navigation from './Navigation';
 import {BottomSheetParams, ModalParams} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
@@ -90,12 +88,9 @@ const Modal: React.FC<ModalParams> = props => {
 };
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
+  const insets = useSafeAreaInsets();
   const {theme, navigator} = useContext(ApplicationContext);
-  const {
-    screen,
-    options,
-    useSnap = true,
-  }: BottomSheetParams = props.route.params;
+  const {screen, options, snapPoint}: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -105,40 +100,30 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   delete params.screen;
 
-  const [contentHeight, setContentHeight] = useState(undefined);
   const snapPoints = useMemo(() => {
-    if (useSnap) {
-      return ['50%', '90%'];
+    if (snapPoint) {
+      return [snapPoint];
     }
-    return [contentHeight ?? '50%'];
-  }, [contentHeight]);
+    return ['50%', '70%', '90%'];
+  }, []);
 
   const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
 
-  let handleOnLayout;
-  if (!useSnap) {
-    handleOnLayout = useCallback(
-      ({
-        nativeEvent: {
-          layout: {height},
-        },
-      }) => {
-        setContentHeight(height);
-      },
-      [],
-    );
-  }
-
   let backgroundColor = theme.colors.background.default;
   if (options?.surface) {
     backgroundColor = theme.colors.background.surface;
   }
 
   useEffect(() => {
+    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', () =>
+      bottomSheetRef.current?.expand(),
+    );
+
     bottomSheetRef.current?.present();
     return () => {
       mountedRef.current = false;
+      keyboardDidShow.remove();
     };
   }, []);
 
@@ -162,8 +147,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         }}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View onLayout={handleOnLayout} accessibilityLabel={'BottomSheet'}>
-          <View style={[styles.sheetContainer, {backgroundColor}]}>
+        <BottomSheetView accessibilityLabel={'BottomSheet'}>
+          <View
+            style={[
+              styles.sheetContainer,
+              {
+                backgroundColor,
+                paddingBottom: Math.min(insets.bottom, 20) + Spacing.S,
+              },
+            ]}>
             <View style={styles.indicatorContainer}>
               <View
                 style={[
@@ -222,7 +214,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               }}
             />
           </View>
-        </View>
+        </BottomSheetView>
       </BottomSheetModal>
     </SafeAreaView>
   );
@@ -255,11 +247,12 @@ const styles = StyleSheet.create({
   indicatorContainer: {
     width: '100%',
     paddingTop: Spacing.S,
+    paddingBottom: Spacing.XS,
     alignItems: 'center',
     justifyContent: 'center',
   },
   indicator: {
-    width: 64,
+    width: 40,
     height: 4,
     borderRadius: Radius.S,
   },

package/Application/NavigationContainer.tsx

@@ -10,9 +10,10 @@ import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
-import {NavigationContainerProps} from './types';
+import {LocalizationObject, NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
 import {DeviceEventEmitter} from 'react-native';
+import kitLocalization from '../Assets/language.json';
 
 const Stack = createStackNavigator();
 
@@ -41,6 +42,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   }, []);
 
   useEffect(() => {
+    maxApi?.getLanguage?.((lang: 'vi' | 'en') => {
+      setLanguage(lang);
+    });
     const listener = maxApi?.observer?.('language', (lang: 'vi' | 'en') => {
       setLanguage(lang);
     });
@@ -52,7 +56,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   navigator.current.maxApi = maxApi;
 
   const translate = (key: string) => {
-    return localization?.[language]?.[key] || key;
+    const mergedLocalization: LocalizationObject = {
+      vi: {...localization?.vi, ...kitLocalization.vi},
+      en: {...localization?.en, ...kitLocalization.en},
+    };
+    return mergedLocalization?.[language]?.[key] || key;
   };
 
   return (

package/Application/StackScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect} from 'react';
+import React, {useContext, useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext} from './index';
@@ -16,7 +16,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   delete params.screen;
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);
     }

package/Application/types.ts

@@ -107,7 +107,7 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  useSnap?: boolean;
+  snapPoint?: '30%' | '50%' | '70%' | '90%';
 }
 
 export type NavigationButtonProps = {

package/Consts/theme.ts

@@ -117,6 +117,9 @@ const defaultContext: Context = {
   theme: defaultTheme,
   navigator: undefined,
   showGrid: false,
+  translate: (key: string) => {
+    return key;
+  },
 };
 
 export {defaultContext, defaultTheme, defaultDarkTheme};

package/Input/Input.tsx

@@ -13,7 +13,6 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {Image} from '../Image';
 
 const Input = forwardRef(
   (
@@ -34,7 +33,8 @@ const Input = forwardRef(
       required,
       errorSpacing,
       loading,
-      image,
+      leadingIcon,
+      leadingIconColor,
       ...props
     }: InputProps,
     ref,
@@ -78,7 +78,6 @@ const Input = forwardRef(
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = iconColor;
-      const imageStyle = size === 'small' ? styles.imageSmall : styles.image;
 
       if (disabled) {
         textColor = disabledColor;
@@ -102,7 +101,15 @@ const Input = forwardRef(
             floatingIcon={floatingIcon}
           />
           <View style={styles.inputView}>
-            {!!image && <Image style={imageStyle} source={{uri: image}} />}
+            {!!leadingIcon && (
+              <View style={styles.leadingIconContainer}>
+                <Icon
+                  color={leadingIconColor}
+                  source={leadingIcon}
+                  size={size === 'small' ? 24 : 32}
+                />
+              </View>
+            )}
             <TextInput
               {...props}
               accessibilityLabel={`TextInput`}

package/Input/InputDropDown.tsx

@@ -0,0 +1,127 @@
+import React, {forwardRef, useContext, useRef} from 'react';
+import {TextInput, TouchableOpacity, View} from 'react-native';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {InputDropDownProps} from './index';
+import {Icon} from '../Icon';
+import {Loader} from '../Loader';
+import {Styles} from '../Consts';
+
+const InputDropDown = forwardRef(
+  (
+    {
+      value,
+      floatingValue,
+      floatingIcon,
+      size,
+      onPress,
+      placeholder,
+      errorMessage,
+      icon = 'arrow_chevron_down_small',
+      disabled,
+      floatingIconColor,
+      iconColor,
+      required,
+      errorSpacing,
+      loading,
+      leadingIcon,
+      leadingIconColor,
+      ...props
+    }: InputDropDownProps,
+    ref,
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const full = !!value || !!placeholder;
+    const renderIcon = (color: string | undefined) => {
+      if (loading) {
+        return <Loader type={'spinner'} color={color} />;
+      }
+      if (icon) {
+        return <Icon color={color} source={icon} size={24} />;
+      }
+    };
+
+    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={[
+            styles.inputWrapper,
+            {backgroundColor: theme.colors.background.surface},
+            getSizeStyle(size),
+            getBorderColor(theme, false, errorMessage, disabled),
+          ]}>
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            required={required}
+            floatingIcon={floatingIcon}
+          />
+          <View style={full ? styles.inputView : Styles.row}>
+            {!!leadingIcon && (
+              <View style={styles.leadingIconContainer}>
+                <Icon
+                  color={leadingIconColor}
+                  source={leadingIcon}
+                  size={size === 'small' ? 24 : 32}
+                />
+              </View>
+            )}
+            {full && (
+              <TextInput
+                {...props}
+                onPressIn={onPress}
+                accessibilityLabel={`TextInput`}
+                editable={false}
+                textAlignVertical="top"
+                ref={inputRef}
+                style={[
+                  styles.input,
+                  {
+                    color: textColor,
+                    fontFamily: `${theme.font}-Regular`,
+                  },
+                ]}
+                textBreakStrategy="highQuality"
+                value={value}
+                placeholder={placeholder}
+                selectionColor={theme.colors.primary}
+                placeholderTextColor={placeholderColor}
+              />
+            )}
+          </View>
+          <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
+        </View>
+      );
+    };
+
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        style={full && styles.wrapper}
+        accessibilityLabel={`InputDropDown/${floatingValue}`}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </TouchableOpacity>
+    );
+  },
+);
+
+InputDropDown.defaultProps = {
+  size: 'small',
+};
+
+export default InputDropDown;

package/Input/InputOTP.tsx

@@ -0,0 +1,213 @@
+import React, {FC, useContext, useEffect, useRef, useState} from 'react';
+import {
+  Animated,
+  KeyboardType,
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {CaretProps, InputOTPProps} from './index';
+import {scaleSize, Text} from '../Text';
+import styles from './styles';
+import {ErrorView, getBorderColor} from './common';
+import {ApplicationContext} from '../Application';
+import {Spacing} from '../Consts';
+
+const OTPCaret: FC<CaretProps> = ({index, length}) => {
+  const DURATION = 300;
+  const {theme} = useContext(ApplicationContext);
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: DURATION,
+          useNativeDriver: true,
+        }),
+        Animated.delay(DURATION * 2),
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: DURATION,
+          useNativeDriver: true,
+        }),
+      ]),
+    ).start();
+  }, []);
+  const spacingStyle = !isNaN(Number(length)) &&
+    index !== Number(length) - 1 && {marginRight: Spacing.L};
+
+  return (
+    <View style={[{flexDirection: 'row', alignItems: 'center'}, spacingStyle]}>
+      <Animated.View
+        style={{
+          height: scaleSize(12),
+          width: 1,
+          backgroundColor: theme.colors.primary,
+          opacity,
+        }}
+      />
+      <Text color={theme.colors.text.hint} typography={'paragraph_default'}>
+        -
+      </Text>
+    </View>
+  );
+};
+
+const InputOTP: FC<InputOTPProps> = ({
+  length,
+  errorMessage,
+  errorSpacing,
+  floatingValue,
+  floatingIconColor,
+  floatingIcon,
+  placeholder,
+  onChangeText,
+  onFocus,
+  onBlur,
+  dataType = 'number',
+  ...props
+}) => {
+  const MAX_LENGTH = 10;
+  const [value, setValue] = useState('');
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+  const {theme} = useContext(ApplicationContext);
+
+  const onFocusInput = () => {
+    setFocused(true);
+    inputRef.current?.focus();
+  };
+
+  const onBlurInput = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  const _onChangeText = (text: string) => {
+    if (text.length > MAX_LENGTH) return;
+    if (dataType === 'number' && isNaN(Number(text))) return;
+    if (
+      !isNaN(Number(text)) &&
+      value.length >= Number(length) &&
+      text.length >= value.length
+    )
+      return;
+
+    setValue(text);
+    onChangeText?.(text);
+  };
+
+  const renderInputs = (length: number) => {
+    const TextInputs = [];
+    for (let i = 0; i < length; i++) {
+      TextInputs.push(
+        <View>
+          {focused && value.length === i ? (
+            <OTPCaret index={i} length={length} />
+          ) : (
+            <Text
+              style={i !== length - 1 && {marginRight: Spacing.L}}
+              color={
+                !!value[i] ? theme.colors.text.default : theme.colors.text.hint
+              }
+              typography={!!value[i] ? 'title_s' : 'paragraph_default'}>
+              {value[i] || '-'}
+            </Text>
+          )}
+        </View>,
+      );
+    }
+    return TextInputs;
+  };
+
+  const renderUnidentifiedInputs = () => {
+    const splitValue = value.split('');
+
+    if (!focused && value.length === 0 && !!placeholder) {
+      return (
+        <Text color={theme.colors.text.hint} typography={'description_s'}>
+          {placeholder}
+        </Text>
+      );
+    }
+
+    return (
+      <View style={{flexDirection: 'row'}}>
+        {splitValue.map((letter, index) => {
+          return (
+            <Text
+              style={
+                (index !== value.length - 1 ||
+                  (focused && value.length !== MAX_LENGTH)) && {
+                  marginRight: Spacing.L,
+                }
+              }
+              typography={'title_s'}>
+              {letter}
+            </Text>
+          );
+        })}
+        {focused && value.length !== MAX_LENGTH && <OTPCaret />}
+      </View>
+    );
+  };
+
+  const renderInputView = () => {
+    let placeholderColor = theme.colors.text.hint;
+    const keyboardType: KeyboardType =
+      dataType === 'number' ? 'number-pad' : 'default';
+    return (
+      <View
+        style={[
+          styles.otpInput,
+          {backgroundColor: theme.colors.background.surface},
+          getBorderColor(theme, focused, errorMessage),
+        ]}>
+        {!!floatingValue && (
+          <View
+            style={[
+              styles.otpFloatingView,
+              {backgroundColor: theme.colors.background.surface},
+            ]}>
+            <Text typography={'description_s'}>{floatingValue}</Text>
+          </View>
+        )}
+        <View style={styles.otpInputsView}>
+          {length ? renderInputs(length) : renderUnidentifiedInputs()}
+        </View>
+        <View style={styles.inputView}>
+          <TextInput
+            {...props}
+            accessibilityLabel={`TextInput`}
+            ref={inputRef}
+            value={value}
+            onChangeText={_onChangeText}
+            keyboardType={keyboardType}
+            onFocus={onFocusInput}
+            onBlur={onBlurInput}
+            style={{opacity: 0}}
+            selectionColor={theme.colors.primary}
+            placeholderTextColor={placeholderColor}
+          />
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={onFocusInput}
+      style={styles.otpWrapper}
+      accessibilityLabel={`Input/${floatingValue}`}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+    </TouchableOpacity>
+  );
+};
+
+export default InputOTP;

package/Input/common.tsx

@@ -1,4 +1,4 @@
-import {View} from 'react-native';
+import {View, ViewStyle} from 'react-native';
 import styles from './styles';
 import {Text} from '../Text';
 import React, {FC, useContext} from 'react';
@@ -13,6 +13,7 @@ type FloatingViewProps = {
   disabled?: boolean;
   floatingIcon?: string;
   required?: boolean;
+  style?: ViewStyle;
 };
 
 export const DEFAULT_HEIGHT = 112;
@@ -81,6 +82,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   disabled,
   floatingIcon,
   required,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -100,6 +102,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
             backgroundColor: theme.colors.background.surface,
             zIndex: 10,
           },
+          style,
         ]}>
         <Text color={floatingTextColor} typography={'label_s'}>
           {floatingValue}

package/Input/index.tsx

@@ -2,6 +2,8 @@ import Input from './Input';
 import InputTextArea from './InputTextArea';
 import InputSearch from './InputSearch';
 import InputMoney from './InputMoney';
+import InputOTP from './InputOTP';
+import InputDropDown from './InputDropDown';
 import {TextInputProps} from 'react-native';
 
 export interface InputProps extends TextInputProps {
@@ -30,6 +32,11 @@ export interface InputProps extends TextInputProps {
    */
   icon?: string;
 
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  iconColor?: string;
+
   /**
    * Optional. If `true`, the user won't be able to interact with the Input component.
    * Defaults to `false` if not provided.
@@ -41,11 +48,6 @@ export interface InputProps extends TextInputProps {
    */
   floatingIconColor?: string;
 
-  /**
-   * Optional. Represents the color of the icon in the Input component.
-   */
-  iconColor?: string;
-
   /**
    * Optional. If `true`, the Input component is marked as required,
    * indicating that the user must provide a value before submitting a form.
@@ -65,13 +67,22 @@ export interface InputProps extends TextInputProps {
    */
   loading?: boolean;
 
-  image?: string;
+  /**
+   *  Optional. Represents the leading icon in the Input component.
+   */
+  leadingIcon?: string;
+
+  /**
+   * Optional. Represents the color of the leading icon in the Input component.
+   */
+  leadingIconColor?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
   InputProps,
   'size' | 'icon' | 'iconColor'
 >;
+
 type InputPropsOmitForSearch = Omit<
   InputProps,
   'required' | 'size' | 'errorMessage' | 'disabled'
@@ -109,4 +120,102 @@ export interface InputSearchProps extends InputPropsOmitForSearch {
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
 
-export {Input, InputTextArea, InputSearch, InputMoney};
+export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
+
+export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+  length?: OTPInputLength;
+  dataType?: 'string' | 'number';
+}
+
+export type CaretProps = {
+  index?: number;
+  length?: number;
+};
+
+export type InputDropDownProps = {
+  /**
+   *  Optional. Defines the size of the Input component.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   *  Optional. Defines the value of InputDropDown.
+   */
+  value?: string;
+
+  /**
+   *  Optional. Defines the placeholder of InputDropDown.
+   */
+  placeholder?: string;
+
+  /**
+   *  Optional. Defines the onPress of InputDropDown.
+   */
+  onPress?: () => void;
+  /**
+   * Optional. Represents the value for the floating title in the Input component.
+   */
+  floatingValue?: string;
+
+  /**
+   * Optional. Represents the name or key of the floating icon to be displayed in the Input component.
+   */
+  floatingIcon?: string;
+
+  /**
+   * Optional. Represents the error message to be displayed below the Input component when there is an error.
+   */
+  errorMessage?: string;
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
+
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  iconColor?: string;
+
+  /**
+   * Optional. If `true`, the user won't be able to interact with the Input component.
+   * Defaults to `false` if not provided.
+   */
+  disabled?: boolean;
+
+  /**
+   * Optional. Represents the color of the floating icon in the Input component.
+   */
+  floatingIconColor?: string;
+
+  /**
+   * Optional. If `true`, the Input component is marked as required,
+   * indicating that the user must provide a value before submitting a form.
+   * Defaults to `false` if not provided.
+   */
+  required?: boolean;
+
+  /**
+   * Optional. If `true`,
+   * include spacing when Input not have error message.
+   * Defaults to `false` if not provided.
+   */
+  errorSpacing?: boolean;
+
+  /**
+   *  If true, the icon of input will use be show indicator loading.
+   */
+  loading?: boolean;
+
+  /**
+   *  Optional. Represents the leading icon in the Input component.
+   */
+  leadingIcon?: string;
+
+  /**
+   * Optional. Represents the color of the leading icon in the Input component.
+   */
+  leadingIconColor?: string;
+};
+
+export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};

package/Input/styles.ts

@@ -42,17 +42,10 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  image: {
-    width: 32,
-    height: 32,
-    marginLeft: Spacing.M,
-    borderRadius: Radius.XS,
-  },
-  imageSmall: {
-    width: 24,
-    height: 24,
+  leadingIconContainer: {
     marginLeft: Spacing.M,
     borderRadius: Radius.XS,
+    overflow: 'hidden',
   },
   iconView: {
     flexDirection: 'row',
@@ -142,4 +135,28 @@ export default StyleSheet.create({
     paddingVertical: Spacing.S,
     fontWeight: 'bold',
   },
+
+  //OTP
+  otpWrapper: {
+    width: '100%',
+    marginTop: Spacing.M,
+  },
+  otpInput: {
+    height: scaleSize(56),
+    borderRadius: Radius.S,
+    borderWidth: 1,
+  },
+  otpFloatingView: {
+    position: 'absolute',
+    top: -Spacing.S,
+    alignSelf: 'center',
+    paddingHorizontal: Spacing.S,
+  },
+  otpInputsView: {
+    width: '100%',
+    height: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });

package/Layout/Screen.tsx

@@ -107,12 +107,10 @@ const Screen: React.FC<ScreenProps> = ({
       if (useExtendedHeader) {
         title = {headerTitle: HeaderTitle};
       }
-      setImmediate(() => {
-        navigation?.setOptions({
-          animatedValue: animatedValue.current,
-          headerTransparent: headerTransparent,
-          ...title,
-        });
+      navigation?.setOptions({
+        animatedValue: animatedValue.current,
+        headerTransparent: headerTransparent,
+        ...title,
       });
     }
   }, [useExtendedHeader, useAnimatedHeader]);

package/Layout/Section.tsx

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {Fragment, useContext} from 'react';
 import {Dimensions, View, ViewProps} from 'react-native';
 import {useGridSystem, validateChildren} from './utils';
 import {GridContextProps} from './types';
@@ -135,6 +135,9 @@ const Section: React.FC<SectionProps> = ({
       }
     } else {
       element.push(children);
+      if (children?.type == Fragment) {
+        return renderView(children?.props.children);
+      }
     }
     return element;
   };

package/Layout/utils.ts

@@ -1,5 +1,5 @@
 import {Alert, Dimensions} from 'react-native';
-import React, {useEffect, useState} from 'react';
+import React, {Fragment, ReactElement, useEffect, useState} from 'react';
 
 /**
  * validate children type
@@ -7,53 +7,36 @@ import React, {useEffect, useState} from 'react';
  * @param childrenTypes
  */
 const validateChildren = (
-  children:
-    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
-    | string
-    | number
-    | {}
-    | Iterable<React.ReactNode>
-    | React.ReactPortal
-    | null
-    | undefined
-    | boolean,
-  childrenTypes: Array<React.FC<any>>,
+  children: React.ReactNode | React.ReactNode[],
+  childrenTypes: Array<React.FC>,
 ) => {
   if (!__DEV__) return children;
 
-  let results: React.ReactElement[] = [];
   const validateType = (child: React.ReactElement) => {
-    return childrenTypes.some(childrenType => child?.type === childrenType);
-  };
-
-  const alertWrongType = () => {
-    Alert.alert(
-      'Component Kits',
-      `Wrong children type for this component, expected are ${childrenTypes
-        .map(type => type.displayName)
-        .join(', ')}.`,
+    const valid = childrenTypes.some(
+      childrenType => child?.type === childrenType || child?.type == Fragment,
     );
+    if (!valid) {
+      Alert.alert(
+        'Component Kits',
+        `Wrong children type for this component, expected are ${childrenTypes
+          .map(type => type.displayName)
+          .join(', ')}.`,
+      );
+    }
+    return valid;
   };
 
   if (Array.isArray(children)) {
     const flattenChildren: React.ReactElement[] = children.flat();
-    results = flattenChildren.filter((child: React.ReactElement) => {
-      if (validateType(child)) {
-        return child;
-      } else {
-        alertWrongType();
-      }
-    });
-  } else {
-    const singleChild: any = children;
-    if (validateType(singleChild)) {
-      results = [singleChild];
-    } else {
-      alertWrongType();
+    for (const child of flattenChildren) {
+      validateType(child);
     }
+    return flattenChildren;
+  } else {
+    validateType(children as ReactElement);
+    return children;
   }
-
-  return results;
 };
 
 const useGridSystem = () => {

package/Switch/index.tsx

@@ -1,19 +1,17 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 
 const Switch: FC<SwitchProps> = props => {
-  const {theme} = useContext(ApplicationContext);
   const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
-  let backgroundColor = value ? theme.colors.primary : Colors.black_07;
+  let backgroundColor = value ? Colors.green_03 : Colors.black_07;
   if (disabled) {
-    backgroundColor = value ? theme.colors.background.tonal : Colors.black_05;
+    backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
 
   return (

package/Title/index.tsx

@@ -0,0 +1,89 @@
+import React, {FC, useContext} from 'react';
+import {Text as RNText, TouchableOpacity, View} from 'react-native';
+import {TitleProps} from './types';
+import {Icon} from '../Icon';
+import styles from './styles';
+import {ApplicationContext} from '../Application';
+import {Colors, Spacing} from '../Consts';
+import {Button} from '../Button';
+import {scaleSize, Text} from '../Text';
+
+const Title: FC<TitleProps> = ({
+  size = 'large',
+  type = 'section',
+  onPressAction,
+  actionTitle,
+  title = 'Title',
+  titleFlex = true,
+  showAction = true,
+  icon,
+  description,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const flexStyle = titleFlex ? {flex: 1} : {};
+  const typeStyle =
+    type === 'screen' ? styles.screen : styles[`${type}_${size}`];
+  const actionColor = titleFlex
+    ? theme.colors.primary
+    : theme.colors.text.default;
+  const actionBackground = titleFlex ? Colors.pink_08 + '4D' : Colors.black_06;
+  const actionSize = titleFlex ? scaleSize(22) : scaleSize(18);
+  const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
+  const marginStyle = type === 'section' ? {marginTop: Spacing.M} : {};
+
+  const renderAction = () => {
+    return !!actionTitle && titleFlex ? (
+      <Button
+        onPress={() => onPressAction?.()}
+        type={'text'}
+        full={false}
+        size={'small'}
+        title={actionTitle}
+      />
+    ) : (
+      <TouchableOpacity
+        style={[
+          {backgroundColor: actionBackground},
+          styles.actionIcon,
+          {width: actionSize, height: actionSize},
+        ]}
+        onPress={onPressAction}>
+        <Icon
+          size={actionSize}
+          color={actionColor}
+          source={'arrow_chevron_right_small'}
+        />
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      <View style={[styles.container, marginStyle]}>
+        {!!icon && type !== 'screen' && (
+          <Icon style={styles.icon} source={icon} />
+        )}
+        <RNText
+          style={[
+            typeStyle,
+            flexStyle,
+            styles.title,
+            {
+              fontFamily: `${theme.font}-${titleWeight}`,
+            },
+          ]}>
+          {title}
+        </RNText>
+        {showAction && type !== 'screen' && renderAction()}
+      </View>
+      {!!description && !!icon && type !== 'screen' && (
+        <Text typography={'description_s'} color={theme.colors.text.secondary}>
+          {description}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export {Title};
+export type {TitleProps};

package/Title/styles.ts

@@ -0,0 +1,46 @@
+import {StyleSheet} from 'react-native';
+import {scaleSize} from '../Text';
+import {Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  card_small: {
+    fontSize: scaleSize(16),
+    lineHeight: scaleSize(22),
+  },
+  card_large: {
+    fontSize: scaleSize(18),
+    lineHeight: scaleSize(26),
+  },
+  section_small: {
+    fontSize: scaleSize(20),
+    lineHeight: scaleSize(28),
+  },
+  section_large: {
+    fontSize: scaleSize(24),
+    lineHeight: scaleSize(34),
+  },
+  screen: {
+    fontSize: scaleSize(36),
+    lineHeight: scaleSize(44),
+  },
+  title: {
+    marginRight: Spacing.XS,
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+  },
+  actionIcon: {
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    marginRight: Spacing.XS,
+    borderRadius: Radius.XS,
+  },
+  wrapper: {
+    width: '100%',
+  },
+});

package/Title/types.ts

@@ -0,0 +1,11 @@
+export type TitleProps = {
+  type?: 'screen' | 'section' | 'card';
+  title: string;
+  description?: string;
+  size?: 'large' | 'small';
+  icon?: string;
+  titleFlex?: boolean;
+  actionTitle?: string;
+  onPressAction?: () => void;
+  showAction?: boolean;
+};

package/index.ts

@@ -45,3 +45,5 @@ export * from './Pagination';
 export * from './Pagination/types';
 export * from './Loader';
 export * from './Loader/types';
+export * from './Title';
+export * from './Title/types';

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.79.6",
+    "version": "0.80.2-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "postinstall": "node verify.js"
     },
     "keywords": [
         "@momo-kits/foundation"
@@ -42,4 +42,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}

package/verify.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+const path = require('path');
+
+try {
+  const package = path.join(`${__dirname}`, 'package.json');
+  const packageInfo = JSON.parse(fs.readFileSync(package, 'utf8'));
+  const packageVersion = parseInt(packageInfo?.version.split('.')?.[1]);
+
+  const app = path.join(`${__dirname}/../../../`, 'app.json');
+  const appInfo = JSON.parse(fs.readFileSync(app, 'utf8'));
+  const iOSAppTarget = appInfo?.client?.ios.deploymentTarget;
+  const androidAppTarget = appInfo?.client?.android.deploymentTarget;
+
+  if (appInfo.name === 'MoMoPlatform') {
+    return;
+  }
+
+  if (packageVersion > iOSAppTarget || packageVersion > androidAppTarget) {
+    throw `Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`;
+  }
+} catch (error) {
+  console.error(`Installation failed: ${error.message}`);
+  process.exit(1);
+}