@momo-kits/foundation 0.103.4 → 0.103.6

package/Application/BottomTab/index.tsx

@@ -94,6 +94,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
           height: 68,
           paddingVertical: 10,
         },
+        inactiveTintColor: theme.colors.text.secondary,
       }}>
       {tabs.map(item => {
         const isNum = !isNaN(parseInt(`${item?.badgeLabel}`));

package/Application/Localize.ts

@@ -4,7 +4,7 @@ import defaultLanguage from '../Assets/language.json';
 
 class Localize {
   private assets: LocalizationObject;
-  private currentLanguage: 'en' | 'vi';
+  private readonly currentLanguage: 'en' | 'vi';
 
   constructor(assets: LocalizationObject) {
     this.assets = {

package/Application/StackScreen.tsx

@@ -1,12 +1,10 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {useHeaderHeight} from '@react-navigation/stack';
-import {Alert, InteractionManager, Linking, View} from 'react-native';
+import {InteractionManager} from 'react-native';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
-import {Text} from '../Text';
-import {Colors, Radius, Spacing} from '../Consts';
 
 /**
  * container for stack screen
@@ -68,10 +66,12 @@ const StackScreen: React.FC<ScreenParams> = props => {
    * tracking for screen
    */
   useEffect(() => {
-    if (['Invalid', 'screen'].includes(screenName) && context.enableAutoId) {
-      setTimeout(() => {
-        navigator?.showModal({screen: EmptyScreen});
-      }, 300);
+    if (['Invalid', 'screen'].includes(screenName)) {
+      navigator?.maxApi.showPopup('notice', {
+        title: 'Invalid screen name',
+        message:
+          'Your screen has not been rendered because Platform has not detected the screen name. Please migrate to support this feature.',
+      });
     }
 
     const subscription = props.navigation?.addListener?.('focus', () => {
@@ -114,23 +114,21 @@ const StackScreen: React.FC<ScreenParams> = props => {
    */
   const onScreenLoad = () => {
     if (!tracking.current?.releaseLoad) {
-      if (tracking.current.timeLoad === 0) {
-        tracking.current.timeLoad =
-          tracking.current.endTime - tracking.current.startTime;
+      let timeLoad = tracking.current.timeLoad;
+      if (timeLoad === 0) {
+        timeLoad = tracking.current.endTime - tracking.current.startTime;
       }
 
       context.autoTracking?.({
-        appId: context.appId,
-        code: context.code,
-        buildNumber: context.buildNumber,
+        ...context,
         screenName,
         componentName: 'Screen',
         state: 'load',
-        duration: tracking.current.timeLoad,
+        duration: timeLoad,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdLoad,
-        {value: tracking.current.timeLoad / 1000},
+        {value: timeLoad / 1000},
         null
       );
       tracking.current.releaseLoad = true;
@@ -140,12 +138,9 @@ const StackScreen: React.FC<ScreenParams> = props => {
        */
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
-        message: `${screenName} screen_load_time ${tracking.current.timeLoad}`,
+        message: `${screenName} screen_load_time ${timeLoad}`,
         type: 'ERROR',
       });
-      if (tracking.current.timeLoad <= 0 && context.enableAutoId) {
-        Alert.alert(screenName, "Can't get screen load time");
-      }
     }
   };
 
@@ -154,22 +149,20 @@ const StackScreen: React.FC<ScreenParams> = props => {
    */
   const onScreenInteraction = () => {
     if (!tracking.current?.releaseInteraction) {
-      if (tracking.current.timeLoad === 0) {
-        tracking.current.timeLoad =
-          tracking.current.endTime - tracking.current.startTime;
+      let timeLoad = tracking.current.timeLoad;
+      if (timeLoad === 0) {
+        timeLoad = tracking.current.endTime - tracking.current.startTime;
       }
       if (tracking.current.timeInteraction === 0) {
-        tracking.current.timeInteraction = tracking.current.timeLoad;
+        tracking.current.timeInteraction = timeLoad;
       }
 
       context.autoTracking?.({
-        appId: context.appId,
-        code: context.code,
-        buildNumber: context.buildNumber,
+        ...context,
         screenName,
         componentName: 'Screen',
         state: 'interaction',
-        duration: tracking.current.timeInteraction - tracking.current.timeLoad,
+        duration: tracking.current.timeInteraction - timeLoad,
         totalDuration: tracking.current.timeInteraction,
       });
       navigator?.maxApi?.stopTrace?.(
@@ -187,9 +180,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
         message: `${screenName} screen_interaction_time ${tracking.current.timeInteraction}`,
         type: 'ERROR',
       });
-      if (tracking.current.timeInteraction <= 0 && context.enableAutoId) {
-        Alert.alert(screenName, "Can't get screen interaction time");
-      }
     }
   };
 
@@ -198,9 +188,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
    */
   const onScreenNavigated = (preScreenName: string) => {
     context.autoTracking?.({
-      appId: context.appId,
-      code: context.code,
-      buildNumber: context.buildNumber,
+      ...context,
       preScreenName,
       screenName,
       componentName: 'Screen',
@@ -231,98 +219,19 @@ const StackScreen: React.FC<ScreenParams> = props => {
                 Date.now() - tracking.current.startTime;
             });
           tracking.current.timeoutLoad = setTimeout(() => {
+            const time = tracking.current.endTime - tracking.current.startTime;
             if (tracking.current.timeLoad === 0) {
-              tracking.current.timeLoad =
-                tracking.current.endTime - tracking.current.startTime;
+              tracking.current.timeLoad = time;
             }
             onScreenLoad();
             onScreenInteraction();
           }, 2000);
         },
       }}>
-      <Component
-        heightHeader={heightHeader}
-        {...data}
-        onScreenLoad={onScreenLoad}
-        onScreenInteraction={onScreenInteraction}
-      />
+      <Component heightHeader={heightHeader} {...data} />
       {showGrid && <GridSystem />}
     </ScreenContext.Provider>
   );
 };
 
-/**
- * Empty screen for unvalidated screen name
- * @constructor
- */
-const EmptyScreen: React.FC = () => {
-  return (
-    <View
-      style={{
-        backgroundColor: Colors.black_01,
-        padding: Spacing.M,
-        borderRadius: Radius.M,
-      }}>
-      <Text typography={'header_m_bold'}>Unvalidated screen name</Text>
-      <Text
-        typography={'description_default_regular'}
-        style={{paddingVertical: Spacing.S}}>
-        Your screen has not been rendered because Platform has not detected the
-        screen name. Please migrate to support this feature.
-      </Text>
-      <Text typography={'header_default'} style={{width: '100%'}}>
-        Possible fixes:
-      </Text>
-      <View style={{marginLeft: Spacing.S}}>
-        <Text typography={'body_default_regular'}>1. Off webpack config</Text>
-        <Text typography={'body_default_regular'}>
-          2. Screen name refactoring
-        </Text>
-        <View style={{marginLeft: Spacing.S}}>
-          <Text
-            typography={'description_default_regular'}
-            style={{marginBottom: Spacing.S}}>
-            - Với các screen push/import dạng arrow function ={'>'} đổi thành
-            named function
-          </Text>
-          <Text
-            typography={'description_default_regular'}
-            style={{marginBottom: Spacing.S}}>
-            - Với các screen import dạng High Order Component ={'>'} rename
-            generic function thành named function
-          </Text>
-          <Text
-            typography={'description_default_regular'}
-            style={{marginBottom: Spacing.S}}>
-            - Với Tab Navigator, Platform sẽ lấy Tab Container làm screen name.
-            Trong trường hợp miniapp muốn track riêng action cho từng tab, tham
-            khảo theo docs
-          </Text>
-        </View>
-      </View>
-      <Text typography={'header_s_semibold'}>More information: </Text>
-      <Text
-        typography={'body_default_regular'}
-        color={Colors.blue_01}
-        onPress={() => {
-          Linking.openURL(
-            'https://gitlab.mservice.com.vn/momo-platform/mini-app/-/tree/vn.momo.uikits/dev/app'
-          );
-        }}>
-        Mini App: vn.momo.uikits/dev
-      </Text>
-      <Text
-        typography={'body_default_regular'}
-        color={Colors.blue_01}
-        onPress={() => {
-          Linking.openURL(
-            'https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing'
-          );
-        }}>
-        https://docs.google.com/presentation/d/1bIFoh8gRXb6hsnGJz4O1Kxg4_oNikB1KuuEt2wULCDM/edit?usp=sharing
-      </Text>
-    </View>
-  );
-};
-
 export default StackScreen;

package/Input/InputOTP.tsx

@@ -12,7 +12,6 @@ import {
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
-  TouchableOpacity,
   View,
 } from 'react-native';
 import {ApplicationContext, ComponentContext} from '../Application';
@@ -94,17 +93,14 @@ const InputOTP = forwardRef(
       onChangeText: (text: string) => {
         _onChangeText(text);
       },
-      focus: () => {
-        setFocused(true);
-        inputRef.current?.focus()
-      },
+      focus: () => inputRef.current?.focus(),
       blur: () => inputRef.current?.blur(),
       setText: (text: string) => _onChangeText(text),
     }));
 
-    const onFocusInput = () => {
+    const onFocusInput = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
-      inputRef.current?.focus();
+      onFocus?.(e);
     };
 
     const onBlurInput = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -211,7 +207,7 @@ const InputOTP = forwardRef(
           <View style={styles.otpInputsView}>
             {length ? renderInputs(length) : renderUnidentifiedInputs()}
           </View>
-          <View style={styles.inputView}>
+          <View style={styles.otpRealInputWrapper}>
             <TextInput
               {...props}
               accessibilityLabel={accessibilityLabel}
@@ -219,9 +215,9 @@ const InputOTP = forwardRef(
               value={value}
               onChangeText={_onChangeText}
               keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
-              onFocus={onFocus}
+              onFocus={onFocusInput}
               onBlur={onBlurInput}
-              style={{opacity: 0}}
+              style={styles.otpRealInput}
               selectionColor={theme.colors.primary}
               placeholderTextColor={theme.colors.text.hint}
             />
@@ -239,17 +235,14 @@ const InputOTP = forwardRef(
           state: 'enabled',
           componentId: accessibilityLabel,
         }}>
-        <TouchableOpacity
-          activeOpacity={1}
-          onPress={onFocusInput}
-          style={[style, styles.otpWrapper]}>
+        <View style={[style, styles.otpWrapper]}>
           {renderInputView()}
           <ErrorView
             errorMessage={errorMessage}
             errorSpacing={errorSpacing}
             hintText={hintText}
           />
-        </TouchableOpacity>
+        </View>
       </ComponentContext.Provider>
     );
   }

package/Input/styles.ts

@@ -164,6 +164,22 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  otpRealInputWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    opacity: 0.01,
+    backgroundColor: 'transparent',
+  },
+  otpRealInput: {
+    opacity: 0.01,
+    width: '100%',
+    height: '100%',
+    zIndex: 1,
+  },
 
   //DropDown
   inputDropDownWrapper: {

package/Layout/Screen.tsx

@@ -143,9 +143,10 @@ const Screen = forwardRef(
 
     let handleScroll;
     let Component: any = View;
-    let keyboardOffset = heightHeader - 20;
+
+    let keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
-      keyboardOffset = -20;
+      keyboardOffset = -Math.min(insets.bottom, 21);
     }
 
     useEffect(() => {

package/Popup/PopupNotify.tsx

@@ -40,8 +40,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      appId: context.appId,
-      code: context.code,
+      ...context,
       screen_name,
       component_type: 'popup',
       component_name: id,

package/Popup/PopupPromotion.tsx

@@ -26,8 +26,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      appId: context.appId,
-      code: context.code,
+      ...context,
       screen_name,
       component_type: 'popup',
       component_name: id,

package/Title/index.tsx

@@ -115,7 +115,8 @@ const Title: FC<TitleProps> = ({
     return (
       <TouchableOpacity
         onPress={onPressTrailingAction}
-        style={styles.iconLeftView}>
+        style={styles.iconLeftView}
+        hitSlop={{top: 10, bottom: 10, left: 50, right: 10}}>
         {showTrailingAction && !showRightAction && (
           <View
             style={[

package/package.json

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