@momo-kits/foundation 0.79.6-beta.7 → 0.80.1-beta.2

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>
   );
 };
 
@@ -392,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

@@ -5,6 +5,7 @@ import {
   Pressable,
   StyleSheet,
   View,
+  Keyboard,
 } from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {
@@ -115,9 +116,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }
 
   useEffect(() => {
+    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', () =>
+      bottomSheetRef.current?.expand(),
+    );
+
     bottomSheetRef.current?.present();
     return () => {
       mountedRef.current = false;
+      keyboardDidShow.remove();
     };
   }, []);
 
@@ -241,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

@@ -42,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);
     });

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

@@ -139,13 +139,6 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (params?.headerRight == undefined) {
-    options = {
-      ...options,
-      headerRight: (props: any) => <HeaderToolkitAction {...props} />,
-    };
-  }
-
   if (params.hiddenBack) {
     options = {
       ...options,

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,12 +101,20 @@ 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`}
               editable={!disabled}
-              textAlignVertical="top"
+              textAlignVertical="center"
               ref={inputRef}
               style={[
                 styles.input,

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/Card.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';
@@ -120,6 +120,9 @@ const Card: React.FC<CardProps> = ({children, style, backgroundImage}) => {
       }
     } else {
       element.push(children);
+      if (children?.type == Fragment) {
+        return renderView(children?.props.children);
+      }
     }
     return element;
   };

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

@@ -26,20 +26,20 @@ const Title: FC<TitleProps> = ({
   const actionColor = titleFlex
     ? theme.colors.primary
     : theme.colors.text.default;
-  const actionBackground = titleFlex ? Colors.pink_08 + '4D' : Colors.black_06;
+  const actionBackground = titleFlex
+    ? theme.colors.primary + '0F'
+    : 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 onPress={onPressAction}>
+        <Text typography={'action_s'} color={theme.colors.primary}>
+          {actionTitle}
+        </Text>
+      </TouchableOpacity>
     ) : (
       <TouchableOpacity
         style={[
@@ -76,7 +76,7 @@ const Title: FC<TitleProps> = ({
         </RNText>
         {showAction && type !== 'screen' && renderAction()}
       </View>
-      {!!description && !!icon && type !== 'screen' && (
+      {!!description && type !== 'screen' && (
         <Text typography={'description_s'} color={theme.colors.text.secondary}>
           {description}
         </Text>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.79.6-beta.7",
+    "version": "0.80.1-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {

package/verify.js

@@ -11,7 +11,14 @@ try {
   const iOSAppTarget = appInfo?.client?.ios.deploymentTarget;
   const androidAppTarget = appInfo?.client?.android.deploymentTarget;
 
+  if (appInfo.name === 'MoMoPlatform') {
+    return;
+  }
+
   if (packageVersion > iOSAppTarget || packageVersion > androidAppTarget) {
+    console.error(
+      `Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`,
+    );
     throw new Error(
       `Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`,
     );