@momo-kits/foundation 0.92.3-tracking.9 → 0.92.4-beta.2

package/Application/BottomTab/index.tsx

@@ -4,6 +4,7 @@ import {createStackNavigator} from '@react-navigation/stack';
 import React, {useContext, useEffect} from 'react';
 import {Platform} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Colors} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {ApplicationContext} from '../index';
@@ -97,7 +98,8 @@ const BottomTab: React.FC<BottomTabProps> = ({
                     typography={
                       focused ? 'label_xs_medium' : 'description_xs_regular'
                     }
-                    color={color}>
+                    color={color}
+                    style={{width: '90%', textAlign: 'center'}}>
                     {item.label}
                   </Text>
                 );
@@ -113,6 +115,10 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 fontFamily: `${theme.font}-Bold`,
                 left: item?.showDot ? 8 : 4,
                 top: item?.showDot ? -2 : -6,
+                backgroundColor:
+                  typeof item?.badgeLabel === 'string'
+                    ? Colors.orange_03
+                    : Colors.red_03,
               },
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />

package/Application/StackScreen.tsx

@@ -117,9 +117,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
     <ScreenContext.Provider
       value={{
         screenName,
-        autoTracking: (data: any) => {
-          navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
-        },
         onElementLoad: () => {
           endTime.current = Date.now();
           interaction.current?.cancel?.();

package/Application/types.ts

@@ -196,7 +196,7 @@ export type BottomTabItemProps = {
   label: string;
   icon: string;
   showDot?: boolean;
-  badgeLabel?: string;
+  badgeLabel?: string | number;
   screen: Screen;
   options: NavigationOptions;
 };

package/Image/index.tsx

@@ -2,7 +2,7 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
-import {ApplicationContext, ComponentContext} from '../Application';
+import {ApplicationContext, ComponentContext, MiniAppContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
@@ -20,6 +20,7 @@ const Image: React.FC<ImageProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const app = useContext<any>(MiniAppContext);
   const component = useContext<any>(ComponentContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
@@ -29,8 +30,10 @@ const Image: React.FC<ImageProps> = ({
   };
 
   useEffect(() => {
-    component?.addChildren?.(test.accessibilityLabel, 'add');
-    return () => component?.addChildren(test.accessibilityLabel, 'remove');
+    if(app.enableAutoId){
+      component?.addChildren?.(test.accessibilityLabel, 'add');
+      return () => component?.addChildren(test.accessibilityLabel, 'remove');
+    }
   }, []);
 
   /**
@@ -54,45 +57,37 @@ const Image: React.FC<ImageProps> = ({
   };
 
   return (
-    <ComponentContext.Provider
-      value={{
-        componentName: 'Image',
-        params,
-        state: loading ? 'loading' : 'loaded',
-        componentId: test.accessibilityLabel,
-      }}>
       <FastImage
-        {...rest}
-        {...test}
-        source={source}
-        style={[styles.container, style]}
-        onProgress={() => {
-          error.current = false;
-          if (status !== 'loading' && loading) {
-            setStatus('loading');
-          }
-        }}
-        onLoadStart={() => {
-          error.current = false;
-        }}
-        onLoad={() => {
-          error.current = false;
-        }}
-        onLoadEnd={() => {
-          let current: Status = 'success';
-          if (error.current) {
-            current = 'error';
-          }
-          if (status !== current) {
-            setStatus(current);
-          }
-        }}
-        onError={() => {
-          error.current = true;
-        }}>
+          {...rest}
+          {...test}
+          source={source}
+          style={[styles.container, style]}
+          onProgress={() => {
+            error.current = false;
+            if (status !== 'loading' && loading) {
+              setStatus('loading');
+            }
+          }}
+          onLoadStart={() => {
+            error.current = false;
+          }}
+          onLoad={() => {
+            error.current = false;
+          }}
+          onLoadEnd={() => {
+            let current: Status = 'success';
+            if (error.current) {
+              current = 'error';
+            }
+            if (status !== current) {
+              setStatus(current);
+            }
+          }}
+          onError={() => {
+            error.current = true;
+          }}>
         {renderContent()}
       </FastImage>
-    </ComponentContext.Provider>
   );
 };
 

package/Input/InputOTP.tsx

@@ -70,7 +70,7 @@ const InputOTP = forwardRef(
       length,
       errorMessage,
       errorSpacing,
-      floatingValue,
+      floatingValue = 'Label',
       floatingIconColor,
       floatingIcon,
       placeholder,
@@ -196,7 +196,9 @@ const InputOTP = forwardRef(
                 styles.otpFloatingView,
                 {backgroundColor: theme.colors.background.surface},
               ]}>
-              <Text typography={'description_default_regular'}>
+              <Text
+                typography={'description_default_regular'}
+                color={theme.colors.text.hint}>
                 {floatingValue}
               </Text>
             </View>

package/Input/styles.ts

@@ -53,7 +53,7 @@ export default StyleSheet.create({
     marginRight: Spacing.M,
   },
   icon: {
-    marginLeft: Spacing.S
+    marginLeft: Spacing.S,
   },
   iconWrapper: {
     width: 24,
@@ -145,7 +145,7 @@ export default StyleSheet.create({
   },
   otpFloatingView: {
     position: 'absolute',
-    top: -Spacing.S,
+    top: scaleSize(-Spacing.M + 2),
     alignSelf: 'center',
     paddingHorizontal: Spacing.S,
   },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.3-tracking.9",
+    "version": "0.92.4-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,18 +10,18 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "git+https://gitlab.com/momo-platform/bottom-sheet.git#main",
+        "@gorhom/bottom-sheet": "2.4.1",
         "react-native-safe-area-context": "3.1.4",
         "react-native-linear-gradient": "2.8.3",
         "react-native-gesture-handler": "1.10.3",
         "react-native-modalize": "2.1.1",
         "react-native-fast-image": "8.1.5",
-        "@react-navigation/bottom-tabs": "git+https://gitlab.com/momo-platform/react-navigation-bottom-tabs.git#main",
+        "@react-navigation/bottom-tabs": "git+https://gitlab.mservice.com.vn/momo-platform/react-navigation-bottom-tabs.git",
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
         "lottie-react-native": "3.3.2",
-        "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main"
+        "@react-navigation/stack": "git+https://gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
     },
     "peerDependencies": {
         "react-native": "*"