@momo-kits/foundation 0.92.1-tracking.1 → 0.92.1-tracking.13

package/Application/BottomTab.tsx

@@ -58,7 +58,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
     });
   }, []);
 
-  const accessibilityID = getAccessibilityID("tbr_main_bottom")
+  const accessibilityID = getAccessibilityID?.("tbr_main_bottom")
 
   return (
     <Tab.Navigator
@@ -75,7 +75,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
         },
       }}>
       {tabs.map(item => {
-          const itemAccessibilityID = getAccessibilityID(`btn_tabbar_${item.name}`)
+          const itemAccessibilityID = getAccessibilityID?.(`btn_tabbar_${item.name}`)
         return (
           <Tab.Screen
               {...itemAccessibilityID}

package/Application/Components.tsx

@@ -29,7 +29,7 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
-import {getAccessibilityID} from "./utils";
+import {getAccessibilityID} from './utils';
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -38,7 +38,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
   badgeType,
   badgeValue,
-    accessibilityID = ''
+  accessibilityID = '',
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
@@ -65,7 +65,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     }
   }, [badgeType, badgeValue]);
 
-  const ID = getAccessibilityID(accessibilityID)
+  const ID = getAccessibilityID?.(accessibilityID);
   return (
     <View {...ID} style={{width: scaleSize(28)}}>
       <TouchableOpacity
@@ -93,6 +93,7 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
+      accessibilityLabel={getAccessibilityID('title_navigation_header')}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -170,9 +171,9 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     return true;
   };
   return (
-    <View  style={styles.headerLeft}>
+    <View style={styles.headerLeft}>
       <NavigationButton
-          accessibilityID = "btn_navigation_back"
+        accessibilityID="btn_navigation_back"
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
@@ -246,7 +247,10 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text typography="header_default_bold" color={tintColor}>
+        <Text
+          {...getAccessibilityID('title_navigation_header')}
+          typography="header_default_bold"
+          color={tintColor}>
           {title}
         </Text>
         <Text typography="description_default_regular" color={tintColor}>
@@ -293,7 +297,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   pinnedTool,
   runtimeTools = [],
-  preventBack,
+  preventClose,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
   const miniContext = useContext(MiniAppContext);
@@ -340,15 +344,15 @@ const HeaderToolkitAction: React.FC<any> = ({
   };
 
   const onClose = () => {
-    if (preventBack) {
+    if (preventClose) {
       navigator?.showModal({
         screen: () => (
           <PopupNotify
-            {...preventBack}
+            {...preventClose}
             primary={{
-              title: preventBack.primary.title,
+              title: preventClose.primary.title,
               onPress: () => {
-                preventBack?.primary.onPress();
+                preventClose?.primary.onPress();
                 navigator?.maxApi?.dispatchFunction?.(
                   'dismiss',
                   undefined,
@@ -372,7 +376,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
-            accessibilityID  = "btn_navigation_pin"
+          accessibilityID="btn_navigation_pin"
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -403,14 +407,14 @@ const HeaderToolkitAction: React.FC<any> = ({
             },
           ]}>
           <TouchableOpacity
-              {...getAccessibilityID("btn_navigation_more")}
-              onPress={onMore}>
+            {...getAccessibilityID?.('btn_navigation_more')}
+            onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
           <TouchableOpacity
-              {...getAccessibilityID("btn_navigation_close")}
-              onPress={onClose}>
+            {...getAccessibilityID?.('btn_navigation_close')}
+            onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"
@@ -428,7 +432,7 @@ const HeaderToolkitAction: React.FC<any> = ({
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
-  onPress,
+  children,
 }) => {
   const scale = animatedValue.interpolate({
     inputRange: [-300, 0, 300],
@@ -447,21 +451,21 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   });
 
   return (
-    <TouchableOpacity onPress={onPress}>
-      <Animated.View
-        style={{
-          height: 210,
-          opacity: opacity,
-          transform: [{scale}, {translateY}],
-        }}>
+    <Animated.View
+      style={{
+        height: 210,
+        opacity: opacity,
+        transform: [{scale}, {translateY}],
+      }}>
+      {children ?? (
         <Image
           source={{
             uri: image,
           }}
           style={{width: '100%', height: '100%'}}
         />
-      </Animated.View>
-    </TouchableOpacity>
+      )}
+    </Animated.View>
   );
 };
 

package/Application/ModalScreen.tsx

@@ -1,29 +1,21 @@
-import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef} from 'react';
 import {
-  Dimensions,
-  Keyboard,
   KeyboardAvoidingView,
   Platform,
   Pressable,
   StyleSheet,
+  TouchableOpacity,
   View,
 } from 'react-native';
+import {Modalize} from 'react-native-modalize';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {
-  BottomSheetBackdrop,
-  BottomSheetModal,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
+
+import {ApplicationContext} from '.';
+import {Radius, Spacing, Styles} from '../Consts';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
 import Navigation from './Navigation';
 import {BottomSheetParams, ModalParams} from './types';
-import {Radius, Spacing, Styles} from '../Consts';
-import {
-  ApplicationContext,
-  HeaderRightAction,
-  NavigationButton,
-  NavigationContainer,
-} from './index';
-import {HeaderBackground, HeaderLeft, HeaderTitle} from './Components';
 
 const ModalScreen: React.FC<any> = props => {
   /**
@@ -92,141 +84,88 @@ const Modal: React.FC<ModalParams> = props => {
 };
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
-  const insets = useSafeAreaInsets();
   const {theme, navigator} = useContext(ApplicationContext);
-  const [keyboardSnap, setKeyboardSnap] = useState(0);
-  const {screen, options, snapPoint, indicatorColor}: BottomSheetParams =
-    props.route.params;
-  const Component = useRef(screen).current;
+  const {
+    screen: Screen,
+    options,
+    footerComponent,
+    flatListProps,
+  }: BottomSheetParams = props.route.params;
+
   const navigation = new Navigation(props.navigation, theme);
+
   const params = {
     ...props.route.params,
     navigation,
   };
 
   delete params.screen;
-
-  const snapPoints = useMemo(() => {
-    if (snapPoint) {
-      const current = parseInt(snapPoint) + keyboardSnap * 100;
-      return [`${current}%`];
-    }
-    return ['50%', '70%', '90%'];
-  }, [keyboardSnap]);
-
-  const bottomSheetRef = useRef<any>(null);
-  const mountedRef = useRef(true);
-
-  let backgroundColor = theme.colors.background.default;
-  let bottomInset = keyboardSnap * Dimensions.get('window').height;
-  if (bottomInset > 16) {
-    bottomInset -= 16;
-  }
-  if (options?.surface) {
-    backgroundColor = theme.colors.background.surface;
-  }
+  const modalizeRef = useRef<Modalize>(null);
 
   useEffect(() => {
-    const keyboardDidShow = Keyboard.addListener('keyboardDidShow', e => {
-      setKeyboardSnap(
-        e.endCoordinates.height / Dimensions.get('window').height,
-      );
-      bottomSheetRef.current?.expand();
-    });
-
-    const keyboardDidHide = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardSnap(0);
-    });
-
-    bottomSheetRef.current?.present();
-    return () => {
-      mountedRef.current = false;
-      keyboardDidShow.remove();
-      keyboardDidHide.remove();
-    };
+    modalizeRef.current?.open();
   }, []);
 
-  const backdropComponent = (backdropProps: any) => (
-    <BottomSheetBackdrop
-      disappearsOnIndex={-1}
-      appearsOnIndex={0}
-      {...backdropProps}
-    />
-  );
+  const handleClose = () => {
+    modalizeRef?.current?.close();
+  };
 
   return (
     <SafeAreaView style={Styles.flex}>
-      <BottomSheetModal
-        ref={bottomSheetRef}
-        snapPoints={snapPoints}
-        onDismiss={() => {
-          if (mountedRef.current) {
-            navigator?.pop();
-          }
+      <Modalize
+        keyboardAvoidingOffset={-20}
+        adjustToContentHeight
+        closeOnOverlayTap
+        closeSnapPointStraightEnabled
+        onClosed={() => {
+          navigator?.pop();
         }}
-        bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
-        handleComponent={null}
-        backdropComponent={backdropComponent}>
-        <BottomSheetView>
-          <View style={[styles.sheetContainer, {backgroundColor}]}>
-            <View style={styles.indicatorContainer}>
-              <View
-                style={[
-                  styles.indicator,
-                  {backgroundColor: theme.colors.text.disable},
-                ]}
-              />
-            </View>
-            <NavigationContainer
-              maxApi={navigator?.maxApi}
-              theme={{
-                ...theme,
-                assets: {...theme.assets, headerBackground: undefined},
-              }}
-              screen={props => <Component {...props} {...params} />}
-              options={{
-                ...options,
-                ...{
-                  headerLeft: (props: any) => {
-                    if (props.canGoBack) {
-                      return <HeaderLeft {...props} useBorder={false} />;
-                    }
-                  },
-                  headerTitle: (props: any) => {
-                    return <HeaderTitle {...props} />;
-                  },
-                  headerTintColor: theme.colors.text.default,
-                  headerBackground: () => (
-                    <HeaderBackground backgroundColor={backgroundColor} />
-                  ),
-                  headerTransparent: false,
-                },
-                headerTitleAlign: 'center',
-                headerRight: props => (
-                  <HeaderRightAction>
-                    <NavigationButton
-                      {...props}
-                      icon="24_navigation_close"
-                      useBorder={false}
-                      onPress={() => bottomSheetRef.current?.dismiss()}
-                    />
-                  </HeaderRightAction>
-                ),
-              }}
-            />
-            <View
-              style={{
-                height: Math.min(insets.bottom, 20),
-                backgroundColor: indicatorColor ?? backgroundColor,
-              }}
-            />
-          </View>
-        </BottomSheetView>
-      </BottomSheetModal>
+        ref={modalizeRef}
+        withHandle={false}
+        flatListProps={flatListProps}
+        HeaderComponent={headerDefault(
+          options?.title ?? options?.customTitle?.title ?? '',
+          handleClose,
+        )}
+        FooterComponent={footerDefault(footerComponent)}>
+        <View style={styles.bottomSheetContainer}>
+          <Screen {...props} {...params} />
+        </View>
+      </Modalize>
     </SafeAreaView>
   );
 };
 
+const headerDefault = (title: string, onClose: () => void) => {
+  return (
+    <View style={styles.header}>
+      <Text
+        style={styles.textOption}
+        numberOfLines={2}
+        typography="header_default_bold">
+        {title ?? ''}
+      </Text>
+      <TouchableOpacity style={styles.buttonClose} onPress={onClose}>
+        <Icon source="navigation_close" />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const footerDefault = (footerComponent: React.ReactNode) => {
+  const insets = useSafeAreaInsets();
+  if (!footerComponent) return;
+  return (
+    <View
+      style={{
+        marginBottom: Math.min(insets.bottom, 21) + Spacing.S,
+        paddingHorizontal: 12,
+      }}>
+      {footerComponent}
+    </View>
+  );
+};
+
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
@@ -263,6 +202,43 @@ const styles = StyleSheet.create({
     height: 4,
     borderRadius: Radius.S,
   },
+  bottomSheetContainer: {
+    width: '100%',
+    backgroundColor: 'white',
+    borderTopRightRadius: 16,
+    borderTopLeftRadius: 16,
+  },
+  header: {
+    height: 50,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textOption: {
+    fontSize: 16,
+    color: '#303233',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    paddingHorizontal: 60,
+  },
+  imageOption: {
+    height: 1,
+    backgroundColor: '#ebebeb',
+    width: '100%',
+    position: 'absolute',
+    bottom: 1,
+  },
+  buttonClose: {
+    padding: 12,
+    position: 'absolute',
+    right: 0,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    tintColor: '#303233',
+    backgroundColor: 'red',
+  },
 });
 
 export default ModalScreen;

package/Application/NavigationContainer.tsx

@@ -1,5 +1,4 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
-import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
@@ -23,7 +22,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
-  params,
+  initialParams,
 }) => {
   const context = useContext(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
@@ -69,55 +68,53 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
 
   return (
     <SafeAreaProvider>
-      <BottomSheetModalProvider>
-        <ApplicationContext.Provider
-          value={{
-            navigator: navigator.current,
-            config: config.current,
-            theme,
-            showGrid,
-            translate,
-          }}>
-          <ReactNavigationContainer
-            theme={{
-              ...theme,
-              colors: {
-                ...theme.colors,
-                background: theme.colors.background.default,
-                card: theme.colors.background.surface,
-                text: theme.colors.text.default,
-                border: theme.colors.border.default,
-                notification: theme.colors.error.primary,
-              },
-            }}
-            ref={navigator.current?.ref}
-            onReady={() => {
-              isReady.current = true;
-            }}
-            independent={true}>
-            <Stack.Navigator initialRouteName="Stack" headerMode="screen">
-              <Stack.Screen
-                name="Stack"
-                component={StackScreen}
-                initialParams={{screen, params}}
-                options={{...getStackOptions(), ...options}}
-              />
-              <Stack.Screen
-                name="Dialog"
-                component={StackScreen}
-                options={getDialogOptions()}
-                initialParams={{screen}}
-              />
-              <Stack.Screen
-                name="Modal"
-                component={ModalScreen}
-                options={getModalOptions()}
-                initialParams={{screen}}
-              />
-            </Stack.Navigator>
-          </ReactNavigationContainer>
-        </ApplicationContext.Provider>
-      </BottomSheetModalProvider>
+      <ApplicationContext.Provider
+        value={{
+          navigator: navigator.current,
+          config: config.current,
+          theme,
+          showGrid,
+          translate,
+        }}>
+        <ReactNavigationContainer
+          theme={{
+            ...theme,
+            colors: {
+              ...theme.colors,
+              background: theme.colors.background.default,
+              card: theme.colors.background.surface,
+              text: theme.colors.text.default,
+              border: theme.colors.border.default,
+              notification: theme.colors.error.primary,
+            },
+          }}
+          ref={navigator.current?.ref}
+          onReady={() => {
+            isReady.current = true;
+          }}
+          independent={true}>
+          <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+            <Stack.Screen
+              name="Stack"
+              component={StackScreen}
+              initialParams={{screen, initialParams}}
+              options={{...getStackOptions(), ...options}}
+            />
+            <Stack.Screen
+              name="Dialog"
+              component={StackScreen}
+              options={getDialogOptions()}
+              initialParams={{screen}}
+            />
+            <Stack.Screen
+              name="Modal"
+              component={ModalScreen}
+              options={getModalOptions()}
+              initialParams={{screen}}
+            />
+          </Stack.Navigator>
+        </ReactNavigationContainer>
+      </ApplicationContext.Provider>
     </SafeAreaProvider>
   );
 };

package/Application/StackScreen.tsx

@@ -19,23 +19,27 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   const context = useContext(MiniAppContext);
 
-  const {screen: Component, options, params}: ScreenParams = props.route.params;
+  const {
+    screen: Component,
+    options,
+    initialParams,
+  }: ScreenParams = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
   const heightHeader = useHeaderHeight();
 
   const data = {
     ...props.route.params,
-    params,
+    ...initialParams,
     navigation,
   };
 
   delete data.screen;
+  delete data.initialParams;
 
   /**
    * set options for screen
    */
   useLayoutEffect(() => {
-    startTime.current = Date.now();
     InteractionManager.runAfterInteractions(() => {
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
@@ -114,15 +118,21 @@ const StackScreen: React.FC<ScreenParams> = props => {
           endTime.current = Date.now();
           clearTimeout(timeout.current);
           timeout.current = setTimeout(() => {
-            timeLoad.current = endTime.current - startTime.current;
-            navigator?.maxApi?.showToastDebug?.({
-              appId: context.appId,
-              message: `${Component.name} screen_load_time ${timeLoad.current}`,
-            });
+            if (timeLoad.current === 0) {
+              timeLoad.current = endTime.current - startTime.current;
+              navigator?.maxApi?.showToastDebug?.({
+                appId: context.appId,
+                message: `${Component.name} screen_load_time ${timeLoad.current}`,
+              });
+            }
           }, 1000);
         },
       }}>
-      <Component heightHeader={heightHeader} {...data} />
+      <Component
+        heightHeader={heightHeader}
+        {...data}
+        onScreenLoad={() => {}}
+      />
       {showGrid && <GridSystem />}
     </ScreenContext.Provider>
   );

package/Application/index.ts

@@ -4,10 +4,8 @@ import {
   HeaderAnimated,
   HeaderBackground,
   HeaderCustom,
-  HeaderLeft,
   HeaderRightAction,
   HeaderTitle,
-  HeaderToolkitAction,
   NavigationButton,
 } from './Components';
 import BottomTab from './BottomTab';
@@ -32,10 +30,8 @@ export {
   BottomTab,
   NavigationButton,
   HeaderTitle,
-  HeaderLeft,
   HeaderBackground,
   HeaderRightAction,
-  HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
 };

package/Application/types.ts

@@ -1,4 +1,4 @@
-import {Animated} from 'react-native';
+import {Animated, FlatListProps, ViewProps} from 'react-native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import Navigator from './Navigator';
@@ -94,7 +94,7 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
-  params: Record<string, any>;
+  initialParams: Record<string, any>;
   localization?: LocalizationObject;
 };
 
@@ -119,8 +119,8 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
-  indicatorColor?: string;
+  footerComponent?: React.ReactNode;
+  flatListProps: FlatListProps<any>;
 }
 
 export type NavigationButtonProps = {
@@ -154,6 +154,7 @@ export interface NavigationOptions extends StackNavigationOptions {
   toolkitParams?: {
     pinnedTool?: PinnedToolType;
     runtimeTools?: RuntimeToolType[];
+    preventClose?: PopupNotifyProps;
   };
 }
 
@@ -185,11 +186,10 @@ export type HeaderToolkitProps = {
   configs: any[];
 };
 
-export type HeaderAnimatedProps = {
+export interface HeaderAnimatedProps extends ViewProps {
   animatedValue: Animated.Value;
   image: string;
-  onPress?: () => void;
-};
+}
 
 export type BottomTabItemProps = {
   name: string;

package/Application/utils.tsx

@@ -131,14 +131,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     options = {
       ...options,
       headerRight: (props: any) => {
-        return (
-          <HeaderToolkitAction
-            preventBack={params.preventBack}
-            pinnedTool={params.toolkitParams?.pinnedTool}
-            runtimeTools={params.toolkitParams?.runtimeTools}
-            {...props}
-          />
-        );
+        return <HeaderToolkitAction {...params.toolkitParams} {...props} />;
       },
     };
   }
@@ -162,7 +155,7 @@ const getAccessibilityID = (key = '') => {
   }
 };
 
-const formatComponentName = (word: string) => {
+const formatComponentName = (word = '') => {
   const accentsMap = {
     a: 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
     A: 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
@@ -190,7 +183,7 @@ const formatComponentName = (word: string) => {
   return word;
 };
 
-const formatNameLength = (name: string) => {
+const formatNameLength = (name = '') => {
   let formattedName = name;
   if (formattedName.length > 100) {
     formattedName = formattedName.substring(0, 100);

package/Button/index.tsx

@@ -78,6 +78,8 @@ export interface ButtonProps extends TouchableOpacityProps {
   params?: any;
 
   componentId?: string;
+
+  accessibilityID?: object
 }
 
 const Button: FC<ButtonProps> = ({
@@ -93,6 +95,7 @@ const Button: FC<ButtonProps> = ({
   params,
   componentId,
   accessibilityLabel,
+                                   accessibilityID,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -303,7 +306,7 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-  const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|btn_${title}`)
+  const selfAccessibilityID = accessibilityID ? accessibilityID : getAccessibilityID?.(`${appId}/${code}/${screenInfo.screenName}/btn_${title}`)
   return (
     <ScreenContext.Provider
       value={{
@@ -321,7 +324,7 @@ const Button: FC<ButtonProps> = ({
       }}>
       <TouchableOpacity
         {...rest}
-        {...accessibilityID}
+        {...selfAccessibilityID}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>

package/CheckBox/index.tsx

@@ -42,7 +42,7 @@ const CheckBox: FC<CheckBoxProps> = ({
       backgroundColor = theme.colors.background.tonal;
     }
   }
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|cbx_${label}_${value}`)
+    const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/cbx_${label}_${value}`)
 
   return (
     <ScreenContext.Provider

package/Image/index.tsx

@@ -42,7 +42,7 @@ const Image: React.FC<ImageProps> = ({
     return children;
   };
 
-  const accessibilityID = getAccessibilityID(`img|${source}`)
+  const accessibilityID = getAccessibilityID?.(`img|${source}`)
   return (
     <FastImage
       {...rest}

package/Input/Input.tsx

@@ -121,6 +121,7 @@ const Input = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
+        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
       return (
         <View
@@ -149,6 +150,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
+              {...accessibilityID}
               editable={!disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
@@ -202,7 +204,6 @@ const Input = forwardRef(
       inputState = 'disabled';
     }
 
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <ScreenContext.Provider
@@ -214,7 +215,7 @@ const Input = forwardRef(
           state: inputState,
           componentId,
         }}>
-        <View {...accessibilityID} style={[style, styles.wrapper]}>
+        <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>

package/Input/InputDropDown.tsx

@@ -60,6 +60,7 @@ const InputDropDown = ({
       placeholderColor = disabledColor;
       iconTintColor = disabledColor;
     }
+      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <View
@@ -89,6 +90,7 @@ const InputDropDown = ({
           {full && (
             <TextInput
               {...props}
+              {...accessibilityID}
               onPressIn={onPress}
               editable={false}
               textAlignVertical="top"
@@ -112,7 +114,6 @@ const InputDropDown = ({
     );
   };
 
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
 
   return (
@@ -126,7 +127,6 @@ const InputDropDown = ({
         componentId,
       }}>
       <TouchableOpacity
-          {...accessibilityID}
         onPress={onPress}
         style={[style, full && styles.wrapper]}>
         {renderInputView()}

package/Input/InputMoney.tsx

@@ -104,6 +104,7 @@ const InputMoney = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
+        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
       return (
         <View
@@ -123,6 +124,7 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              {...accessibilityID}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -173,7 +175,6 @@ const InputMoney = forwardRef(
       inputState = 'disabled';
     }
 
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <ScreenContext.Provider
@@ -186,7 +187,6 @@ const InputMoney = forwardRef(
           componentId,
         }}>
         <View
-            {...accessibilityID}
             style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />

package/Input/InputOTP.tsx

@@ -191,6 +191,7 @@ const InputOTP = forwardRef(
       );
     };
 
+      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}`)
     const renderInputView = () => {
       return (
         <View
@@ -216,6 +217,7 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              {...accessibilityID}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -230,7 +232,6 @@ const InputOTP = forwardRef(
         </View>
       );
     };
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <ScreenContext.Provider
@@ -243,7 +244,6 @@ const InputOTP = forwardRef(
           componentId,
         }}>
         <TouchableOpacity
-            {...accessibilityID}
           activeOpacity={1}
           onPress={onFocusInput}
           style={[style, styles.otpWrapper]}>

package/Input/InputSearch.tsx

@@ -66,11 +66,13 @@ const InputSearch = forwardRef(
       checkTyping(text, haveValue, setHaveValue);
       onChangeText?.(text);
     };
+      const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_search`)
 
     const renderInputView = () => {
       return (
         <TextInput
           {...props}
+          {...accessibilityID}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -139,11 +141,9 @@ const InputSearch = forwardRef(
     const backgroundColor = hasColorBG
       ? theme.colors.background.default
       : theme.colors.background.surface;
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_search`)
 
     return (
       <ScreenContext.Provider
-          {...accessibilityID}
         value={{
           ...screenInfo,
           componentName: 'InputSearch',

package/Input/InputTextArea.tsx

@@ -94,6 +94,7 @@ const InputTextArea = forwardRef(
         textColor = disabledColor;
         placeholderColor = disabledColor;
       }
+        const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/input_${floatingValue}${disabled && "_disabled" }`)
 
       return (
         <View
@@ -116,6 +117,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
+                {...accessibilityID}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -153,11 +155,9 @@ const InputTextArea = forwardRef(
         </View>
       );
     };
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <View
-          {...accessibilityID}
           style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />

package/Input/styles.ts

@@ -7,7 +7,7 @@ export default StyleSheet.create({
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   wrapper: {
     width: '100%',
@@ -75,7 +75,7 @@ export default StyleSheet.create({
     flex: 1,
     paddingRight: Spacing.XS,
     paddingVertical: Spacing.XS,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -108,7 +108,7 @@ export default StyleSheet.create({
     height: 36,
     marginLeft: Spacing.S,
     flex: 1,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
     paddingVertical: Spacing.XS,
   },
   searchInputView: {

package/Popup/PopupNotify.tsx

@@ -109,13 +109,13 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       );
     };
     const renderColumn = () => {
-      const accessibilityPrimaryID = getAccessibilityID('btn_popup_allow')
-      const accessibilitySecondID = getAccessibilityID('btn_popup_cancel')
+      const accessibilityPrimaryID = getAccessibilityID?.('btn_popup_allow')
+      const accessibilitySecondID = getAccessibilityID?.('btn_popup_cancel')
 
       return (
         <View style={Styles.columnCenter}>
           <Button
-              {...accessibilityPrimaryID}
+            accessibilityID={accessibilityPrimaryID}
             title={primary.title}
             size="medium"
             onPress={() => {
@@ -127,7 +127,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
-                  {...accessibilitySecondID}
+                  accessibilityID={accessibilitySecondID}
                 title={secondary?.title}
                 type="text"
                 size="medium"
@@ -161,7 +161,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    const accessibilityCloseID = getAccessibilityID('ic_popup_close')
+    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close')
 
     return (
       <TouchableOpacity
@@ -189,7 +189,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     );
   };
 
-  const accessibilityID = getAccessibilityID(`pu_${context.code}_notify`)
+  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_notify`)
 
   return (
     <View

package/Popup/PopupPromotion.tsx

@@ -49,7 +49,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    const accessibilityCloseID = getAccessibilityID('ic_popup_close')
+    const accessibilityCloseID = getAccessibilityID?.('ic_popup_close')
 
     return (
       <View {...accessibilityCloseID} style={styles.iconCloseContainer}>
@@ -78,7 +78,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       </View>
     );
   };
-  const accessibilityID = getAccessibilityID(`pu_${context.code}_promotion`)
+  const accessibilityID = getAccessibilityID?.(`pu_${context.code}_promotion`)
 
   return (
     <View

package/Radio/index.tsx

@@ -45,7 +45,7 @@ const Radio: FC<RadioProps> = ({
         : theme.colors.text.disable,
     };
   }
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|rdo_${label}_${value}`)
+    const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/rdo_${label}_${value}`)
 
   return (
     <ScreenContext.Provider

package/Switch/index.tsx

@@ -22,7 +22,7 @@ const Switch: FC<SwitchProps> = props => {
   if (disabled) {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|swt_${value}`)
+    const accessibilityID = getAccessibilityID?.(`${appId}/${screenInfo.screenName}/swt_${value}`)
 
   return (
     <ScreenContext.Provider

package/Text/index.tsx

@@ -51,8 +51,9 @@ export interface TextProps extends RNTextProps {
    */
   color?: string;
 }
+
 const Text: React.FC<TextProps> = ({
-  typography,
+  typography = 'body_default_regular',
   color,
   children,
   style,
@@ -94,6 +95,7 @@ const Text: React.FC<TextProps> = ({
   };
 
   const textStyle = getTypoStyle(typography);
+
   return (
     <RNText
       {...rest}
@@ -103,8 +105,4 @@ const Text: React.FC<TextProps> = ({
   );
 };
 
-Text.defaultProps = {
-  typography: 'body_default_regular',
-};
-
 export {Text, scaleSize};

package/Text/styles.ts

@@ -1,9 +1,9 @@
 export default {
-  headline_default_bold: {fontSize: 24, lineHeight: 32, fontWeight: '700'},
-  header_m_bold: {fontSize: 18, lineHeight: 28, 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: 16, fontWeight: '600'},
+  header_xs_semibold: {fontSize: 12, lineHeight: 18, fontWeight: '600'},
   body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
   body_regularstrikethrought: {
     fontSize: 14,
@@ -13,12 +13,12 @@ export default {
   },
   description_default_regular: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 18,
     fontWeight: '400',
   },
   description_default_regularstrikethrought: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 18,
     fontWeight: '400',
     textDecorationLine: 'line-through',
   },
@@ -30,11 +30,11 @@ export default {
     textDecorationLine: 'line-through',
   },
   label_default_medium: {fontSize: 14, lineHeight: 20, fontWeight: '500'},
-  label_s_medium: {fontSize: 12, lineHeight: 16, 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: 16, fontWeight: '700'},
+  action_xs_bold: {fontSize: 12, lineHeight: 18, fontWeight: '700'},
   action_xxs_bold: {fontSize: 10, lineHeight: 14, fontWeight: '700'},
   /**non-support**/
   headline_default: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.1-tracking.1",
+    "version": "0.92.1-tracking.13",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,10 +10,10 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@gorhom/bottom-sheet": "git+https://gitlab.com/momo-platform/bottom-sheet.git#main",
         "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/core": "5.16.1",

package/verify.js

@@ -2,21 +2,24 @@ const fs = require('fs');
 const path = require('path');
 
 try {
-  const package = path.join(`${__dirname}`, 'package.json');
-  const packageInfo = JSON.parse(fs.readFileSync(package, 'utf8'));
+  const packageInfo = JSON.parse(
+    fs.readFileSync(path.join(`${__dirname}`, 'package.json'), 'utf8'),
+  );
   const packageVersion = parseInt(packageInfo?.version.split('.')?.[1]);
 
   const app = path.join(`${__dirname}/../../../`, 'app.json');
   const miniJson = path.join(`${__dirname}/../../../`, 'package.json');
+
+  if (!fs.existsSync(app) || fs.existsSync(miniJson)) {
+    return;
+  }
+
   const appInfo = JSON.parse(fs.readFileSync(app, 'utf8'));
   const miniInfo = JSON.parse(fs.readFileSync(miniJson, 'utf8'));
+
   const iOSAppTarget = appInfo?.client?.ios.deploymentTarget;
   const androidAppTarget = appInfo?.client?.android.deploymentTarget;
 
-  if (appInfo.name === 'MoMoPlatform') {
-    return;
-  }
-
   if (packageVersion > iOSAppTarget || packageVersion > androidAppTarget) {
     console.error(
       `Package ${packageInfo.name} version: ${packageInfo.version} require deploymentTarget ${packageVersion}`,