@momo-kits/foundation 0.150.2-test.1 → 0.151.1-beta.1

package/Application/BottomSheet.tsx

@@ -1,22 +1,11 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import {
   Dimensions,
-  Keyboard,
   KeyboardAvoidingView,
-  KeyboardEventName,
-  LayoutAnimation,
   Modal,
   PanResponder,
   Platform,
   Pressable,
-  ScrollView,
   StyleSheet,
   TouchableOpacity,
   View,
@@ -31,12 +20,12 @@ import { useHeaderHeight } from '@react-navigation/elements';
 import Animated, {
   Easing,
   Extrapolate,
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  withSpring,
   interpolate,
   runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
 } from 'react-native-reanimated';
 import layoutStyles from '../Layout/styles';
 
@@ -46,8 +35,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
-  const [contentHeight, setContentHeight] = useState(0);
   const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
 
   const {
@@ -59,7 +46,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     draggable = true,
     useBottomInset = true,
     useKeyboardAvoidingView = true,
-    useScrollOverflow = false,
     keyboardVerticalOffset,
     useDivider = true,
     footerComponent,
@@ -116,73 +102,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   ).current;
 
   let Container: any = View;
-  let Content: any = View;
   if (useNativeModal) {
     Container = Modal;
   }
-  if (useScrollOverflow) {
-    Content = ScrollView;
-  }
   let backgroundColor = theme.colors.background.default;
   if (surface) {
     backgroundColor = theme.colors.background.surface;
   }
 
-  const headerHeight = 90;
-
-  /**
-   * If the content height exceeds the device height,
-   * adjust bottomInset based on keyboard behavior so the BottomSheet content stays fixed
-   * whether the keyboard is open or closed.
-   */
-
-  let bottomInset: number;
-  if (keyboardHeight > 0) {
-    bottomInset =
-      Platform.select({
-        ios: 0,
-        android: 21,
-      }) ?? 0;
-  } else {
-    bottomInset =
-      Platform.select({
-        ios: Math.min(insets.bottom, 21),
-        android: -21,
-      }) ?? 0;
-  }
-
-  const maxContentSize =
-    heightDevice - headerHeight - keyboardHeight - bottomInset;
-
-  useEffect(() => {
-    let showEvent: KeyboardEventName;
-    let hideEvent: KeyboardEventName;
-
-    if (Platform.OS === 'ios') {
-      showEvent = 'keyboardWillShow';
-      hideEvent = 'keyboardWillHide';
-    } else {
-      showEvent = 'keyboardDidShow';
-      hideEvent = 'keyboardDidHide';
-    }
-    const onKeyboardShow = (e: any) => {
-      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-      setKeyboardHeight(e.endCoordinates.height);
-    };
-    const onKeyboardHide = () => {
-      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-      setKeyboardHeight(0);
-    };
-
-    const showSub = Keyboard.addListener(showEvent, onKeyboardShow);
-    const hideSub = Keyboard.addListener(hideEvent, onKeyboardHide);
-
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, []);
-
   /**
    * emit dismiss event
    */
@@ -194,17 +121,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   }, [heightDevice, openAnimation, props.route.params, translateY]);
 
-  /**
-   * handle content bottom sheet change
-   * @param width
-   * @param height
-   */
-  const handleContentSizeChange = (width: number, height: number) => {
-    if (contentHeight !== height) {
-      setContentHeight(height);
-    }
-  };
-
   /**
    * handler dismiss
    */
@@ -214,8 +130,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         return;
       }
       closeAnimation(() => {
+        navigator?.pop();
         runOnJS(() => {
-          navigator?.pop();
           callback?.();
         })();
       });
@@ -238,14 +154,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
    */
   const renderHeader = useCallback(() => {
     return (
-      <View
-        style={{
-          backgroundColor,
-          borderTopLeftRadius: Radius.M,
-          borderTopRightRadius: Radius.M,
-        }}
-        {...panResponder.panHandlers}
-      >
+      <View {...panResponder.panHandlers}>
         <View style={{ height: 16 }}>
           <View style={styles.indicator} />
         </View>
@@ -285,7 +194,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       </View>
     );
   }, [
-    backgroundColor,
     onDismiss,
     options.header,
     options.title,
@@ -297,7 +205,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ translateY: translateY.value }],
-      maxHeight: maxContentSize,
     };
   });
 
@@ -341,19 +248,23 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           <Animated.View style={[styles.overlay, animatedOverlayStyle]} />
         </Pressable>
 
-        <Animated.View style={animatedStyle}>
+        <Animated.View
+          style={[
+            animatedStyle,
+            {
+              backgroundColor,
+              borderTopLeftRadius: Radius.M,
+              borderTopRightRadius: Radius.M,
+              overflow: 'hidden',
+            },
+          ]}
+        >
           {renderHeader()}
-          <Content
-            scrollEnabled={contentHeight + 20 > maxContentSize}
-            style={{ backgroundColor: backgroundColor }}
-            onContentSizeChange={handleContentSizeChange}
-          >
-            <Screen
-              {...props}
-              {...props.route.params}
-              onRequestClose={onRequestClose}
-            />
-          </Content>
+          <Screen
+            {...props}
+            {...props.route.params}
+            onRequestClose={onRequestClose}
+          />
           {footerComponent && (
             <View
               style={[

package/Application/BottomTab/index.tsx

@@ -37,7 +37,6 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { nested, options, screen, initialParams } = route?.params;
-  const useAnimation = route?.params?.useAnimation ?? true;
   const insets = useSafeAreaInsets();
 
   const opacityValue = 0.3;
@@ -47,10 +46,10 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const screenName = screen?.name || screen?.type?.name || 'Invalid';
 
   const onScreenNavigated = useCallback(
-    (preScreenName: string, screenName: string) => {
+    (pre: string, current: string) => {
       const data: any = {
-        preScreenName,
-        screenName,
+        preScreenName: pre,
+        screenName: current,
         componentName: 'Screen',
         state: 'navigated',
         action: 'push',
@@ -70,79 +69,82 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
         type: 'ERROR',
       });
     },
-    [context, navigator?.maxApi],
+    [context, navigator?.maxApi, screenName],
   );
 
   useFocusEffect(
-    React.useCallback(() => {
-      Animated.parallel([
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-        Animated.timing(scale, {
-          toValue: 1,
-          duration: 200,
-          useNativeDriver: true,
-        }),
-      ]).start();
+    React.useCallback(
+      () => {
+        Animated.parallel([
+          Animated.timing(opacity, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+          Animated.timing(scale, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+        ]).start();
 
-      setTimeout(() => {
-        navigator?.maxApi?.getDataObserver?.('current_screen', (data: any) => {
-          onScreenNavigated(data?.screenName, screenName);
-          navigator?.maxApi?.setObserver?.('current_screen', { screenName });
-        });
-      }, 100);
+        setTimeout(() => {
+          navigator?.maxApi?.getDataObserver?.(
+            'current_screen',
+            (data: any) => {
+              onScreenNavigated(data?.screenName, screenName);
+              navigator?.maxApi?.setObserver?.('current_screen', {
+                screenName,
+              });
+            },
+          );
+        }, 100);
 
-      return () => {
-        if (navigation.getState().index !== route?.params.index) {
-          Animated.parallel([
-            Animated.timing(opacity, {
-              toValue: opacityValue,
-              duration: 200,
-              useNativeDriver: true,
-            }),
-            Animated.timing(scale, {
-              toValue: scaleValue,
-              duration: 200,
-              useNativeDriver: true,
-            }),
-          ]).start();
-        }
-      };
-    }, [
-      navigation,
-      navigator?.maxApi,
-      onScreenNavigated,
-      opacity,
-      route?.params.index,
-      scale,
-      screenName,
-    ]),
+        return () => {
+          if (navigation.getState().index !== route?.params.index) {
+            Animated.parallel([
+              Animated.timing(opacity, {
+                toValue: opacityValue,
+                duration: 200,
+                useNativeDriver: true,
+              }),
+              Animated.timing(scale, {
+                toValue: scaleValue,
+                duration: 200,
+                useNativeDriver: true,
+              }),
+            ]).start();
+          }
+        };
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [],
+    ),
   );
 
-  useEffect(() => {
-    const onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
-      if (navigation.isFocused()) {
-        navigator?.maxApi?.getDataObserver?.('current_screen', (data: any) => {
-          onScreenNavigated(data?.screenName, screenName);
-          navigator?.maxApi?.setObserver?.('current_screen', { screenName });
-        });
-      }
-    });
-
-    return () => {
-      onFocusApp?.remove?.();
-    };
-  }, [navigation, navigator?.maxApi, onScreenNavigated, screenName]);
+  useEffect(
+    () => {
+      const onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
+        if (navigation.isFocused()) {
+          navigator?.maxApi?.getDataObserver?.(
+            'current_screen',
+            (data: any) => {
+              onScreenNavigated(data?.screenName, screenName);
+              navigator?.maxApi?.setObserver?.('current_screen', {
+                screenName,
+              });
+            },
+          );
+        }
+      });
 
-  let opacityStyle: undefined | Animated.Value;
-  let scaleStyle: number | Animated.Value = 1;
-  if (useAnimation) {
-    opacityStyle = opacity;
-    scaleStyle = scale;
-  }
+      return () => {
+        onFocusApp?.remove?.();
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
   let stackOptions = {};
   if (options) {
@@ -155,8 +157,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
         style={[
           styles.container,
           {
-            opacity: opacityStyle,
-            transform: [{ scale: scaleStyle }],
+            opacity,
+            transform: [{ scale }],
           },
         ]}
       >
@@ -188,8 +190,8 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
       style={[
         styles.container,
         {
-          opacity: opacityStyle,
-          transform: [{ scale: scaleStyle }],
+          opacity,
+          transform: [{ scale }],
         },
       ]}
     >
@@ -227,7 +229,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
   navigation,
   initialRouteName,
   floatingButton,
-  useAnimation = true,
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
   const dimensions = useWindowDimensions();
@@ -340,7 +341,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             key={`BottomTab-${item.name}`}
             name={item.name}
             component={TabScreen}
-            initialParams={{ ...item, nested, index, useAnimation }}
+            initialParams={{ ...item, nested, index }}
             listeners={handler}
             options={{
               tabBarLabel: ({ focused, color }) => {

package/Application/Components/HeaderLeft.tsx

@@ -86,7 +86,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const styles = StyleSheet.create({
   headerLeft: {
-    marginLeft: 12,
+    marginLeft: 8,
   },
 });
 

package/Application/ModalScreen.tsx

@@ -10,7 +10,7 @@ import {
   Modal as ModalRN,
 } from 'react-native';
 
-import { ApplicationContext } from './index';
+import { ApplicationContext, MiniAppContext } from './index';
 import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
@@ -18,6 +18,18 @@ import BottomSheet from './BottomSheet';
 import { runOnJS } from 'react-native-reanimated';
 
 const ModalScreen: React.FC<any> = props => {
+  const context: any = useContext(MiniAppContext);
+  const { navigator } = useContext(ApplicationContext);
+
+  useEffect(
+    () => {
+      if (context?.enableHapticDialog) {
+        navigator?.maxApi?.triggerEventVibration?.('light');
+      }
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
   if (props.route?.params?.isBottomSheet) {
     return <BottomSheet {...props} />;
   }

package/Application/NavigationContainer.tsx

@@ -37,6 +37,12 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   maxApi,
   initialParams,
   localize = new Localize({ vi: {}, en: {} }),
+  features = {
+    enableBottomTabAnimation: true,
+    enableHapticDialog: true,
+    enableForceFoundationList: false,
+    enableHapticBottomTab: true,
+  },
 }) => {
   const context = useContext<any>(MiniAppContext);
   const [currentContext, setCurrentContext] = useState({});
@@ -46,6 +52,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         value={{
           ...context,
           ...currentContext,
+          features,
         }}
       >
         <Navigation

package/Application/StackScreen.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import { Alert, InteractionManager } from 'react-native';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { ScreenTrackingParams } from './types';
@@ -75,39 +69,106 @@ const StackScreen: React.FC<any> = props => {
     }
   }, [navigation, options]);
 
-  const onScreenNavigated = useCallback(
-    (preScreenName: string, screenName: string) => {
-      const data: any = {
-        preScreenName,
-        screenName,
-        componentName: 'Screen',
-        state: 'navigated',
-        action: tracking.current?.mounted ? 'back' : 'push',
-      };
+  /**
+   * tracking for screen
+   */
+  useEffect(() => {
+    let focusScreen: any;
+    let onFocusApp: any;
+    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.',
+      });
+    }
 
-      context?.autoTracking?.({
-        ...context,
-        ...data,
+    if (!bottomTab) {
+      focusScreen = props.navigation.addListener('focus', () => {
+        navigator?.maxApi?.getDataObserver?.('current_screen', (item: any) => {
+          onScreenNavigated(item?.screenName, screenName);
+          navigator?.maxApi?.setObserver?.('current_screen', { screenName });
+        });
       });
+      onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
+        if (props.navigation.isFocused()) {
+          navigator?.maxApi?.getDataObserver?.(
+            'current_screen',
+            (item: any) => {
+              onScreenNavigated(item?.screenName, screenName);
+              navigator?.maxApi?.setObserver?.('current_screen', {
+                screenName,
+              });
+            },
+          );
+        }
+      });
+    }
+
+    navigator?.maxApi?.startTraceScreenLoad?.(
+      screenName,
+      context,
+      (item: any) => {
+        tracking.current.traceIdLoad = item?.traceId;
+      },
+    );
+    navigator?.maxApi?.startTraceScreenInteraction?.(
+      screenName,
+      context,
+      (item: any) => {
+        tracking.current.traceIdInteraction = item?.traceId;
+      },
+    );
 
-      tracking.current.mounted = true;
+    tracking.current.timeoutTracking = setTimeout(() => {
+      onScreenLoad();
+      onScreenInteraction();
+    }, 5000);
 
-      /**
-       * debug toast
-       */
-      navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
-        message: `${screenName} screen_navigated`,
-        type: 'ERROR',
-      });
-    },
-    [context, navigator?.maxApi],
-  );
+    return () => {
+      onScreenLoad();
+      onScreenInteraction();
+      clearTimeout(tracking.current.timeoutLoad);
+      clearTimeout(tracking.current.timeoutInteraction);
+      clearTimeout(tracking.current.timeoutTracking);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      clearTimeout(tracking.current.timeoutLoading);
+      focusScreen?.();
+      onFocusApp?.remove?.();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onScreenNavigated = (pre: string, current: string) => {
+    const item: any = {
+      preScreenName: pre,
+      screenName: current,
+      componentName: 'Screen',
+      state: 'navigated',
+      action: tracking.current?.mounted ? 'back' : 'push',
+    };
+
+    context?.autoTracking?.({
+      ...context,
+      ...item,
+    });
+
+    tracking.current.mounted = true;
+
+    /**
+     * debug toast
+     */
+    navigator?.maxApi?.showToastDebug?.({
+      appId: context.appId,
+      message: `${screenName} screen_navigated`,
+      type: 'ERROR',
+    });
+  };
 
   /**
    * tracking for screen load
    */
-  const onScreenLoad = useCallback(() => {
+  const onScreenLoad = () => {
     if (!tracking.current?.releaseLoad) {
       let timeLoad = tracking.current.timeLoad;
       if (timeLoad === 0) {
@@ -150,12 +211,12 @@ const StackScreen: React.FC<any> = props => {
         );
       }
     }
-  }, [context, navigator?.maxApi, screenName]);
+  };
 
   /**
    * tracking for screen load
    */
-  const onScreenInteraction = useCallback(() => {
+  const onScreenInteraction = () => {
     if (!tracking.current?.releaseInteraction) {
       let timeLoad = tracking.current.timeLoad;
       if (timeLoad === 0) {
@@ -191,130 +252,7 @@ const StackScreen: React.FC<any> = props => {
         type: 'ERROR',
       });
     }
-  }, [context, navigator?.maxApi, screenName]);
-
-  /**
-   * tracking for screen
-   */
-  useEffect(() => {
-    let focusScreen: any;
-    let onFocusApp: any;
-    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.',
-      });
-    }
-
-    if (!bottomTab) {
-      focusScreen = props.navigation.addListener('focus', () => {
-        navigator?.maxApi?.getDataObserver?.('current_screen', (data: any) => {
-          onScreenNavigated(data?.screenName, screenName);
-          navigator?.maxApi?.setObserver?.('current_screen', { screenName });
-        });
-      });
-      onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
-        if (props.navigation.isFocused()) {
-          navigator?.maxApi?.getDataObserver?.(
-            'current_screen',
-            (data: any) => {
-              onScreenNavigated(data?.screenName, screenName);
-              navigator?.maxApi?.setObserver?.('current_screen', {
-                screenName,
-              });
-            },
-          );
-        }
-      });
-    }
-
-    navigator?.maxApi?.startTraceScreenLoad?.(
-      screenName,
-      context,
-      (data: any) => {
-        tracking.current.traceIdLoad = data?.traceId;
-      },
-    );
-    navigator?.maxApi?.startTraceScreenInteraction?.(
-      screenName,
-      context,
-      (data: any) => {
-        tracking.current.traceIdInteraction = data?.traceId;
-      },
-    );
-
-    tracking.current.timeoutTracking = setTimeout(() => {
-      onScreenLoad();
-      onScreenInteraction();
-    }, 5000);
-
-    return () => {
-      onScreenLoad();
-      onScreenInteraction();
-      clearTimeout(tracking.current.timeoutLoad);
-      clearTimeout(tracking.current.timeoutInteraction);
-      clearTimeout(tracking.current.timeoutTracking);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      clearTimeout(tracking.current.timeoutLoading);
-      focusScreen?.();
-      onFocusApp?.remove?.();
-    };
-  }, [
-    bottomTab,
-    context,
-    navigator?.maxApi,
-    onScreenInteraction,
-    onScreenLoad,
-    onScreenNavigated,
-    props.navigation,
-    screenName,
-  ]);
-
-  /**
-   * tracking for screen
-   */
-  useEffect(() => {
-    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.',
-      });
-    }
-
-    navigator?.maxApi?.startTraceScreenLoad?.(
-      screenName,
-      context,
-      (item: any) => {
-        tracking.current.traceIdLoad = item?.traceId;
-      },
-    );
-    navigator?.maxApi?.startTraceScreenInteraction?.(
-      screenName,
-      context,
-      (item: any) => {
-        tracking.current.traceIdInteraction = item?.traceId;
-      },
-    );
-
-    tracking.current.timeoutTracking = setTimeout(() => {
-      onScreenLoad();
-      onScreenInteraction();
-    }, 5000);
-
-    return () => {
-      onScreenLoad();
-      onScreenInteraction();
-    };
-  }, [
-    context,
-    navigator?.maxApi,
-    onScreenInteraction,
-    onScreenLoad,
-    props.navigation,
-    screenName,
-  ]);
+  };
 
   /**
    * tracking for first interaction by user
@@ -343,16 +281,19 @@ const StackScreen: React.FC<any> = props => {
     }
   };
 
+  /**
+   * tracking for loading screen
+   */
   const onScreenLoading = () => {
-    if (!tracking.current?.releaseLoading) {
-      const timeLoad =
-        tracking.current.timeEndLoading - tracking.current.timeStartLoading;
+    const start = tracking.current.timeStartLoading;
+    const end = tracking.current.timeEndLoading;
+    if (!tracking.current?.releaseLoading && start && end && end > start) {
       context?.autoTracking?.({
         ...context,
         screenName,
         componentName: 'Screen',
         state: 'loading',
-        duration: timeLoad,
+        duration: end - start,
         loadingType: 'skeleton',
       });
       tracking.current.releaseLoading = true;
@@ -369,7 +310,7 @@ const StackScreen: React.FC<any> = props => {
            */
           if (item?.componentName === 'Widget') {
             const index = widgets.current.findIndex(
-              (e: any) => e.componentId === item.componentId,
+              (element: any) => element.componentId === item.componentId,
             );
             const time = Date.now() - tracking.current.startTime;
             if (index === -1) {
@@ -404,8 +345,8 @@ const StackScreen: React.FC<any> = props => {
           /**
            * support for debug last element
            */
-          if (data?.componentName) {
-            tracking.current.lastElement = data;
+          if (item?.componentName) {
+            tracking.current.lastElement = item;
           }
 
           /**
@@ -414,7 +355,7 @@ const StackScreen: React.FC<any> = props => {
           if (item?.interaction) {
             onScreenLoad();
             onScreenInteraction();
-            onFirstInteraction(data?.action);
+            onFirstInteraction(item?.action);
           }
           /**
            * timeout for handle tracking screen
@@ -439,7 +380,6 @@ const StackScreen: React.FC<any> = props => {
           /**
            * tracking for loading screen
            */
-          clearTimeout(tracking.current.timeoutLoading);
           if (!loading) {
             tracking.current.timeEndLoading = Date.now();
           }
@@ -447,12 +387,13 @@ const StackScreen: React.FC<any> = props => {
           /**
            * timeout for handle tracking screen
            */
+          clearTimeout(tracking.current.timeoutLoading);
           tracking.current.timeoutLoading = setTimeout(() => {
             onScreenLoading();
           }, 2000);
         },
-        onSetParams: (data: ScreenTrackingParams) => {
-          tracking.current.params = data;
+        onSetParams: (item: ScreenTrackingParams) => {
+          tracking.current.params = item;
         },
       }}
     >

package/Application/types.ts

@@ -1,17 +1,17 @@
-import {EventArg} from '@react-navigation/core';
-import {StackNavigationOptions} from '@react-navigation/stack';
-import React, {ReactNode} from 'react';
+import { EventArg } from '@react-navigation/core';
+import { StackNavigationOptions } from '@react-navigation/stack';
+import React, { ReactNode } from 'react';
 import {
   Animated,
   TouchableOpacityProps,
   ViewProps,
   ViewStyle,
 } from 'react-native';
-import {PopupNotifyProps} from '../Popup/types';
+import { PopupNotifyProps } from '../Popup/types';
 import Localize from './Localize';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
-import {InputRef, InputSearchProps} from '../Input';
+import { InputRef, InputSearchProps } from '../Input';
 
 export type Theme = {
   dark: boolean;
@@ -74,7 +74,7 @@ export type Context = {
   theme: Theme;
   navigator?: Navigator;
   showGrid?: boolean;
-  translate?: (data: string | {vi: string; en: string}) => string;
+  translate?: (data: string | { vi: string; en: string }) => string;
 };
 
 export type LocalizationObject = {
@@ -87,19 +87,26 @@ export type LocalizationObject = {
 };
 
 export type ToolGroup = {
-  title: {vi: string; en: string};
+  title: { vi: string; en: string };
   items: Tool[];
 };
 
 export type Tool = {
   icon: string;
-  name: {vi: string; en: string};
+  name: { vi: string; en: string };
   key: string;
   showBadge?: boolean;
   showRightIcon?: boolean;
   onPress: () => void;
 };
 
+export type FeaturesFlag = {
+  enableForceFoundationList?: boolean;
+  enableBottomTabAnimation?: boolean;
+  enableHapticBottomTab?: boolean;
+  enableHapticDialog?: boolean;
+};
+
 export type NavigationContainerProps = {
   screen: React.ComponentType<NavigationScreenProps>;
   options?: NavigationOptions;
@@ -107,6 +114,7 @@ export type NavigationContainerProps = {
   maxApi: any;
   initialParams?: any;
   localize: Localize;
+  features: FeaturesFlag;
 };
 
 export type WidgetContainerProps = {
@@ -157,7 +165,6 @@ export type BottomSheetParams = {
   useBottomInset?: boolean;
   useKeyboardAvoidingView?: boolean;
   keyboardVerticalOffset?: number;
-  useScrollOverflow?: boolean;
   useDivider?: boolean;
   footerComponent?: React.ReactNode;
 };
@@ -270,7 +277,6 @@ export type BottomTabProps = {
     blur?: (e: EventArg<'blur', false, unknown>) => void;
   };
   floatingButton?: FloatingButtonProps;
-  useAnimation?: boolean;
 };
 
 export type FloatingButtonProps = {

package/Image/index.tsx

@@ -66,7 +66,7 @@ const Image: React.FC<ImageProps> = ({
       {...rest}
       {...{ accessibilityLabel: rest.accessibilityLabel ?? accessibilityLabel }}
       source={source}
-      style={style}
+      style={[styles.container, style]}
       onProgress={() => {
         error.current = false;
         if (status !== 'loading' && loading) {
@@ -90,7 +90,7 @@ const Image: React.FC<ImageProps> = ({
         error.current = true;
       }}
     >
-      <View style={styles.container}>{renderContent()}</View>
+      {renderContent()}
     </FastImage>
   );
 };

package/Image/styles.ts

@@ -1,5 +1,5 @@
-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
 
 export default StyleSheet.create({
-  container: { zIndex: -1, flex: 1 },
+  container: {},
 });

package/Input/InputOTP.tsx

@@ -202,6 +202,7 @@ const InputOTP = forwardRef(
     const renderInputView = () => {
       return (
         <TouchableOpacity
+          activeOpacity={1}
           onPress={() => inputRef.current?.focus()}
           style={[
             styles.otpInput,
@@ -238,6 +239,7 @@ const InputOTP = forwardRef(
               {...props}
               ref={inputRef}
               value={value}
+              textAlign={'center'}
               onChangeText={_onChangeText}
               keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
               allowFontScaling={false}

package/Input/styles.ts

@@ -1,6 +1,6 @@
-import {Platform, StyleSheet} from 'react-native';
-import {Colors, Radius, Spacing} from '../Consts';
-import {scaleSize} from '../Text';
+import { Platform, StyleSheet } from 'react-native';
+import { Colors, Radius, Spacing } from '../Consts';
+import { scaleSize } from '../Text';
 
 export default StyleSheet.create({
   //input style
@@ -31,8 +31,8 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  floatingIcon: {marginLeft: Spacing.XS},
-  errorIcon: {marginRight: Spacing.XS, marginTop: Spacing.XXS},
+  floatingIcon: { marginLeft: Spacing.XS },
+  errorIcon: { marginRight: Spacing.XS, marginTop: Spacing.XXS },
   errorView: {
     flexDirection: 'row',
     marginTop: Spacing.XS,
@@ -119,8 +119,8 @@ export default StyleSheet.create({
   iconSearchInput: {
     marginLeft: Spacing.S,
   },
-  searchInputContainer: {flexDirection: 'row', alignItems: 'center'},
-  textButton: {marginLeft: Spacing.L},
+  searchInputContainer: { flexDirection: 'row', alignItems: 'center' },
+  textButton: { marginLeft: Spacing.L },
   divider: {
     width: 1,
     height: 20,
@@ -178,16 +178,17 @@ export default StyleSheet.create({
     position: 'absolute',
     width: '100%',
     height: '100%',
-    opacity: 0.01,
+    opacity: 0.02,
     backgroundColor: 'transparent',
+    zIndex: 2,
   },
   otpRealInput: {
-    opacity: 0.01,
     width: '100%',
     height: '100%',
-    zIndex: 1,
+    zIndex: 2,
+    opacity: 0.02,
+    letterSpacing: Spacing.XXL,
   },
-
   //DropDown
   inputDropDownWrapper: {
     flexDirection: 'row',
@@ -216,5 +217,5 @@ export default StyleSheet.create({
     borderRadius: Radius.XS,
     overflow: 'hidden',
   },
-  currency: {fontSize: scaleSize(20), fontWeight: 'bold'},
+  currency: { fontSize: scaleSize(20), fontWeight: 'bold' },
 });

package/Layout/Card.tsx

@@ -33,10 +33,10 @@ const Card: React.FC<CardProps> = ({
   const gutterSize = 8;
   const margin = 12;
   const widthSection = Dimensions.get('window').width - margin * 2;
-  const sizePerSpan = Math.round(
+  let sizePerSpan =
     (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
-      numberOfColumns,
-  );
+      numberOfColumns -
+    1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,

package/Text/styles.ts

@@ -1,10 +1,11 @@
 export default {
-  headline_default_bold: {fontSize: 24, lineHeight: 34, fontWeight: '700'},
-  header_m_bold: {fontSize: 18, lineHeight: 26, fontWeight: '700'},
-  header_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
-  header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
-  header_xs_semibold: {fontSize: 12, lineHeight: 18, fontWeight: '600'},
-  body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
+  headline_l_bold: { fontSize: 28, lineHeight: 40, fontWeight: '700' },
+  headline_default_bold: { fontSize: 24, lineHeight: 34, fontWeight: '700' },
+  header_m_bold: { fontSize: 18, lineHeight: 26, fontWeight: '700' },
+  header_default_bold: { fontSize: 16, lineHeight: 22, fontWeight: '700' },
+  header_s_semibold: { fontSize: 14, lineHeight: 20, fontWeight: '600' },
+  header_xs_semibold: { fontSize: 12, lineHeight: 18, fontWeight: '600' },
+  body_default_regular: { fontSize: 14, lineHeight: 20, fontWeight: '400' },
   body_default_regularstrikethrought: {
     fontSize: 14,
     lineHeight: 20,
@@ -22,52 +23,52 @@ export default {
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
-  description_xs_regular: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
+  description_xs_regular: { fontSize: 10, lineHeight: 14, fontWeight: '400' },
   description_xs_regularstrikethrought: {
     fontSize: 10,
     lineHeight: 14,
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
-  label_default_medium: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
-  label_s_medium: {fontSize: 12, lineHeight: 18, fontWeight: '500'},
-  label_xs_medium: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
-  action_default_bold: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
-  action_s_bold: {fontSize: 14, lineHeight: 20, fontWeight: '700'},
-  action_xs_bold: {fontSize: 12, lineHeight: 18, fontWeight: '700'},
-  action_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
+  label_default_medium: { fontSize: 14, lineHeight: 20, fontWeight: '500' },
+  label_s_medium: { fontSize: 12, lineHeight: 18, fontWeight: '500' },
+  label_xs_medium: { fontSize: 10, lineHeight: 14, fontWeight: '500' },
+  action_default_bold: { fontSize: 16, lineHeight: 22, fontWeight: '700' },
+  action_s_bold: { fontSize: 14, lineHeight: 20, fontWeight: '700' },
+  action_xs_bold: { fontSize: 12, lineHeight: 18, fontWeight: '700' },
+  action_xxs_bold: { fontSize: 10, lineHeight: 14, fontWeight: '700' },
   /**non-support**/
   headline_default: {
     fontSize: 28,
     lineHeight: 34,
     fontWeight: '600',
   },
-  headline_s: {fontSize: 24, lineHeight: 32, fontWeight: '600'},
-  headline_l: {fontSize: 32, lineHeight: 36, fontWeight: '600'},
-  headline_xl: {fontSize: 36, lineHeight: 44, fontWeight: '600'},
-  title_default: {fontSize: 20, lineHeight: 28, fontWeight: '700'},
-  title_xs: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
-  title_s: {fontSize: 18, lineHeight: 28, fontWeight: '700'},
-  header_default: {fontSize: 15, lineHeight: 22, fontWeight: '600'},
-  header_xs: {fontSize: 12, lineHeight: 16, fontWeight: '600'},
-  header_s: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
-  paragraph_default: {fontSize: 15, lineHeight: 22, fontWeight: '400'},
-  paragraph_bold: {fontSize: 15, lineHeight: 22, fontWeight: '700'},
+  headline_s: { fontSize: 24, lineHeight: 32, fontWeight: '600' },
+  headline_l: { fontSize: 32, lineHeight: 36, fontWeight: '600' },
+  headline_xl: { fontSize: 36, lineHeight: 44, fontWeight: '600' },
+  title_default: { fontSize: 20, lineHeight: 28, fontWeight: '700' },
+  title_xs: { fontSize: 16, lineHeight: 22, fontWeight: '700' },
+  title_s: { fontSize: 18, lineHeight: 28, fontWeight: '700' },
+  header_default: { fontSize: 15, lineHeight: 22, fontWeight: '600' },
+  header_xs: { fontSize: 12, lineHeight: 16, fontWeight: '600' },
+  header_s: { fontSize: 14, lineHeight: 20, fontWeight: '600' },
+  paragraph_default: { fontSize: 15, lineHeight: 22, fontWeight: '400' },
+  paragraph_bold: { fontSize: 15, lineHeight: 22, fontWeight: '700' },
   paragraph_italic: {
     fontSize: 15,
     lineHeight: 22,
     fontWeight: '400',
     fontStyle: 'italic',
   },
-  description_default: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
-  description_xs: {fontSize: 10, lineHeight: 14, fontWeight: '400'},
-  description_s: {fontSize: 12, lineHeight: 16, fontWeight: '400'},
-  label_default: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
-  label_xxs: {fontSize: 8, lineHeight: 12, fontWeight: '500'},
-  label_xs: {fontSize: 10, lineHeight: 14, fontWeight: '500'},
-  label_s: {fontSize: 12, lineHeight: 16, fontWeight: '500'},
-  action_default: {fontSize: 16, lineHeight: 22, fontWeight: '700'},
-  action_xxs: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
-  action_xs: {fontSize: 12, lineHeight: 16, fontWeight: '700'},
-  action_s: {fontSize: 15, lineHeight: 22, fontWeight: '700'},
+  description_default: { fontSize: 14, lineHeight: 20, fontWeight: '400' },
+  description_xs: { fontSize: 10, lineHeight: 14, fontWeight: '400' },
+  description_s: { fontSize: 12, lineHeight: 16, fontWeight: '400' },
+  label_default: { fontSize: 14, lineHeight: 20, fontWeight: '500' },
+  label_xxs: { fontSize: 8, lineHeight: 12, fontWeight: '500' },
+  label_xs: { fontSize: 10, lineHeight: 14, fontWeight: '500' },
+  label_s: { fontSize: 12, lineHeight: 16, fontWeight: '500' },
+  action_default: { fontSize: 16, lineHeight: 22, fontWeight: '700' },
+  action_xxs: { fontSize: 10, lineHeight: 14, fontWeight: '700' },
+  action_xs: { fontSize: 12, lineHeight: 16, fontWeight: '700' },
+  action_s: { fontSize: 15, lineHeight: 22, fontWeight: '700' },
 };

package/Text/types.ts

@@ -32,6 +32,7 @@ export type Typography =
   /**
    * end
    **/
+  | 'headline_l_bold'
   | 'headline_default_bold'
   | 'header_m_bold'
   | 'header_default_bold'

package/package.json

@@ -1,35 +1,35 @@
 {
-  "name": "@momo-kits/foundation",
-  "version": "0.150.2-test.1",
-  "description": "React Native Component Kits",
-  "main": "index.ts",
-  "scripts": {},
-  "keywords": [
-    "@momo-kits/foundation"
-  ],
-  "dependencies": {
-    "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-    "@react-navigation/bottom-tabs": "7.4.2",
-    "@react-navigation/core": "7.12.1",
-    "@react-navigation/elements": "2.5.2",
-    "@react-navigation/native": "7.1.14",
-    "@react-navigation/routers": "7.4.1",
-    "@react-navigation/stack": "7.4.2",
-    "react-native-gesture-handler": "2.27.1",
-    "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-    "react-native-reanimated": "4.1.0",
-    "react-native-safe-area-context": "5.5.2",
-    "@shopify/flash-list": "2.1.0"
-  },
-  "peerDependencies": {
-    "react-native": "*"
-  },
-  "devDependencies": {
-    "@momo-platform/versions": "4.1.11",
-    "@types/color": "3.0.6"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "license": "MoMo"
-}
+    "name": "@momo-kits/foundation",
+    "version": "0.151.1-beta.1",
+    "description": "React Native Component Kits",
+    "main": "index.ts",
+    "scripts": {},
+    "keywords": [
+        "@momo-kits/foundation"
+    ],
+    "dependencies": {
+        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
+        "@react-navigation/bottom-tabs": "7.4.2",
+        "@react-navigation/core": "7.12.1",
+        "@react-navigation/elements": "2.5.2",
+        "@react-navigation/native": "7.1.14",
+        "@react-navigation/routers": "7.4.1",
+        "@react-navigation/stack": "7.4.2",
+        "react-native-gesture-handler": "2.27.1",
+        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
+        "react-native-reanimated": "4.1.0",
+        "react-native-safe-area-context": "5.5.2",
+        "@shopify/flash-list": "2.1.0"
+    },
+    "peerDependencies": {
+        "react-native": "*"
+    },
+    "devDependencies": {
+        "@momo-platform/versions": "4.1.11",
+        "@types/color": "3.0.6"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/"
+    },
+    "license": "MoMo"
+}