@momo-kits/foundation 0.81.33 → 0.81.34

package/Application/BottomTab.tsx

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect} from 'react';
-import {View} from 'react-native';
+import {Platform, StyleSheet, View} from 'react-native';
 import {BottomTabProps, NavigationScreenProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {createStackNavigator} from '@react-navigation/stack';
@@ -8,6 +8,8 @@ import {Text} from '../Text';
 import {ApplicationContext} from './index';
 import {getStackOptions} from './utils';
 import StackScreen from './StackScreen';
+import {Spacing} from '../Consts';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -31,6 +33,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
   initialRouteName,
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const insets = useSafeAreaInsets();
 
   useEffect(() => {
     navigation?.setOptions({
@@ -43,7 +46,16 @@ const BottomTab: React.FC<BottomTabProps> = ({
   return (
     <Tab.Navigator
       initialRouteName={initialRouteName}
-      backBehavior={'firstRoute'}>
+      backBehavior={'firstRoute'}
+      tabBarOptions={{
+        style: {
+          height: 68 + insets.bottom,
+        },
+        tabStyle: {
+          height: 68,
+          paddingVertical: 8,
+        },
+      }}>
       {tabs.map(item => {
         return (
           <Tab.Screen
@@ -55,14 +67,12 @@ const BottomTab: React.FC<BottomTabProps> = ({
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (
-                  <View style={{paddingHorizontal: 16}}>
-                    <Text
-                      numberOfLines={1}
-                      typography={focused ? 'label_xs' : 'description_xs'}
-                      color={color}>
-                      {item.label}
-                    </Text>
-                  </View>
+                  <Text
+                    numberOfLines={1}
+                    typography={focused ? 'label_xs' : 'description_xs'}
+                    color={color}>
+                    {item.label}
+                  </Text>
                 );
               },
               tabBarBadge: item?.badgeLabel,
@@ -70,11 +80,14 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 borderColor: 'white',
                 borderWidth: 2,
                 fontSize: 10,
-                lineHeight: 14,
+                lineHeight: Platform.OS === 'android' ? 17 : 14,
                 fontWeight: 'bold',
                 alignSelf: 'center',
                 fontFamily: `${theme.font}-Bold`,
+                left: item?.showDot ? 8 : 4,
+                top: item?.showDot ? -2 : -6,
               },
+
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />
               ),

package/Application/Components.tsx

@@ -242,8 +242,9 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
   useBorder = false,
 }) => {
-  const {theme} = useContext(ApplicationContext);
-  let headerImage = theme.assets?.headerBackground;
+  const {theme, config} = useContext(ApplicationContext);
+  let headerImage =
+    config?.navigationBar?.headerBar ?? theme.assets?.headerBackground;
   if (image === null) {
     headerImage = undefined;
   }

package/Application/NavigationContainer.tsx

@@ -6,13 +6,13 @@ import {
   NavigationContainerRef,
 } from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
+import {DeviceEventEmitter, NativeModules} from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {LocalizationObject, NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
-import {DeviceEventEmitter} from 'react-native';
 import kitLocalization from '../Assets/language.json';
 
 const Stack = createStackNavigator();
@@ -29,24 +29,11 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   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',
-      enable => {
-        setShowGrid(!!enable);
-      },
-    );
-    return () => {
-      subscription?.remove?.();
-    };
-  }, []);
+  const [config, setConfig] = useState(undefined);
 
   /**
    * handle mini language & listen change
+   * engine only shake to enable grid view
    */
   useEffect(() => {
     maxApi?.getLanguage?.((lang: 'vi' | 'en') => {
@@ -55,8 +42,21 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     const listener = maxApi?.observer?.('language', (lang: 'vi' | 'en') => {
       setLanguage(lang);
     });
+    const subscription = DeviceEventEmitter.addListener(
+      'onChangeGrid',
+      enable => {
+        setShowGrid(!!enable);
+      },
+    );
+    try {
+      const result = JSON.parse(
+        NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM'),
+      );
+      setConfig(result);
+    } catch (e) {}
     return () => {
       listener?.remove?.();
+      subscription?.remove?.();
     };
   }, []);
 
@@ -87,6 +87,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             navigator: navigator.current,
             showGrid,
             language,
+            config,
             translate,
           }}>
           <ReactNavigationContainer

package/Application/types.ts

@@ -63,6 +63,7 @@ export type Theme = {
 };
 
 export type Context = {
+  [key: string]: any;
   theme: Theme;
   navigator?: Navigator;
   showGrid?: boolean;

package/Application/utils.tsx

@@ -12,11 +12,6 @@ import {
 } from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-import {NativeModules} from 'react-native';
-
-let config: {
-  [key: string]: any;
-};
 
 /**
  * default options for stack screen
@@ -137,21 +132,4 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-const getThemeConfig = () => {
-  if (!config) {
-    try {
-      config = JSON.parse(
-        NativeModules?.ConfigsModule?.getConfigSync?.('DESIGN_SYSTEM'),
-      );
-    } catch (e) {}
-  }
-  return config;
-};
-
-export {
-  getStackOptions,
-  getDialogOptions,
-  getModalOptions,
-  getOptions,
-  getThemeConfig,
-};
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Badge/Badge.tsx

@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import {ApplicationContext} from '../Application';
 import {BadgeProps} from './types';
 import styles from './styles';
-import {Colors, Spacing} from '../Consts';
+import {Colors} from '../Consts';
 import {Text} from '../Text';
 
 const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {

package/Badge/types.ts

@@ -1,10 +1,5 @@
 import {ViewStyle} from 'react-native';
 
-/**
- * Defines the types of badges that can be used. This helps in rendering the appropriate badge style.
- */
-export type BadgeType = 'badge' | 'badge_number' | 'dot' | 'dot_small';
-
 /**
  * Props for a general Badge component. It can display a wide range of badges including simple labels, numbers, or dots.
  */
@@ -19,6 +14,9 @@ export type BadgeProps = {
    */
   style?: ViewStyle | ViewStyle[];
 
+  /**
+   * Optional. Custom background badge.
+   */
   backgroundColor?: string;
 };
 

package/Button/index.tsx

@@ -15,7 +15,6 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {getThemeConfig} from '../Application/utils';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -85,8 +84,8 @@ const Button: FC<ButtonProps> = ({
   onPress,
   ...rest
 }) => {
-  const {theme} = useContext(ApplicationContext);
-  const {gradient, color} = getThemeConfig()?.navigationBar?.buttonColors ?? {};
+  const {theme, config} = useContext(ApplicationContext);
+  const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
   if (gradient?.length > 0 && type == 'primary') {
     gradientPros = {

package/Button/styles.ts

@@ -42,6 +42,10 @@ export default StyleSheet.create({
     position: 'absolute',
     zIndex: -1,
     borderRadius: 8,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
   },
   strokeView: {
     position: 'absolute',

package/Consts/theme.ts

@@ -4,7 +4,7 @@ import {Colors} from './colors+spacing+radius';
 const defaultTheme: Theme = {
   dark: false,
   colors: {
-    primary: '#FF0073',
+    primary: Colors.pink_03,
     secondary: Colors.pink_07,
     background: {
       default: '#f2f2f6',
@@ -53,7 +53,7 @@ const defaultTheme: Theme = {
   font: 'SFProText',
   assets: {
     headerBackground:
-      'https://static.momocdn.net/app/img/kits/background/header/header_banner_tet_2024.png',
+      'https://static.momocdn.net/app/img/app/img/header-background.png',
   },
 };
 

package/Layout/ItemList.tsx

@@ -5,11 +5,6 @@ import {GridContext} from './index';
 import styles from './styles';
 
 export interface ItemListProps extends FlatListProps<any> {
-  /**
-   * Require key support number columns change grid system
-   */
-
-  key: string;
   /**
    * Represents the width of the Card component in terms of span numbers (1-12).
    */
@@ -17,7 +12,6 @@ export interface ItemListProps extends FlatListProps<any> {
 }
 
 const ItemList: FC<ItemListProps> = ({
-  key,
   renderItem,
   widthSpan,
   style,
@@ -42,7 +36,6 @@ const ItemList: FC<ItemListProps> = ({
   return (
     <FlatList
       {...props}
-      key={`${key ?? 'ItemList'}${numColumns}}`}
       numColumns={numColumns}
       renderItem={_renderItem}
       horizontal={false}

package/Layout/Screen.tsx

@@ -101,7 +101,7 @@ const Screen = forwardRef(
     ref,
   ) => {
     const animatedValue = useRef<Animated.Value | undefined>(undefined);
-    const {theme} = useContext(ApplicationContext);
+    const {theme, config} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const currentTint = useRef(Colors.black_01);
@@ -117,7 +117,8 @@ const Screen = forwardRef(
     }
 
     if (headerType == 'extended') {
-      headerBackground = theme.assets?.headerBackground;
+      headerBackground =
+        config?.navigationBar?.headerBar ?? theme.assets?.headerBackground;
     }
 
     useEffect(() => {

package/package.json

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