@momo-kits/foundation 0.81.7 → 0.81.8-beta.2

package/Application/BottomTab.tsx

@@ -8,7 +8,12 @@ import {ApplicationContext} from './index';
 
 const Tab = createBottomTabNavigator();
 
-const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners, navigation}) => {
+const BottomTab: React.FC<BottomTabProps> = ({
+  tabs,
+  listeners,
+  navigation,
+  initialRouteName,
+}) => {
   const {theme} = useContext(ApplicationContext);
 
   const defaultListener = {
@@ -21,7 +26,9 @@ const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners, navigation}) => {
   };
 
   return (
-    <Tab.Navigator backBehavior={'firstRoute'}>
+    <Tab.Navigator
+      initialRouteName={initialRouteName}
+      backBehavior={'firstRoute'}>
       {tabs.map(item => {
         return (
           <Tab.Screen

package/Application/Components.tsx

@@ -1,6 +1,7 @@
 import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {
   Animated,
+  BackHandler,
   DeviceEventEmitter,
   StatusBar,
   StyleSheet,
@@ -149,8 +150,31 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   accessibilityLabel = '',
 }) => {
   const {navigator} = useContext(ApplicationContext);
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      goBack,
+    );
+
+    return () => backHandler.remove();
+  }, []);
+
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
+    const currentRoute = navigator?.ref?.current.getCurrentRoute();
+
+    if (navigator?.trackingInfo) {
+      navigator?.maxApi?.trackEvent('service_icon_clicked', {
+        feature_code: navigator.trackingInfo.code,
+        app_id: navigator.trackingInfo.appId,
+        miniapp_version: navigator.trackingInfo.buildNumber,
+        screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+        trigger_id: '111154000000000000',
+        icon_name: 'back',
+      });
+    }
+
     if (canGoBack) {
       if (preventBack) {
         navigator?.showModal({
@@ -170,12 +194,15 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
       } else {
         navigator?.ref.current?.goBack();
       }
+    } else if (navigator?.maxApi) {
+      navigator?.maxApi?.dismiss(navigator.dismissData);
     } else {
       const currentTime = new Date().getTime();
       const requestId = `navigationBackPress#${currentTime}`;
       DeviceEventEmitter.emit('dismiss', {requestId});
     }
     onPressLeftHeader?.();
+    return true;
   };
 
   return (
@@ -308,9 +335,25 @@ const HeaderToolkitAction: React.FC<any> = ({tintColor}) => {
   }
 
   useEffect(() => {
-    navigator?.getToolkit().then((toolConfig: any) => {
-      setToolConfig(toolConfig);
-    });
+    if (navigator?.toolkitConfig) {
+      setToolConfig(navigator?.toolkitConfig);
+    } else {
+      navigator?.requestApi('getToolkit', [undefined], (result: boolean) => {
+        if (result) {
+          navigator?.requestApi(
+            'getToolkitConfig',
+            [undefined],
+            (config: any) => {
+              navigator.toolkitConfig = {
+                ...config?.utilityToolConfig,
+                appCode: config?.appCode,
+              };
+              setToolConfig(navigator?.toolkitConfig);
+            },
+          );
+        }
+      });
+    }
   }, []);
 
   useEffect(() => {

package/Application/ModalScreen.tsx

@@ -26,6 +26,9 @@ import {
 import {HeaderBackground, HeaderLeft, HeaderTitle} from './Components';
 
 const ModalScreen: React.FC<any> = props => {
+  /**
+   * dismiss callback when modal | bottom sheet dismissed
+   */
   useEffect(() => {
     return () => {
       props.route.params?.onDismiss?.();
@@ -40,7 +43,7 @@ const ModalScreen: React.FC<any> = props => {
 
 const Modal: React.FC<ModalParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const {screen, barrierDismissible}: ModalParams = props.route.params;
+  const {screen, barrierDismissible, modalName} = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
   const params = {
@@ -50,6 +53,45 @@ const Modal: React.FC<ModalParams> = props => {
 
   delete params.screen;
 
+  /**
+   * tracking
+   */
+  useEffect(() => {
+    if (navigator?.trackingInfo) {
+      const navigationRoutes = props.navigation.getState()?.routes || [];
+      const routesLength = navigationRoutes.length;
+      let screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+      if (routesLength > 1) {
+        screen_name = navigationRoutes[routesLength - 2]?.params?.screen?.name;
+      }
+      const error_code = (screen as Function)?.()?.props?.information;
+      navigator?.maxApi?.trackEvent('service_component_displayed', {
+        feature_code: navigator.trackingInfo.code,
+        app_id: navigator.trackingInfo.appId,
+        miniapp_version: navigator.trackingInfo.buildNumber,
+        screen_name,
+        trigger_id: '111012100000000000',
+        component_type: 'popup',
+        component_name: modalName,
+        error_code,
+      });
+
+      return () => {
+        navigator?.maxApi?.trackEvent('service_icon_clicked', {
+          feature_code: navigator?.trackingInfo?.code,
+          app_id: navigator?.trackingInfo?.appId,
+          miniapp_version: navigator?.trackingInfo?.buildNumber,
+          screen_name,
+          trigger_id: '111154100000000001',
+          component_type: 'popup',
+          component_name: modalName,
+          error_code,
+          icon_name: 'close',
+        });
+      };
+    }
+  }, []);
+
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
@@ -181,6 +223,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               />
             </View>
             <NavigationContainer
+              trackingInfo={navigator?.trackingInfo}
+              maxApi={navigator?.maxApi}
               theme={{
                 ...theme,
                 assets: {...theme.assets, headerBackground: undefined},
@@ -223,7 +267,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                       icon="24_navigation_close"
                       backgroundColor="transparent"
                       useBorder={false}
-                      onPress={bottomSheetRef.current?.dismiss}
+                      onPress={() => bottomSheetRef.current?.dismiss()}
                       accessibilityLabel={'BottomSheet/Close'}
                     />
                   </HeaderRightAction>

package/Application/Navigation.ts

@@ -14,6 +14,10 @@ class Navigation {
     this.theme = theme;
   }
 
+  /**
+   * navigation options filter by design system rule
+   * @param params
+   */
   private filterParams = (params: NavigationOptions) => {
     if (params.headerRight) {
       const headerRight = params.headerRight?.({}) as React.ReactElement;
@@ -24,14 +28,21 @@ class Navigation {
         );
       }
     }
+
+    if (params.headerLeft) {
+      console.warn('headerLeft not allow override render by design system!');
+      delete params.headerLeft;
+    }
+
     return params;
   };
 
+  /**
+   * navigation setOptions support props NavigationOptions base on react-navigation options
+   * @param params
+   */
   setOptions = (params: NavigationOptions) => {
-    if (__DEV__) {
-      params = this.filterParams(params);
-    }
-    params = getOptions(params, this.theme);
+    params = getOptions(this.filterParams(params), this.theme);
     this.instance.setOptions(params);
   };
 }

package/Application/NavigationContainer.tsx

@@ -23,12 +23,16 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  trackingInfo,
 }) => {
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
   const [language, setLanguage] = useState<'vi' | 'en'>('vi');
 
+  /**
+   * engine only shake to enable grid view
+   */
   useEffect(() => {
     const subscription = DeviceEventEmitter.addListener(
       'onChangeGrid',
@@ -37,10 +41,13 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       },
     );
     return () => {
-      subscription.remove();
+      subscription?.remove?.();
     };
   }, []);
 
+  /**
+   * handle mini language & listen change
+   */
   useEffect(() => {
     maxApi?.getLanguage?.((lang: 'vi' | 'en') => {
       setLanguage(lang);
@@ -53,8 +60,16 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     };
   }, []);
 
+  /**
+   * inject data for navigator
+   */
   navigator.current.maxApi = maxApi;
+  navigator.current.trackingInfo = trackingInfo;
 
+  /**
+   * translate
+   * @param key
+   */
   const translate = (key: string) => {
     const mergedLocalization: LocalizationObject = {
       vi: {...localization?.vi, ...kitLocalization.vi},

package/Application/Navigator.ts

@@ -4,37 +4,63 @@ import {
   HeaderToolkitProps,
   ModalParams,
   ScreenParams,
+  TrackingInfo,
 } from './types';
 
 class Navigator {
   ref?: any;
   toolkitConfig?: HeaderToolkitProps;
   maxApi?: any;
+  trackingInfo?: TrackingInfo;
+  dismissData?: any;
 
   constructor(navigation: any) {
     this.ref = navigation;
   }
 
+  /**
+   * push new stack screen
+   * @param params
+   */
   push = (params: ScreenParams) => {
     this.ref.current.dispatch(StackActions.push('Stack', params));
   };
 
+  /**
+   * replace current screen with new screen
+   * @param params
+   */
   replace = (params: ScreenParams) => {
     this.ref.current.dispatch(StackActions.replace('Stack', params));
   };
-
+  /**
+   * pop to dismiss a screen
+   * @param count
+   */
   pop = (count?: number) => {
     this.ref.current.dispatch(StackActions.pop(count ?? 1));
   };
 
+  /**
+   * present a new screen, show from bottom iOS
+   * @param params
+   */
   present = (params: ScreenParams) => {
     this.ref.current.dispatch(StackActions.push('Dialog', params));
   };
 
+  /**
+   * show a modal popup
+   * @param params
+   */
   showModal = (params: ModalParams) => {
     this.ref.current.dispatch(StackActions.push('Modal', params));
   };
 
+  /**
+   * show a bottom sheet
+   * @param params
+   */
   showBottomSheet = (params: BottomSheetParams) => {
     this.ref.current.dispatch(
       StackActions.push('Modal', {
@@ -44,10 +70,17 @@ class Navigator {
     );
   };
 
+  /**
+   * pop all screen route
+   */
   popToTop = () => {
     this.ref.current.dispatch(StackActions.popToTop());
   };
 
+  /**
+   * reset a navigation flow with new screen
+   * @param params
+   */
   reset = (params: ScreenParams) => {
     this.ref.current.dispatch(
       CommonActions.reset({
@@ -63,36 +96,17 @@ class Navigator {
     );
   };
 
+  /**
+   * request max api for mini app
+   * @param func
+   * @param args
+   * @param callback
+   */
   requestApi = (func: any, args: any = [], callback: any) => {
     if (this.maxApi) {
       this.maxApi[func]?.(...args, callback);
-    } else {
-      const instance: any = global;
-      instance?.miniAppApi?.dispatch?.(func, ...args, callback);
     }
   };
-
-  getToolkit = async (): Promise<HeaderToolkitProps | undefined> => {
-    return new Promise(resolve => {
-      if (this.toolkitConfig) {
-        resolve(this.toolkitConfig);
-        return;
-      }
-      this.requestApi('getToolkit', [undefined], (result: boolean) => {
-        if (result) {
-          this.requestApi('getToolkitConfig', [undefined], (config: any) => {
-            this.toolkitConfig = {
-              ...config?.utilityToolConfig,
-              appCode: config?.appCode,
-            };
-            resolve(this.toolkitConfig);
-          });
-        } else {
-          resolve(undefined);
-        }
-      });
-    });
-  };
 }
 
 export default Navigator;

package/Application/StackScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useLayoutEffect} from 'react';
+import React, {useContext, useEffect, useLayoutEffect} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext} from './index';
@@ -6,7 +6,7 @@ import {GridSystem} from '../Layout';
 
 const StackScreen: React.FC<ScreenParams> = props => {
   const {screen: Component, options}: ScreenParams = props.route.params;
-  const {theme, showGrid} = useContext(ApplicationContext);
+  const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const navigation = new Navigation(props.navigation, theme);
 
   const params = {
@@ -16,12 +16,38 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   delete params.screen;
 
+  /**
+   * set options for screen
+   */
   useLayoutEffect(() => {
     if (options) {
       navigation.setOptions(options);
     }
   }, [options]);
 
+  /**
+   * tracking for screen
+   */
+  useEffect(() => {
+    if (navigator?.trackingInfo) {
+      const navigationRoutes = props.navigation.getState()?.routes || [];
+      const routesLength = navigationRoutes.length;
+      let pre_screen_name = navigationRoutes?.[0]?.params?.screen?.name;
+      if (routesLength > 1) {
+        pre_screen_name =
+          navigationRoutes[routesLength - 2]?.params?.screen?.name;
+      }
+      navigator?.maxApi?.trackEvent('service_frame_displayed', {
+        feature_code: navigator.trackingInfo.code,
+        app_id: navigator.trackingInfo.appId,
+        miniapp_version: navigator.trackingInfo.buildNumber,
+        screen_name: Component.name,
+        pre_screen_name,
+        trigger_id: '111378000000000000',
+      });
+    }
+  }, []);
+
   return (
     <>
       <Component {...params} />

package/Application/types.ts

@@ -79,12 +79,20 @@ export type LocalizationObject = {
   };
 };
 
+export type TrackingInfo = {
+  [key: string]: any;
+  code: string;
+  appId: string;
+  buildNumber: number;
+};
+
 export type NavigationContainerProps = {
   screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
-  maxApi?: any;
+  maxApi: any;
   localization?: LocalizationObject;
+  trackingInfo?: TrackingInfo;
 };
 
 export type NavigationScreenProps = {
@@ -101,6 +109,7 @@ export type ScreenParams = {
 
 export interface ModalParams extends ScreenParams {
   [key: string]: any;
+  modalName?: string;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
 }
@@ -177,6 +186,7 @@ export type BottomTabItemProps = {
 
 export type BottomTabProps = {
   tabs: BottomTabItemProps[];
+  initialRouteName?: string;
   navigation: Navigation;
   listeners?: {
     tabPress?: any;

package/Application/utils.tsx

@@ -13,6 +13,9 @@ import {
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
 
+/**
+ * default options for stack screen
+ */
 const getStackOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
@@ -24,6 +27,9 @@ const getStackOptions = (): StackNavigationOptions => {
   };
 };
 
+/**
+ * default options for dialog screen
+ */
 const getDialogOptions = (): StackNavigationOptions => {
   return {
     headerTitleAlign: 'left',
@@ -35,6 +41,9 @@ const getDialogOptions = (): StackNavigationOptions => {
   };
 };
 
+/**
+ * default options for modal screen
+ */
 const getModalOptions = (): StackNavigationOptions => {
   return {
     headerShown: false,
@@ -60,6 +69,9 @@ const getModalOptions = (): StackNavigationOptions => {
   };
 };
 
+/**
+ * build react-navigation options
+ */
 const getOptions = (params: NavigationOptions, theme: Theme) => {
   let options = {};
 

package/Consts/colors+spacing+radius.ts

@@ -153,9 +153,9 @@ const Spacing = {
   L: 16,
   XL: 24,
   XXL: 32,
-  Size48: 48,
-  Size56: 56,
-  Size64: 64,
+  Size3XL: 48,
+  Size4XL: 56,
+  Size5XL: 64,
 };
 
 const Radius = {

package/Image/index.tsx

@@ -20,13 +20,12 @@ const Image: React.FC<ImageProps> = ({
   style,
   source,
   accessibilityLabel,
+  loading,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
   const error = useRef(false);
-  const [status, setStatus] = useState<Status>(
-    rest.loading ? 'loading' : 'success',
-  );
+  const [status, setStatus] = useState<Status>('success');
 
   /**
    * render content loading | fail | rendered
@@ -65,16 +64,18 @@ const Image: React.FC<ImageProps> = ({
       <FastImage
         {...rest}
         source={source}
+        fallback={false}
         style={styles.image}
+        onProgress={() => {
+          if (status != 'loading' && loading) setStatus('loading');
+        }}
         onLoadStart={() => {
           error.current = false;
         }}
         onLoadEnd={() => {
-          if (error.current) {
-            setStatus('error');
-          } else {
-            setStatus('success');
-          }
+          let current: Status = 'success';
+          if (error.current) current = 'error';
+          if (status != current) setStatus(current);
         }}
         onError={() => {
           error.current = true;

package/Input/InputSearch.tsx

@@ -64,7 +64,7 @@ const InputSearch = forwardRef(
         <TextInput
           {...props}
           accessibilityLabel={accessibilityLabel}
-          textAlignVertical="top"
+          textAlignVertical="center"
           ref={inputRef}
           style={[
             styles.searchInput,

package/Layout/Card.tsx

@@ -145,6 +145,7 @@ const Card: React.FC<CardProps> = ({
         accessibilityLabel={`Card`}
         style={[
           style,
+          styles.protectedStyle,
           styles.card,
           {
             width: widthSection,

package/Layout/ItemSectionList.tsx

@@ -0,0 +1,39 @@
+import React, {FC, useContext} from 'react';
+import {SectionList, SectionListProps, View} from 'react-native';
+import Item, {SpanNumber} from './Item';
+import {GridContext} from './index';
+import styles from './styles';
+
+export interface ItemSectionListProps extends SectionListProps<any> {
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
+  widthSpan?: SpanNumber;
+}
+
+const ItemSectionList: FC<ItemSectionListProps> = ({
+  renderItem,
+  widthSpan,
+  style,
+  contentContainerStyle,
+  ...props
+}) => {
+  const {gutterSize, numberOfColumns} = useContext(GridContext);
+  const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
+  const _renderItem = (item: any) => {
+    return <Item widthSpan={widthItem}>{renderItem?.(item)}</Item>;
+  };
+
+  return (
+    <SectionList
+      {...props}
+      renderItem={_renderItem}
+      horizontal={false}
+      ItemSeparatorComponent={() => <View style={{height: gutterSize}} />}
+      style={[style, styles.protectedStyle]}
+      contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
+    />
+  );
+};
+
+export default ItemSectionList;

package/Layout/Section.tsx

@@ -22,11 +22,6 @@ export interface SectionProps extends ViewProps {
    */
   useMargin?: boolean;
 
-  /**
-   * Optional. Background color for the Section component.
-   */
-  backgroundColor?: string;
-
   /**
    * Optional. Background image for the Section component.
    */
@@ -36,8 +31,8 @@ export interface SectionProps extends ViewProps {
 const Section: React.FC<SectionProps> = ({
   children,
   useMargin = true,
-  backgroundColor,
   backgroundImage,
+  style,
 }) => {
   const {showGrid} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
@@ -156,13 +151,16 @@ const Section: React.FC<SectionProps> = ({
       }}>
       <View
         accessibilityLabel={`Section`}
-        style={{
-          width: widthSection,
-          marginHorizontal: gridContext.margin,
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-          backgroundColor: backgroundColor,
-        }}>
+        style={[
+          style,
+          styles.protectedStyle,
+          {
+            width: widthSection,
+            marginHorizontal: gridContext.margin,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+          },
+        ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}

package/Layout/index.ts

@@ -6,6 +6,7 @@ import {createContext} from 'react';
 import {GridContextProps} from './types';
 import Item from './Item';
 import ItemList from './ItemList';
+import ItemSectionList from './ItemSectionList';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
@@ -23,4 +24,5 @@ export {
   validateChildren,
   Item,
   ItemList,
+  ItemSectionList,
 };

package/Layout/styles.ts

@@ -45,19 +45,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     borderRadius: Radius.M,
-    paddingTop: undefined,
-    paddingBottom: undefined,
-    paddingLeft: undefined,
-    paddingRight: undefined,
-    paddingVertical: undefined,
-    paddingHorizontal: undefined,
     padding: 12,
-    margin: undefined,
-    marginTop: undefined,
-    marginBottom: undefined,
-    marginLeft: undefined,
-    marginRight: undefined,
-    marginVertical: undefined,
   },
   item: {
     overflow: 'hidden',

package/Popup/PopupNotify.tsx

@@ -1,5 +1,5 @@
-import React, {useContext} from 'react';
-import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import React, {useContext, useState} from 'react';
+import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
@@ -19,6 +19,14 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   onIconClose,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
+  const [scrollContent, setScrollContent] = useState(false);
+
+  let descriptionStyle = {};
+  let Description: any = View;
+  if (scrollContent) {
+    Description = ScrollView;
+    descriptionStyle = {height: 80};
+  }
 
   /**
    * on action popup
@@ -143,11 +151,19 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         <Text typography={'title_xs'} numberOfLines={1}>
           {title}
         </Text>
-        <View style={styles.description}>
-          <Text typography={'paragraph_default'} numberOfLines={3}>
+        <Description style={[styles.description, descriptionStyle]}>
+          <Text
+            typography={'paragraph_default'}
+            numberOfLines={4}
+            onTextLayout={({nativeEvent: {lines}}) => {
+              const enableScroll = lines.length > 3;
+              if (enableScroll != scrollContent) {
+                setScrollContent(enableScroll);
+              }
+            }}>
             {description}
           </Text>
-        </View>
+        </Description>
         {!!information && (
           <View style={styles.information}>
             <Text

package/Title/index.tsx

@@ -1,5 +1,10 @@
-import React, {FC, useContext} from 'react';
-import {Text as RNText, TouchableOpacity, View} from 'react-native';
+import React, {FC, useContext, useState} from 'react';
+import {
+  LayoutChangeEvent,
+  Text as RNText,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {TitleProps} from './types';
 import {Icon} from '../Icon';
 import styles from './styles';
@@ -19,6 +24,7 @@ const Title: FC<TitleProps> = ({
   description,
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const [containerWidth, setContainerWidth] = useState(0);
   const flexStyle = titleFlex ? {flex: 1} : {};
   const typeStyle =
     type === 'screen' ? styles.screen : styles[`${type}_${size}`];
@@ -31,7 +37,7 @@ const Title: FC<TitleProps> = ({
   const actionSize = titleFlex ? scaleSize(22) : scaleSize(18);
   const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
   const marginStyle = type === 'section' ? {marginTop: Spacing.M} : {};
-
+  const numberOfLines = type === 'section' ? 1 : 2;
   const renderAction = () => {
     return !!actionTitle && titleFlex ? (
       <TouchableOpacity onPress={onPressAction}>
@@ -56,19 +62,26 @@ const Title: FC<TitleProps> = ({
     );
   };
 
+  const onLayout = (e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  };
+
   return (
-    <View style={styles.wrapper}>
+    <View onLayout={onLayout} style={styles.wrapper}>
       <View style={[styles.container, marginStyle]}>
         {!!icon && type !== 'screen' && (
           <Icon style={styles.icon} source={icon} />
         )}
         <RNText
+          numberOfLines={numberOfLines}
           style={[
             typeStyle,
             flexStyle,
             styles.title,
             {
               fontFamily: `${theme.font}-${titleWeight}`,
+              color: theme.colors.text.default,
+              maxWidth: containerWidth - scaleSize(22),
             },
           ]}>
           {title}

package/Title/styles.ts

@@ -4,6 +4,10 @@ import {Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   card_small: {
+    fontSize: scaleSize(14),
+    lineHeight: scaleSize(20),
+  },
+  card_medium: {
     fontSize: scaleSize(16),
     lineHeight: scaleSize(22),
   },
@@ -11,10 +15,14 @@ export default StyleSheet.create({
     fontSize: scaleSize(18),
     lineHeight: scaleSize(26),
   },
-  section_small: {
+  section_medium: {
     fontSize: scaleSize(20),
     lineHeight: scaleSize(28),
   },
+  section_small: {
+    fontSize: scaleSize(16),
+    lineHeight: scaleSize(22),
+  },
   section_large: {
     fontSize: scaleSize(24),
     lineHeight: scaleSize(34),
@@ -28,7 +36,7 @@ export default StyleSheet.create({
   },
   container: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'baseline',
     width: '100%',
   },
   actionIcon: {

package/Title/types.ts

@@ -22,7 +22,7 @@ export type TitleProps = {
    * 'large' - A larger, more prominent title.
    * 'small' - A smaller, less prominent title.
    */
-  size?: 'large' | 'small';
+  size?: 'large' | 'medium' | 'small';
 
   /**
    * Optional. Represents the name or key of the icon to be displayed alongside the title.

package/package.json

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