@momo-kits/foundation 0.111.1-beta.2 → 0.111.1-beta.20

package/Application/BottomSheet.tsx

@@ -1,8 +1,6 @@
 import React, {useCallback, useContext, useEffect, useRef} from 'react';
 import {
-  Animated,
   Dimensions,
-  Easing,
   KeyboardAvoidingView,
   Modal,
   PanResponder,
@@ -18,12 +16,17 @@ import {BottomSheetParams} from './types';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import {useHeaderHeight} from '@react-navigation/stack';
+import Animated, {Easing, Extrapolate} from 'react-native-reanimated';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
   const heightDevice = Dimensions.get('screen').height;
   const action = useRef<undefined | string>();
   const insets = useSafeAreaInsets();
+  const heightHeader = useHeaderHeight();
+  const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
+
   const {
     screen: Screen,
     options,
@@ -36,37 +39,50 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     keyboardVerticalOffset,
   }: BottomSheetParams = props.route.params;
 
-  const pan = useRef(
-    new Animated.ValueXY({
-      y: heightDevice,
-      x: 0,
-    })
-  ).current;
-
   const customEasingOpen = Easing.bezier(0.05, 0.7, 0.1, 1);
   const customEasingClose = Easing.bezier(0.3, 0.0, 0.8, 0.15);
 
+  const translateY = useRef(new Animated.Value(heightDevice)).current;
+
+  const openAnimation = Animated.timing(translateY, {
+    toValue: 0,
+    duration: 350,
+    easing: customEasingOpen,
+  });
+
+  const closeAnimation = Animated.timing(translateY, {
+    toValue: heightDevice,
+    duration: 200,
+    easing: customEasingClose,
+  });
+
+  const animatedStyle = {
+    transform: [{translateY}],
+  };
+
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
-      onMoveShouldSetPanResponder: (_, gestureState) => {
-        return draggable && gestureState.dy > 0;
-      },
-      onPanResponderMove: (e, gestureState) => {
-        gestureState.dy > 0 &&
-          Animated.event([null, {dy: pan.y}], {useNativeDriver: false})(
-            e,
-            gestureState
-          );
+      onMoveShouldSetPanResponder: (_, gestureState) =>
+        draggable && gestureState.dy > 0,
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          translateY.setValue(gestureState.dy);
+        }
       },
       onPanResponderRelease: (_, gestureState) => {
         if (gestureState.dy > 100) {
           action.current = 'gesture';
           onDismiss();
         } else {
-          Animated.spring(pan, {
-            toValue: {x: 0, y: 0},
-            useNativeDriver: false,
+          Animated.spring(translateY, {
+            toValue: 0,
+            damping: 20,
+            mass: 1,
+            stiffness: 100,
+            overshootClamping: false,
+            restSpeedThreshold: 0.001,
+            restDisplacementThreshold: 0.001,
           }).start();
         }
       },
@@ -86,13 +102,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
    * emit dismiss event
    */
   useEffect(() => {
-    Animated.timing(pan, {
-      toValue: {x: 0, y: 0},
-      useNativeDriver: false,
-      easing: customEasingOpen,
-      duration: 350,
-    }).start();
-
+    translateY.setValue(heightDevice);
+    openAnimation.start();
     return () => {
       props.route.params?.onDismiss?.(action.current);
     };
@@ -105,16 +116,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     if (barrierDismissible && !force) {
       return;
     }
-    setTimeout(() => {
-      callback?.();
-    }, 300);
-    Animated.timing(pan, {
-      toValue: {x: 0, y: heightDevice},
-      useNativeDriver: false,
-      easing: customEasingClose,
-      duration: 200,
-    }).start(() => {
-      navigator?.pop();
+
+    closeAnimation.start(() => {
+      setImmediate(() => {
+        navigator?.pop();
+        callback?.();
+      });
     });
   };
 
@@ -184,12 +191,13 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       style={StyleSheet.absoluteFillObject}>
       <KeyboardAvoidingView
         behavior={Platform.select({
-          ios: 'padding',
+          ios: 'position',
           android: undefined,
         })}
-        keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
+        keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
         enabled={useKeyboardAvoidingView}
-        style={[Styles.flex, {justifyContent: 'flex-end'}]}>
+        contentContainerStyle={styles.container}
+        style={styles.container}>
         <Pressable
           style={StyleSheet.absoluteFillObject}
           onPress={() => {
@@ -200,10 +208,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             style={[
               styles.overlay,
               {
-                opacity: pan.y.interpolate({
+                opacity: translateY.interpolate({
                   inputRange: [0, heightDevice],
                   outputRange: [1, 0],
-                  extrapolate: 'clamp',
+                  extrapolate: Extrapolate.CLAMP,
                 }),
               },
             ]}
@@ -212,7 +220,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
         <Animated.View
           style={{
-            transform: pan.getTranslateTransform(),
+            // transform: pan.getTranslateTransform(),
+            ...animatedStyle,
           }}>
           {renderHeader()}
           <View style={{backgroundColor: backgroundColor}}>
@@ -232,6 +241,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
   overlay: {
     flex: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.6)',

package/Application/Components/HeaderBackground.tsx

@@ -12,7 +12,6 @@ const LinearGradientAnimated = Animated.createAnimatedComponent(LinearGradient);
  * header background for default
  */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
-  image,
   animatedValue = new Animated.Value(0),
   useGradient = true,
   useShadowHeader = true,
@@ -20,13 +19,8 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   headerBackground,
 }) => {
   const {theme} = useContext(ApplicationContext);
-
   const gradientColor = customGradientColor ?? theme.colors.gradient;
-
-  let headerImage = headerBackground ?? theme.assets?.headerBackground;
-  if (image === null) {
-    headerImage = undefined;
-  }
+  const headerImage = headerBackground ?? theme.assets?.headerBackground;
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],
@@ -39,6 +33,10 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
     extrapolate: 'clamp',
   });
 
+  if (Platform.OS === 'android' && headerImage) {
+    useShadowHeader = false;
+  }
+
   return (
     <View style={Styles.flex}>
       <Animated.View

package/Application/Components/HeaderExtendHeader.tsx

@@ -46,7 +46,6 @@ const HeaderExtendHeader: React.FC<{
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
-  const isIos = Platform.OS === 'ios';
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],
@@ -89,15 +88,17 @@ const HeaderExtendHeader: React.FC<{
     extrapolate: 'clamp',
   });
 
+  if (Platform.OS === 'android' && headerBackground) {
+    useShadowHeader = false;
+  }
+
   if (inputSearchProps) {
     return (
       <>
         <Animated.View style={{height: height}} />
         <Animated.View
           style={[
-            isIos && useShadowHeader
-              ? styles.shadowHeader
-              : styles.dividerHeader,
+            useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
             {
               position: 'absolute',
               width: '100%',

package/Application/Components/HeaderRight.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useState} from 'react';
 import {
   Platform,
   StyleSheet,
@@ -90,14 +90,17 @@ const HeaderToolkitAction: React.FC<any> = ({
   /**
    * check app is favorite
    */
-  const checkAppIsFavorite = () =>
-    navigator?.maxApi?.dispatchFunction?.(
-      'isFavoriteApp',
-      context?.code,
-      (result: boolean) => {
-        setIsFavorite(result);
-      }
-    );
+  const checkAppIsFavorite = useCallback(
+    () =>
+      navigator?.maxApi?.dispatchFunction?.(
+        'isFavoriteApp',
+        {code: context?.code},
+        (result: boolean) => {
+          setIsFavorite(result);
+        }
+      ),
+    [context]
+  );
 
   /**
    * close navigation container
@@ -153,6 +156,7 @@ const HeaderToolkitAction: React.FC<any> = ({
         item: {
           key: 'onFavorite',
         },
+        context,
       },
       ({success}: {success: boolean}) => {
         if (success) {
@@ -217,17 +221,22 @@ const HeaderToolkitAction: React.FC<any> = ({
       screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
     });
 
-    navigator?.maxApi?.dispatchFunction?.('showTools', tools, (key: string) => {
-      for (const group of tools) {
-        const pressedTool = group?.items?.find?.(
-          (tool: Tool) => tool?.key === key
-        );
-        if (pressedTool) {
-          pressedTool?.onPress();
-          break;
+    navigator?.maxApi?.dispatchFunction?.(
+      'showTools',
+      tools,
+      context,
+      (key: string) => {
+        for (const group of tools) {
+          const pressedTool = group?.items?.find?.(
+            (tool: Tool) => tool?.key === key
+          );
+          if (pressedTool) {
+            pressedTool?.onPress();
+            break;
+          }
         }
       }
-    });
+    );
   };
 
   let iconShortcut = isFavorite ? 'pin_star_checked' : 'pin_star';

package/Application/ModalScreen.tsx

@@ -1,6 +1,7 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {
   Animated,
+  Easing,
   KeyboardAvoidingView,
   Platform,
   Pressable,
@@ -38,11 +39,13 @@ const Modal: React.FC<ModalParams> = props => {
     Animated.parallel([
       Animated.timing(opacity, {
         toValue: 1,
-        duration: 400,
+        duration: 250,
         useNativeDriver: true,
       }),
-      Animated.spring(scale, {
+      Animated.timing(scale, {
         toValue: 1,
+        duration: 250,
+        easing: Easing.bezier(0.2, 0.0, 0, 1.0),
         useNativeDriver: true,
       }),
     ]).start();
@@ -52,7 +55,7 @@ const Modal: React.FC<ModalParams> = props => {
     };
   }, [opacity, scale]);
 
-  const onDismiss = () => {
+  const onDismiss = (callback = () => {}) => {
     if (barrierDismissible) {
       return;
     }
@@ -65,9 +68,11 @@ const Modal: React.FC<ModalParams> = props => {
       Animated.timing(scale, {
         toValue: 0.8,
         duration: 200,
+        easing: Easing.linear,
         useNativeDriver: true,
       }),
     ]).start(() => {
+      callback();
       navigator?.pop();
     });
   };
@@ -76,7 +81,9 @@ const Modal: React.FC<ModalParams> = props => {
     <KeyboardAvoidingView
       style={Styles.flexCenter}
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
-      <Pressable style={StyleSheet.absoluteFillObject} onPress={onDismiss}>
+      <Pressable
+        style={StyleSheet.absoluteFillObject}
+        onPress={() => onDismiss()}>
         <Animated.View style={[styles.overlayContent, {opacity}]} />
       </Pressable>
       <Animated.View
@@ -87,7 +94,7 @@ const Modal: React.FC<ModalParams> = props => {
           },
           modalStyle,
         ]}>
-        <Component {...params} />
+        <Component {...params} onRequestClose={onDismiss} />
       </Animated.View>
     </KeyboardAvoidingView>
   );

package/Application/NavigationContainer.tsx

@@ -34,6 +34,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
+  const [currentContext, setCurrentContext] = useState({});
 
   let config: any = null;
   try {
@@ -107,88 +108,100 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const headerBackground = config?.headerBar || theme.assets?.headerBackground;
   const headerGradient = config?.headerGradient || theme.colors?.gradient;
 
+  navigator.current.setCurrentContext = setCurrentContext;
+
   return (
     <SafeAreaProvider>
-      <ApplicationContext.Provider
+      <MiniAppContext.Provider
         value={{
-          navigator: navigator.current,
-          theme: {
-            ...theme,
-            colors: {
-              ...theme.colors,
-              gradient: headerGradient,
-            },
-            assets: {
-              ...theme.assets,
-              headerBackground,
-            },
-          },
-          showGrid,
-          translate,
+          ...context,
+          ...currentContext,
         }}>
-        <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,
+        <ApplicationContext.Provider
+          value={{
+            navigator: navigator.current,
+            theme: {
+              ...theme,
+              colors: {
+                ...theme.colors,
+                gradient: headerGradient,
+              },
+              assets: {
+                ...theme.assets,
+                headerBackground,
+              },
             },
-          }}
-          ref={navigationRef}
-          onReady={() => {
-            isReady.current = true;
-            routes.current = navigationRef.current?.getRootState?.()?.routes;
-            maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
-              onScreenNavigated(data?.screenName, screen?.name, 'push');
-              maxApi?.setObserver('CURRENT_SCREEN', {screenName: screen?.name});
-            });
-          }}
-          onStateChange={state => {
-            const lastedRoute: any = state?.routes?.[state?.routes?.length - 1];
-            const oldRoute: any = routes.current?.[routes.current?.length - 1];
-            const lasted = lastedRoute?.params?.screen;
-            const previous = oldRoute?.params?.screen;
-            const preScreenName = previous?.name ?? previous?.type?.name;
-            const screenName = lasted?.name ?? lasted?.type?.name;
+            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={navigationRef}
+            onReady={() => {
+              isReady.current = true;
+              routes.current = navigationRef.current?.getRootState?.()?.routes;
+              maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
+                onScreenNavigated(data?.screenName, screen?.name, 'push');
+                maxApi?.setObserver('CURRENT_SCREEN', {
+                  screenName: screen?.name,
+                });
+              });
+            }}
+            onStateChange={state => {
+              const lastedRoute: any =
+                state?.routes?.[state?.routes?.length - 1];
+              const oldRoute: any =
+                routes.current?.[routes.current?.length - 1];
+              const lasted = lastedRoute?.params?.screen;
+              const previous = oldRoute?.params?.screen;
+              const preScreenName = previous?.name ?? previous?.type?.name;
+              const screenName = lasted?.name ?? lasted?.type?.name;
 
-            let action = 'push';
-            if (routes.current?.length > (state?.routes?.length ?? 0)) {
-              action = 'back';
-            }
-            onScreenNavigated(preScreenName, screenName, action);
-            maxApi?.setObserver('CURRENT_SCREEN', {screenName});
-            routes.current = state?.routes;
-          }}
-          independent={true}>
-          <Stack.Navigator initialRouteName="Stack" headerMode="screen">
-            <Stack.Screen
-              name="Stack"
-              component={StackScreen}
-              initialParams={{screen, initialParams}}
-              options={{
-                ...getStackOptions(),
-                ...(options as StackNavigationOptions),
-              }}
-            />
-            <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>
+              let action = 'push';
+              if (routes.current?.length > (state?.routes?.length ?? 0)) {
+                action = 'back';
+              }
+              onScreenNavigated(preScreenName, screenName, action);
+              maxApi?.setObserver('CURRENT_SCREEN', {screenName});
+              routes.current = state?.routes;
+            }}
+            independent={true}>
+            <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+              <Stack.Screen
+                name="Stack"
+                component={StackScreen}
+                initialParams={{screen, initialParams}}
+                options={{
+                  ...getStackOptions(),
+                  ...(options as StackNavigationOptions),
+                }}
+              />
+              <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>
+      </MiniAppContext.Provider>
     </SafeAreaProvider>
   );
 };

package/Application/Navigator.ts

@@ -6,7 +6,6 @@ class Navigator {
   isReady?: any;
   maxApi?: any;
   dismissData?: any;
-  toolkitCallback?: (key: string) => void;
 
   constructor(navigation: any, isReady: any) {
     this.ref = navigation;
@@ -148,11 +147,16 @@ class Navigator {
   };
 
   /**
-   * set callback function for toolkit
-   * @param callback
+   * set app context using for features of kit
+   * @param context
    */
-  setToolkitCallback = (callback: (key: string) => void) => {
-    this.toolkitCallback = callback;
+  setCurrentContext = (context: {
+    code?: string;
+    name?: {vi: string; en: string};
+    description?: {vi: string; en: string};
+    icon?: string;
+  }) => {
+    console.log(context);
   };
 }
 

package/Application/index.ts

@@ -11,6 +11,7 @@ import {
   HeaderTitle,
   NavigationButton,
 } from './Components';
+import {setAutomationID} from './utils';
 
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
@@ -32,4 +33,5 @@ export {
   Screen,
   BottomTab,
   HeaderAnimated,
+  setAutomationID,
 };

package/Application/types.ts

@@ -185,7 +185,6 @@ export interface HeaderBackProps extends NavigationButtonProps {
 }
 
 export type HeaderBackgroundProps = {
-  image?: string | null;
   animatedValue?: Animated.Value;
   useGradient?: boolean;
   useShadowHeader?: boolean;

package/Application/utils.tsx

@@ -12,7 +12,7 @@ import {
 } from './Components';
 import {HeaderTitleProps, NavigationOptions} from './types';
 import {Colors} from '../Consts';
-import {Animated} from 'react-native';
+import {Animated, Platform} from 'react-native';
 
 /**
  * default options for stack screen
@@ -26,32 +26,6 @@ const getStackOptions = (): StackNavigationOptions => {
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
     gestureEnabled: false,
-    cardStyleInterpolator: ({current: {progress}, layouts}) => ({
-      cardStyle: {
-        transform: [
-          {
-            translateX: progress.interpolate({
-              inputRange: [0, 1],
-              outputRange: [layouts.screen.width, 0],
-            }),
-          },
-        ],
-      },
-    }),
-    transitionSpec: {
-      open: {
-        animation: 'timing',
-        config: {
-          duration: 300,
-        },
-      },
-      close: {
-        animation: 'timing',
-        config: {
-          duration: 300,
-        },
-      },
-    },
   };
 };
 
@@ -180,10 +154,25 @@ const exportHeaderTitle = (
   return {};
 };
 
+const setAutomationID = (accessibilityLabel = '') => {
+  if (Platform.OS === 'ios') {
+    return {
+      accessible: true,
+      testID: accessibilityLabel,
+      accessibilityLabel: undefined,
+    };
+  } else {
+    return {
+      accessibilityLabel,
+    };
+  }
+};
+
 export {
   getStackOptions,
   getDialogOptions,
   getModalOptions,
   getOptions,
   exportHeaderTitle,
+  setAutomationID,
 };

package/Input/Input.tsx

@@ -8,7 +8,6 @@ import React, {
 } from 'react';
 import {
   NativeSyntheticEvent,
-  Platform,
   TextInput,
   TextInputFocusEventData,
   TouchableOpacity,
@@ -176,13 +175,6 @@ const Input = forwardRef(
         iconTintColor = disabledColor;
       }
 
-      if (secureTextEntry) {
-        keyboardType = Platform.select({
-          ios: 'ascii-capable',
-          android: 'visible-password',
-        });
-      }
-
       return (
         <View
           style={[

package/Popup/PopupNotify.tsx

@@ -24,6 +24,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   primary,
   buttonDirection = 'row',
   onIconClose,
+  onRequestClose,
 }) => {
   const context = useContext<any>(MiniAppContext);
   const {theme, navigator, translate} = useContext(ApplicationContext);
@@ -73,8 +74,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * @param callback
    */
   const onAction = (callback?: () => void) => {
-    navigator?.pop();
-    callback?.();
+    if (typeof onRequestClose === 'function') {
+      onRequestClose?.(callback);
+    } else {
+      navigator?.pop();
+      callback?.();
+    }
   };
 
   /**

package/Popup/PopupPromotion.tsx

@@ -10,6 +10,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   id,
   image,
   onIconClose,
+  onRequestClose,
 }) => {
   const context = useContext<any>(MiniAppContext);
   const {theme, navigator} = useContext(ApplicationContext);
@@ -45,6 +46,19 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
     };
   }, []);
 
+  /**
+   * on action popup
+   * @param callback
+   */
+  const onAction = (callback?: () => void) => {
+    if (typeof onRequestClose === 'function') {
+      onRequestClose?.(callback);
+    } else {
+      navigator?.pop();
+      callback?.();
+    }
+  };
+
   /**
    * build close action
    */
@@ -55,8 +69,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
           accessibilityLabel={'ic_popup_close'}
           onPress={() => {
             closeAction.current = 'icon_close';
-            navigator?.pop();
-            onIconClose?.();
+            onAction(onIconClose);
           }}
           style={styles.iconButton}>
           <View

package/Popup/types.ts

@@ -47,6 +47,11 @@ export type PopupNotifyProps = {
    * `onIconClose`: Optional. A callback function that is called when the close icon in the PopupNotify component is pressed.
    */
   onIconClose?: () => void;
+
+  /**
+   * onRequestClose on request close for modal
+   */
+  onRequestClose?: (callback?: () => void) => void;
 };
 
 export type PopupPromotionProps = {
@@ -64,6 +69,11 @@ export type PopupPromotionProps = {
    * `onClose`: Optional. A callback function that is called when the PopupPromotion component is closed.
    */
   onIconClose?: () => void;
+
+  /**
+   * onRequestClose on request close for modal
+   */
+  onRequestClose?: (callback?: () => void) => void;
 };
 
 type PopupAction = {

package/Text/index.tsx

@@ -2,8 +2,8 @@ import React, {useContext} from 'react';
 import {Text as RNText, TextProps as RNTextProps} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
-import {ApplicationContext} from '../Application';
-import {getAccessibilityID, scaleSize} from './utils';
+import {ApplicationContext, setAutomationID} from '../Application';
+import {scaleSize} from './utils';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -155,7 +155,7 @@ const Text: React.FC<TextProps> = ({
   return (
     <RNText
       {...rest}
-      {...getAccessibilityID(rest.accessibilityLabel)}
+      {...setAutomationID(rest.accessibilityLabel)}
       style={[
         style,
         textStyle,

package/Text/utils.ts

@@ -1,4 +1,4 @@
-import {Dimensions, Platform} from 'react-native';
+import {Dimensions} from 'react-native';
 
 const deviceWidth = Dimensions.get('window').width;
 const DEFAULT_SCREEN_SIZE = 375;
@@ -11,17 +11,5 @@ const scaleSize = (size: number) => {
 
   return size;
 };
-const getAccessibilityID = (accessibilityLabel = '') => {
-  if (Platform.OS === 'ios') {
-    return {
-      accessible: true,
-      testID: accessibilityLabel,
-      accessibilityLabel: undefined,
-    };
-  } else {
-    return {
-      accessibilityLabel,
-    };
-  }
-};
-export {scaleSize, getAccessibilityID};
+
+export {scaleSize};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.111.1-beta.2",
+  "version": "0.111.1-beta.20",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},
@@ -42,6 +42,8 @@
     "react-scanner": "^1.1.0",
     "@types/color": "3.0.6"
   },
-  "author": "@momo-kits/foundation",
-  "license": "ISC"
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MoMo"
 }

package/publish.sh

@@ -1,5 +1,6 @@
 #!/bin/bash
 
+
 if [ "$1" == "stable" ]; then
   npm version $(npm view @momo-kits/foundation@stable version)
   npm version patch