@momo-kits/foundation 0.81.32 → 0.81.34-beta.1

package/Application/BottomTab.tsx

@@ -1,5 +1,5 @@
 import React, {useContext, useEffect} from 'react';
-import {View} from 'react-native';
+import {Platform} from 'react-native';
 import {BottomTabProps, NavigationScreenProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {createStackNavigator} from '@react-navigation/stack';
@@ -8,6 +8,7 @@ import {Text} from '../Text';
 import {ApplicationContext} from './index';
 import {getStackOptions} from './utils';
 import StackScreen from './StackScreen';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -31,6 +32,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
   initialRouteName,
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const insets = useSafeAreaInsets();
 
   useEffect(() => {
     navigation?.setOptions({
@@ -43,7 +45,16 @@ const BottomTab: React.FC<BottomTabProps> = ({
   return (
     <Tab.Navigator
       initialRouteName={initialRouteName}
-      backBehavior={'firstRoute'}>
+      backBehavior={'firstRoute'}
+      tabBarOptions={{
+        style: {
+          height: 68 + Math.min(insets.bottom, 21),
+        },
+        tabStyle: {
+          height: 68,
+          paddingVertical: 8,
+        },
+      }}>
       {tabs.map(item => {
         return (
           <Tab.Screen
@@ -55,14 +66,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 +79,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/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

@@ -1,10 +1,13 @@
 import React, {FC, useContext} from 'react';
 import {
+  Animated,
   StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
   View,
 } from 'react-native';
+
+import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
@@ -13,6 +16,8 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 
+const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
+
 export interface ButtonProps extends TouchableOpacityProps {
   /**
    * Defines the visual style of the button.
@@ -79,7 +84,16 @@ const Button: FC<ButtonProps> = ({
   onPress,
   ...rest
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const {theme, config} = useContext(ApplicationContext);
+  const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
+  let gradientPros;
+  if (gradient?.length > 0 && type == 'primary') {
+    gradientPros = {
+      colors: gradient,
+      start: {x: 1, y: 0.5},
+      end: {x: 0, y: 0.5},
+    };
+  }
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -103,7 +117,7 @@ const Button: FC<ButtonProps> = ({
         return {
           backgroundColor: theme.colors.background.surface,
           borderWidth: 1,
-          borderColor: theme.colors.primary,
+          borderColor: color ?? theme.colors.primary,
         };
       case 'tonal':
         return {
@@ -178,13 +192,13 @@ const Button: FC<ButtonProps> = ({
       case 'secondary':
         return theme.colors.text.default;
       case 'outline':
-        return theme.colors.primary;
+        return color ?? theme.colors.primary;
       case 'tonal':
         return theme.colors.primary;
       case 'danger':
         return Colors.black_01;
       case 'text':
-        return theme.colors.primary;
+        return color ?? theme.colors.primary;
       default:
         return Colors.black_01;
     }
@@ -286,6 +300,10 @@ const Button: FC<ButtonProps> = ({
       {renderLeading()}
       {renderTitle()}
       {renderTrailing()}
+      {gradientPros && (
+        <AnimationLinear {...gradientPros} style={styles.gradientView} />
+      )}
+      {gradientPros && <View style={styles.strokeView} />}
     </TouchableOpacity>
   );
 };

package/Button/styles.ts

@@ -38,4 +38,23 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  gradientView: {
+    position: 'absolute',
+    zIndex: -1,
+    borderRadius: 8,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  strokeView: {
+    position: 'absolute',
+    top: 2,
+    bottom: 2,
+    left: 2,
+    right: 2,
+    borderRadius: 6,
+    borderWidth: 0.5,
+    borderColor: '#FFF9E1',
+  },
 });

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.32",
+    "version": "0.81.34-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {