@momo-kits/foundation 0.110.1-beta.13 → 0.110.1-beta.15

package/Application/Components/HeaderBackground.tsx

@@ -55,8 +55,8 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
             style={{
               width: '100%',
               height: '100%',
-              aspectRatio: 4,
             }}
+            resizeMode={'stretch'}
             source={{uri: theme?.assets?.headerBackgroundWhite}}
             loading={false}
           />

package/Application/Components/HeaderExtendHeader.tsx

@@ -113,8 +113,8 @@ const HeaderExtendHeader: React.FC<{
               style={{
                 width: '100%',
                 height: '100%',
-                aspectRatio: 4,
               }}
+              resizeMode={'stretch'}
               source={{uri: headerBackgroundWhite}}
               loading={false}
             />
@@ -194,8 +194,8 @@ const HeaderExtendHeader: React.FC<{
               style={{
                 width: '100%',
                 height: '100%',
-                aspectRatio: 4,
               }}
+              resizeMode={'stretch'}
               source={{uri: headerBackgroundWhite}}
               loading={false}
             />

package/Application/Components/HeaderTitle.tsx

@@ -8,10 +8,11 @@ import {
 } from 'react-native';
 import {ApplicationContext, MiniAppContext} from '../index';
 import {exportFontFamily, scaleSize, Text} from '../../Text';
-import {Colors, Spacing, Styles} from '../../Consts';
+import {Colors, Spacing, Radius, Styles} from '../../Consts';
 import {TitleJourneyProps, TitleLocationProps, TitleUserProps} from '../types';
 import {Image} from '../../Image';
 import {Icon} from '../../Icon';
+import {Skeleton} from '../../Skeleton';
 
 /**
  * default header title used for nav
@@ -73,8 +74,9 @@ const TitleUser: React.FC<TitleUserProps> = ({
   tintColor,
   dotColor,
   onPress,
-  icon1,
-  icon2,
+  verify,
+  icons,
+  isLoading,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const getShortName = (name: string) => {
@@ -96,35 +98,55 @@ const TitleUser: React.FC<TitleUserProps> = ({
   };
 
   const renderVerifyIcon = () => {
-    if (icon1 && icon2) {
-      return (
-        <View style={Styles.row}>
-          <Image
-            source={{
-              uri: icon1,
-            }}
-            style={styles.verifiedIcon}
-          />
+    const renderIcons = () => {
+      if (icons && icons.length > 0) {
+        return icons.map(icon => (
           <Image
             source={{
-              uri: icon2,
+              uri: icon,
             }}
             style={styles.verifiedIcon}
           />
+        ));
+      }
+    };
+
+    return <View style={Styles.row}>{renderIcons()}</View>;
+  };
+
+  const renderShimmer = () => {
+    return (
+      <View style={Styles.row}>
+        <View
+          style={[
+            styles.imageContainer,
+            {
+              borderColor: theme.colors.border.default,
+              marginRight: Spacing.M / 2,
+            },
+          ]}>
+          <Skeleton />
         </View>
-      );
-    } else if (icon1 || icon2) {
-      return (
-        <Image
-          source={{
-            uri: icon1 || icon2,
-          }}
-          style={styles.verifiedIcon}
-        />
-      );
-    }
+        <View style={Styles.flex}>
+          <View style={styles.shimmerTitle}>
+            <Skeleton />
+          </View>
+          <View style={{height: Spacing.XXS}} />
+          <View style={styles.shimmerDescription}>
+            <Skeleton />
+          </View>
+        </View>
+      </View>
+    );
   };
 
+  if (verify) {
+    console.warn(`Warning: The verify value "${verify}" is deprecated.`);
+  }
+
+  if (isLoading) {
+    return renderShimmer();
+  }
   return (
     <TouchableOpacity
       style={styles.headerTitleContainer}
@@ -150,7 +172,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
               color={tintColor}
               numberOfLines={1}>
               {title}
-            </Text> 
+            </Text>
             {renderVerifyIcon()}
           </View>
           {!!subTitle && (
@@ -177,7 +199,24 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
   location,
   description,
   onPress,
+  isLoading,
 }) => {
+  const renderShimmer = () => {
+    return (
+      <View style={Styles.flex}>
+        <View style={styles.shimmerDescription}>
+          <Skeleton />
+        </View>
+        <View style={{height: Spacing.XXS}} />
+        <View style={styles.shimmerTitle}>
+          <Skeleton />
+        </View>
+      </View>
+    );
+  };
+  if (isLoading) {
+    return renderShimmer();
+  }
   return (
     <TouchableOpacity
       style={[styles.headerTitleContainer, {alignItems: 'flex-start'}]}
@@ -217,10 +256,27 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
   iconColor,
   tintColor,
   onPress,
+  isLoading,
 }) => {
   const {width} = Dimensions.get('screen');
   const startWidth = width * 0.25;
   const endWidth = width * 0.75 - 212;
+  const renderShimmer = () => {
+    return (
+      <View style={Styles.flex}>
+        <View style={styles.shimmerTitle}>
+          <Skeleton />
+        </View>
+        <View style={{height: Spacing.XXS}} />
+        <View style={styles.shimmerDescription}>
+          <Skeleton />
+        </View>
+      </View>
+    );
+  };
+  if (isLoading) {
+    return renderShimmer();
+  }
   return (
     <TouchableOpacity style={styles.headerTitleContainer} onPress={onPress}>
       <View style={styles.rowJourney}>
@@ -322,6 +378,18 @@ const styles = StyleSheet.create({
     borderColor: Colors.black_01,
   },
   verifiedIcon: {width: 16, height: 16, marginLeft: Spacing.XS},
+  shimmerTitle: {
+    height: 18,
+    width: 120,
+    borderRadius: Radius.XS,
+    overflow: 'hidden',
+  },
+  shimmerDescription: {
+    height: 12,
+    width: 120,
+    borderRadius: Radius.XS,
+    overflow: 'hidden',
+  },
 });
 
 export {HeaderTitle, TitleCustom};

package/Application/NavigationContainer.tsx

@@ -34,7 +34,8 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const [showGrid, setShowGrid] = useState(false);
   const [configHeader, setConfigHeader] = useState({
     header: undefined,
-    headerWhite: undefined,
+    headerWhite:
+      'https://static.momocdn.net/app/img/kits/background/header/header_Tet_2024_white.png',
   });
   /**
    * inject data for navigator

package/Application/types.ts

@@ -199,8 +199,8 @@ export type TitleUserProps = {
   verify?: boolean;
   tintColor?: string;
   onPress?: () => void;
-  icon1?: string;
-  icon2?: string;
+  icons?: string[];
+  isLoading?: boolean;
 };
 
 export type TitleLocationProps = {
@@ -208,6 +208,7 @@ export type TitleLocationProps = {
   location: string;
   tintColor?: string;
   onPress?: () => void;
+  isLoading?: boolean;
 };
 
 export type TitleJourneyProps = {
@@ -218,6 +219,7 @@ export type TitleJourneyProps = {
   iconColor?: string;
   tintColor?: string;
   onPress?: () => void;
+  isLoading?: boolean;
 };
 
 export type HeaderToolkitProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.110.1-beta.13",
+  "version": "0.110.1-beta.15",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},