@momo-kits/foundation 0.89.1-rc.7 → 0.89.3

package/Application/BottomTab.tsx

@@ -104,7 +104,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 left: item?.showDot ? 8 : 4,
                 top: item?.showDot ? -2 : -6,
               },
-
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />
               ),

package/Application/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
@@ -6,13 +6,13 @@ import {
   NavigationContainerRef,
 } from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
-import {DeviceEventEmitter, NativeModules} from 'react-native';
+import {DeviceEventEmitter} 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 {ApplicationContext, MiniAppContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
 const Stack = createStackNavigator();
@@ -24,41 +24,25 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   maxApi,
   localization,
 }) => {
+  const context = useContext(MiniAppContext);
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
   const [showGrid, setShowGrid] = useState(false);
-  const [language, setLanguage] = useState<'vi' | 'en'>('vi');
-  const [config, setConfig] = useState<any>(undefined);
-  let assets = theme.assets;
-  if (config && theme.assets?.headerBackground) {
-    assets = {...assets, headerBackground: config.navigationBar?.headerBar};
-  }
+  const config = useRef<any>();
 
   /**
    * handle mini language & listen change
    * engine only shake to enable grid view
    */
   useEffect(() => {
-    maxApi?.getLanguage?.((lang: 'vi' | 'en') => {
-      setLanguage(lang);
-    });
-    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?.();
     };
   }, []);
@@ -73,6 +57,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
    * @param key
    */
   const translate = (key: string) => {
+    const language: 'vi' | 'en' = context?.language ?? 'vi';
     const mergedLocalization: LocalizationObject = {
       vi: {...localization?.vi, ...kitLocalization.vi},
       en: {...localization?.en, ...kitLocalization.en},
@@ -85,14 +70,10 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
       <BottomSheetModalProvider>
         <ApplicationContext.Provider
           value={{
-            theme: {
-              ...theme,
-              assets: assets,
-            },
             navigator: navigator.current,
+            config: config.current,
+            theme,
             showGrid,
-            language,
-            config,
             translate,
           }}>
           <ReactNavigationContainer

package/Application/types.ts

@@ -67,7 +67,6 @@ export type Context = {
   theme: Theme;
   navigator?: Navigator;
   showGrid?: boolean;
-  language?: 'vi' | 'en';
   translate?: (key: string) => string;
 };
 

package/Icon/index.tsx

@@ -18,12 +18,16 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
     return {uri: source};
   };
 
+  const tintColorProps = color !== null && {
+    tintColor: color ?? theme.colors.text.default
+  }
+
   return (
     <Image
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
-      tintColor={color ?? theme.colors.text.default}
+      {...tintColorProps}
     />
   );
 };

package/Icon/types.ts

@@ -17,7 +17,7 @@ export type IconProps = {
    *  Optional. Represents the color of the icon.
    * It can be any valid color in @momo-kits/foundation.
    */
-  color?: string;
+  color?: string | null;
 
   /**
    *  Optional. Used to apply custom styling to the Icon component.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.89.1-rc.7",
+    "version": "0.89.3",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -43,4 +43,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}