@momo-kits/foundation 0.89.4-rc.4 → 0.89.4-react-native.0.71.1

package/Application/BottomTab.tsx

@@ -62,9 +62,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
     <Tab.Navigator
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
+      screenOptions={{headerShown: false}}
       tabBarOptions={{
         style: {
           height: 68 + Math.min(insets.bottom, 21),
+          borderWidth: 0,
         },
         tabStyle: {
           height: 68,

package/Application/Components.tsx

@@ -287,7 +287,6 @@ const HeaderToolkitAction: React.FC<any> = ({
   preventBack,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const miniContext = useContext(MiniAppContext);
   const [toolConfig, setToolConfig] = useState<any>();
   const {onAction} = toolConfig ?? {};
 
@@ -297,12 +296,10 @@ const HeaderToolkitAction: React.FC<any> = ({
   }
 
   useEffect(() => {
-    if (miniContext?.toolkitConfig?.hidden === false) {
-      if (navigator?.toolkitConfig) {
-        setToolConfig(navigator?.toolkitConfig);
-      } else {
-        getToolkitConfig();
-      }
+    if (navigator?.toolkitConfig) {
+      setToolConfig(navigator?.toolkitConfig);
+    } else {
+      getToolkitConfig();
     }
   }, []);
 

package/Application/StackScreen.tsx

@@ -3,11 +3,7 @@ import {ScreenParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext} from './index';
 import {GridSystem} from '../Layout';
-import {useHeaderHeight} from '@react-navigation/stack';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
+import {useHeaderHeight} from '@react-navigation/elements';
 
 const StackScreen: React.FC<ScreenParams> = props => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
@@ -65,18 +61,10 @@ const StackScreen: React.FC<ScreenParams> = props => {
   }, []);
 
   return (
-    <ScreenContext.Provider
-      value={{
-        appId: context.appId,
-        code: context.code,
-        screenName: Component.name,
-        autoTracking: (data: any) => {
-          navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
-        },
-      }}>
+    <>
       <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}
-    </ScreenContext.Provider>
+    </>
   );
 };
 

package/Application/types.ts

@@ -76,7 +76,7 @@ export type MiniAppInfo = {
   appId: string;
   buildNumber: number;
   flowPartnerId?: string;
-  toolkitConfig?: any;
+  toolkitConfig?: object;
   fromCode?: string;
 };
 

package/Application/utils.tsx

@@ -148,39 +148,4 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-const  formatComponentName= (word: string) =>{
-  const accentsMap = {
-    'a': 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
-    'A': 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
-    'e': 'é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ',
-    'E': 'É|È|Ẻ|Ẽ|Ẹ|Ê|Ế|Ề|Ể|Ễ|Ệ',
-    'i': 'í|ì|ỉ|ĩ|ị',
-    'I': 'Í|Ì|Ỉ|Ĩ|Ị',
-    'o': 'ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ',
-    'O': 'Ó|Ò|Ỏ|Õ|Ọ|Ô|Ố|Ồ|Ổ|Ỗ|Ộ|Ơ|Ớ|Ờ|Ở|Ỡ|Ợ',
-    'u': 'ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự',
-    'U': 'Ú|Ù|Ủ|Ũ|Ụ|Ư|Ứ|Ừ|Ử|Ữ|Ự',
-    'y': 'ý|ỳ|ỷ|ỹ|ỵ',
-    'Y': 'Ý|Ỳ|Ỷ|Ỹ|Ỵ',
-    'd': 'đ',
-    'D': 'Đ'
-  };
-
-  for (const [nonAccent, accentGroup] of Object.entries(accentsMap)) {
-    const accents = new RegExp(accentGroup, 'g');
-    word = word.replace(accents, nonAccent);
-  }
-
-  word = word.replace(/\s+/g, '_').toLowerCase();
-
-  return word;
-}
-
-const formatNameLength = (name: string) =>{
-  let formattedName = name
-  if (formattedName.length > 100) {
-    formattedName = formattedName.substring(0, 100);
-  }
-  return formattedName
-}
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions, formatComponentName, formatNameLength};
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

package/Button/index.tsx

@@ -6,6 +6,7 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
+
 import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
@@ -14,11 +15,6 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -74,10 +70,6 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  A callback function that is called when the button is pressed.
    */
   onPress: () => void;
-
-  params?: any;
-
-  componentId?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -90,8 +82,6 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
-  params,
-  componentId,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -104,8 +94,6 @@ const Button: FC<ButtonProps> = ({
       end: {x: 0, y: 0.5},
     };
   }
-
-  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -303,34 +291,19 @@ const Button: FC<ButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Button',
-        params,
-        state: loading
-          ? 'loading'
-          : type === 'disabled'
-          ? 'disabled'
-          : 'enabled',
-        componentId,
-        componentValue: formatComponentName(title),
-        action: 'click',
-      }}>
-      <TouchableOpacity
-        {...rest}
-        activeOpacity={activeOpacity}
-        onPress={onPressButton}
-        style={buttonStyle}>
-        {renderLeading()}
-        {renderTitle()}
-        {renderTrailing()}
-        {gradientPros && (
-          <AnimationLinear {...gradientPros} style={styles.gradientView} />
-        )}
-        {gradientPros && <View style={styles.strokeView} />}
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      {...rest}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      {renderLeading()}
+      {renderTitle()}
+      {renderTrailing()}
+      {gradientPros && (
+        <AnimationLinear {...gradientPros} style={styles.gradientView} />
+      )}
+      {gradientPros && <View style={styles.strokeView} />}
+    </TouchableOpacity>
   );
 };
 

package/CheckBox/index.tsx

@@ -5,11 +5,6 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {formatNameLength} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -18,11 +13,8 @@ const CheckBox: FC<CheckBoxProps> = ({
   style,
   label,
   indeterminate,
-  params,
-  componentId,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
@@ -43,38 +35,26 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Button',
-        params,
-        state: disabled ? 'disabled' : 'filled',
-        componentId,
-        action: 'click',
-        componentLabel: formatNameLength(label || ''),
-        componentValue: indeterminate ? 'indetermine' : value,
-      }}>
-      <TouchableOpacity
-        activeOpacity={0.8}
-        onPress={() => onChange?.(!value)}
-        disabled={disabled}
-        style={[style, styles.container]}>
-        <View
-          style={[
-            {borderColor, backgroundColor, borderWidth: 1},
-            styles.checkbox,
-          ]}>
-          {haveValue && (
-            <Icon
-              color={theme.colors.background.surface}
-              size={20}
-              source={iconSource}
-            />
-          )}
-        </View>
-        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={() => onChange?.(!value)}
+      disabled={disabled}
+      style={[style, styles.container]}>
+      <View
+        style={[
+          {borderColor, backgroundColor, borderWidth: 1},
+          styles.checkbox,
+        ]}>
+        {haveValue && (
+          <Icon
+            color={theme.colors.background.surface}
+            size={20}
+            source={iconSource}
+          />
+        )}
+      </View>
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+    </TouchableOpacity>
   );
 };
 

package/CheckBox/types.ts

@@ -35,8 +35,4 @@ export type CheckBoxProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-
-  params?: any
-
-  componentId?: string
 };

package/IconButton/index.tsx

@@ -9,11 +9,6 @@ import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
@@ -31,10 +26,6 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * Optional. Defines the size of the IconButton.
    */
   size?: 'large' | 'small';
-
-  params?: any;
-
-  componentId?: string;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -42,12 +33,9 @@ const IconButton: React.FC<IconButtonProps> = ({
   icon,
   size,
   onPress,
-  params,
-  componentId,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -133,24 +121,13 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'IconButton',
-        params,
-        state: type === 'disabled' ? 'disabled' : 'enabled',
-        componentId,
-        componentValue: formatComponentName(icon),
-        action: 'click',
-      }}>
-      <TouchableOpacity
-        {...rest}
-        activeOpacity={activeOpacity}
-        onPress={onPressButton}
-        style={buttonStyle}>
-        <Icon size={iconSize} source={icon} color={getIconColor()} />
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      {...rest}
+      activeOpacity={activeOpacity}
+      onPress={onPressButton}
+      style={buttonStyle}>
+      <Icon size={iconSize} source={icon} color={getIconColor()} />
+    </TouchableOpacity>
   );
 };
 

package/Image/index.tsx

@@ -1,12 +1,13 @@
 import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
-import FastImage from 'react-native-fast-image';
+
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
 import {ImageProps} from './types';
+import FastImage from 'react-native-fast-image';
 
 type Status = 'success' | 'loading' | 'error';
 

package/Input/Input.tsx

@@ -13,11 +13,6 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
   (
@@ -44,8 +39,6 @@ const Input = forwardRef(
       onPressIcon,
       secureTextEntry,
       style,
-      params,
-      componentId,
       ...props
     }: InputProps,
     ref,
@@ -55,7 +48,6 @@ const Input = forwardRef(
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const screenInfo = useContext<any>(ScreenContext);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -188,34 +180,11 @@ const Input = forwardRef(
       );
     };
 
-    let inputState = 'active';
-
-    if (value && value?.length > 0) {
-      inputState = 'filled';
-    }
-    if (errorMessage && errorMessage?.length > 0) {
-      inputState = 'error';
-    }
-
-    if (disabled) {
-      inputState = 'disabled';
-    }
-
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'Input',
-          params,
-          componentLabel: formatComponentName(floatingValue || ''),
-          state: inputState,
-          componentId,
-        }}>
-        <View style={[style, styles.wrapper]}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </View>
-      </ScreenContext.Provider>
+      <View style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
     );
   },
 );

package/Input/InputDropDown.tsx

@@ -7,11 +7,6 @@ import {InputDropDownProps} from './index';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputDropDown = ({
   value,
@@ -31,13 +26,10 @@ const InputDropDown = ({
   leadingIcon,
   leadingIconColor,
   style,
-  params,
-  componentId,
   ...props
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
-  const screenInfo = useContext<any>(ScreenContext);
 
   const renderIcon = (color: string | undefined) => {
     if (loading) {
@@ -112,22 +104,10 @@ const InputDropDown = ({
   };
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'InputOTP',
-        params,
-        state: 'enabled',
-        componentLabel: formatComponentName(floatingValue || ''),
-        componentId,
-      }}>
-      <TouchableOpacity
-        onPress={onPress}
-        style={[style, full && styles.wrapper]}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity onPress={onPress} style={[style, full && styles.wrapper]}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+    </TouchableOpacity>
   );
 };
 

package/Input/InputMoney.tsx

@@ -18,11 +18,6 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputMoney = forwardRef(
   (
@@ -41,9 +36,7 @@ const InputMoney = forwardRef(
       required = false,
       errorSpacing,
       style,
-      params,
       defaultValue = '',
-      componentId,
       ...props
     }: InputMoneyProps,
     ref,
@@ -51,7 +44,6 @@ const InputMoney = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const screenInfo = useContext<any>(ScreenContext);
 
     const validateText = (text: string) => {
       const valueFormat = formatMoneyToNumber(text, 'đ');
@@ -159,34 +151,11 @@ const InputMoney = forwardRef(
       );
     };
 
-    let inputState = 'active';
-
-    if (value && value?.length > 0) {
-      inputState = 'filled';
-    }
-    if (errorMessage && errorMessage?.length > 0) {
-      inputState = 'error';
-    }
-
-    if (disabled) {
-      inputState = 'disabled';
-    }
-
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'InputMoney',
-          params,
-          componentLabel: formatComponentName(floatingValue || ''),
-          state: inputState,
-          componentId,
-        }}>
-        <View style={[style, styles.wrapper]}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </View>
-      </ScreenContext.Provider>
+      <View style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
     );
   },
 );

package/Input/InputOTP.tsx

@@ -21,11 +21,6 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatComponentName} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
@@ -83,9 +78,7 @@ const InputOTP = forwardRef(
       onFocus,
       onBlur,
       dataType = 'number',
-      params,
       style,
-      componentId,
       ...props
     }: InputOTPProps,
     ref,
@@ -95,7 +88,6 @@ const InputOTP = forwardRef(
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
     const {theme} = useContext(ApplicationContext);
-    const screenInfo = useContext<any>(ScreenContext);
 
     useImperativeHandle(ref, () => ({
       onChangeText: (text: string) => {
@@ -229,23 +221,13 @@ const InputOTP = forwardRef(
     };
 
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'InputOTP',
-          params,
-          componentLabel: formatComponentName(floatingValue || ''),
-          state: 'enabled',
-          componentId,
-        }}>
-        <TouchableOpacity
-          activeOpacity={1}
-          onPress={onFocusInput}
-          style={[style, styles.otpWrapper]}>
-          {renderInputView()}
-          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-        </TouchableOpacity>
-      </ScreenContext.Provider>
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={onFocusInput}
+        style={[style, styles.otpWrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </TouchableOpacity>
     );
   },
 );

package/Input/InputSearch.tsx

@@ -13,10 +13,6 @@ import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const InputSearch = forwardRef(
   (
     {
@@ -32,9 +28,7 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
-      hasColorBG = true,
-      params,
-      componentId,
+        hasColorBG = true,
       ...props
     }: InputSearchProps,
     ref,
@@ -43,7 +37,6 @@ const InputSearch = forwardRef(
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const screenInfo = useContext<any>(ScreenContext);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -124,56 +117,33 @@ const InputSearch = forwardRef(
       );
     };
 
-    let inputState = 'empty';
-
-    if (focused) {
-      inputState = 'focus';
-    }
-
-    if (value && value?.length > 0) {
-      inputState = 'filled';
-    }
-
-    const backgroundColor = hasColorBG
-      ? theme.colors.background.default
-      : theme.colors.background.surface;
+    const backgroundColor = hasColorBG ?theme.colors.background.default:theme.colors.background.surface
     return (
-      <ScreenContext.Provider
-        value={{
-          ...screenInfo,
-          componentName: 'InputSearch',
-          params,
-          state: inputState,
-          componentId,
-        }}>
-        <View style={[style, styles.searchInputContainer]}>
-          <View
-            style={[
-              styles.searchInputWrapper,
-              {
-                backgroundColor,
-                borderColor: theme.colors.background.surface,
-              },
-            ]}>
-            <Icon
-              source={'navigation_search'}
-              size={24}
-              color={theme.colors.text.hint}
-            />
-            {renderInputView()}
-            {renderIconView()}
-          </View>
-          {showButtonText && (
-            <TouchableOpacity onPress={onPressButtonText}>
-              <Text
-                typography={'action_default_bold'}
-                style={styles.textButton}>
-                {buttonText}
-              </Text>
-            </TouchableOpacity>
-          )}
+      <View style={[style, styles.searchInputContainer]}>
+        <View
+          style={[
+            styles.searchInputWrapper,
+            {
+              backgroundColor,
+              borderColor: theme.colors.background.surface,
+            }
+          ]}>
+          <Icon
+            source={'navigation_search'}
+            size={24}
+            color={theme.colors.text.hint}
+          />
+          {renderInputView()}
+          {renderIconView()}
         </View>
-      </ScreenContext.Provider>
+        {showButtonText && (
+          <TouchableOpacity onPress={onPressButtonText}>
+            <Text typography={'action_default_bold'} style={styles.textButton}>
+              {buttonText}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
     );
   },
 );

package/Input/index.tsx

@@ -80,9 +80,6 @@ export interface InputProps extends TextInputProps {
   fontWeight?: 'Regular' | 'Bold';
 
   onPressIcon?: () => void;
-
-  params?: any;
-  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -124,14 +121,7 @@ export interface InputSearchProps extends TextInputProps {
    */
   icon?: string;
 
-  /**
-   *
-   */
-  hasColorBG?: boolean;
-
-  params?: any;
-
-  componentId?: string;
+  hasColorBG?: boolean
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
@@ -255,22 +245,7 @@ export interface InputDropDownProps {
    */
   leadingIconColor?: string;
 
-  /**
-   * Optional. params for element tracking.
-   */
-  params?: {
-    [key: string]: any;
-  };
-
-  /**
-   * component id for element tracking.
-   */
-  componentId?: string;
-
-  /**
-   * Optional. Represents the style of the InputDropDown component.
-   */
-  style?: ViewStyle | ViewStyle[];
+  style: ViewStyle | ViewStyle[];
 }
 
 export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};

package/Layout/Screen.tsx

@@ -8,7 +8,7 @@ import {
   View,
   ViewProps,
 } from 'react-native';
-import {useHeaderHeight} from '@react-navigation/stack';
+import {useHeaderHeight} from '@react-navigation/elements';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import React, {
   forwardRef,

package/Layout/index.ts

@@ -7,6 +7,7 @@ import {GridContextProps} from './types';
 import Item from './Item';
 import ItemList from './ItemList';
 import ItemSectionList from './ItemSectionList';
+import Screen from './Screen';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
@@ -24,4 +25,5 @@ export {
   Item,
   ItemList,
   ItemSectionList,
+  Screen,
 };

package/Loader/DotLoader.tsx

@@ -14,7 +14,7 @@ const DotLoader: FC<LoaderProps> = ({color}) => {
     color ?? theme.colors.primary,
   ];
 
-  let source: any = animation;
+  let source: any = require('../Assets/DotAnimation.json');
   source.assets[0].layers[0].shapes[0].it.forEach((item: any) => {
     if (item.ty === 'fl' && item.c) {
       item.c.k.forEach((fillItem: any, index: number) => {

package/Loader/Spinner.tsx

@@ -1,6 +1,5 @@
 import React, {FC, useContext} from 'react';
 import AnimatedLottieView from 'lottie-react-native';
-import animation from '../Assets/SpinnerAnimation.json';
 import {hexToRGBA} from './utils';
 import {ApplicationContext} from '../Application';
 import {LoaderProps} from './types';
@@ -8,7 +7,7 @@ import {LoaderProps} from './types';
 const Spinner: FC<LoaderProps> = ({color}) => {
   const {theme} = useContext(ApplicationContext);
 
-  let source: any = animation;
+  let source: any = require('../Assets/DotAnimation.json');
   source.assets[0].layers.forEach((layer: any) => {
     layer.shapes[0].it.forEach((item: any) => {
       if (item.ty === 'fl' && item.c) {

package/Radio/index.tsx

@@ -6,11 +6,6 @@ import {Text} from '../Text';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatNameLength} from '../Application/utils';
-
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -19,11 +14,8 @@ const Radio: FC<RadioProps> = ({
   onChange,
   label,
   style,
-  params,
-  componentId,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -46,38 +38,26 @@ const Radio: FC<RadioProps> = ({
   }
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Button',
-        params,
-        state: disabled ? 'disabled' : 'enabled',
-        componentId,
-        componentLabel: formatNameLength(label || ''),
-        componentValue: value,
-        action: 'click',
-      }}>
-      <TouchableOpacity
-        onPress={onChange}
-        disabled={disabled}
+    <TouchableOpacity
+      onPress={onChange}
+      disabled={disabled}
+      style={[
+        style,
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+      ]}>
+      <View
         style={[
-          style,
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-        ]}>
-        <View
-          style={[
-            styles.radio,
-            checkBoxStyle,
-            disabledStyle,
-            {marginRight: label ? Spacing.XS : 0},
-          ]}
-        />
-        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+          styles.radio,
+          checkBoxStyle,
+          disabledStyle,
+          {marginRight: label ? Spacing.XS : 0},
+        ]}
+      />
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+    </TouchableOpacity>
   );
 };
 

package/Radio/types.ts

@@ -35,9 +35,4 @@ export type RadioProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-
-
-  params?: any
-
-  componentId?: string
 };

package/Switch/index.tsx

@@ -1,17 +1,11 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
 
-const {
-  ScreenContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
 const Switch: FC<SwitchProps> = props => {
-  const {value, onChange, disabled, style, params, componentId} = props;
-  const screenInfo = useContext<any>(ScreenContext);
-
+  const {value, onChange, disabled, style} = props;
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
@@ -21,29 +15,18 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   return (
-    <ScreenContext.Provider
-      value={{
-        ...screenInfo,
-        componentName: 'Button',
-        params,
-        state: disabled ? 'disabled' : 'enabled',
-        componentId,
-        componentValue: value,
-        action: 'click',
-      }}>
-      <TouchableOpacity
-        disabled={disabled}
-        onPress={() => onChange?.(!value)}
-        style={[
-          style,
-          styles.container,
-          {backgroundColor, alignItems: circleAlign},
-        ]}>
-        <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
-          <View style={[styles.circleSmall, {backgroundColor}]} />
-        </View>
-      </TouchableOpacity>
-    </ScreenContext.Provider>
+    <TouchableOpacity
+      disabled={disabled}
+      onPress={() => onChange?.(!value)}
+      style={[
+        style,
+        styles.container,
+        {backgroundColor, alignItems: circleAlign},
+      ]}>
+      <View style={[styles.circle, {backgroundColor: circleBackgroundColor}]}>
+        <View style={[styles.circleSmall, {backgroundColor}]} />
+      </View>
+    </TouchableOpacity>
   );
 };
 

package/Switch/types.ts

@@ -23,8 +23,4 @@ export type SwitchProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-
-  params?: any
-
-  componentId?: string
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.89.4-rc.4",
+    "version": "0.89.4-react-native.0.71.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -10,34 +10,24 @@
         "@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",
+        "@gorhom/bottom-sheet": "4.6.1",
+        "react-native-safe-area-context": "4.9.0",
         "react-native-linear-gradient": "2.8.3",
-        "react-native-gesture-handler": "1.10.3",
-        "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",
-        "@react-navigation/native": "5.9.8",
-        "@react-navigation/routers": "5.7.4",
-        "lottie-react-native": "3.3.2",
-        "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main"
+        "react-native-gesture-handler": "2.16.0",
+        "react-native-fast-image": "8.6.3",
+        "@react-navigation/bottom-tabs": "6.5.20",
+        "@react-navigation/core": "6.4.16",
+        "@react-navigation/native": "6.1.17",
+        "@react-navigation/routers": "6.1.9",
+        "@react-navigation/stack": "6.3.29",
+        "lottie-react-native": "6.7.2"
     },
     "peerDependencies": {
         "react-native": "*"
     },
     "devDependencies": {
-        "@babel/core": "^7.12.9",
-        "@babel/runtime": "^7.12.5",
-        "@react-native-community/eslint-config": "^2.0.0",
-        "@types/jest": "26.0.23",
-        "@types/react-native": "0.64.4",
-        "@types/react-test-renderer": "16.9.2",
-        "babel-jest": "^26.6.3",
-        "eslint": "^7.14.0",
-        "jest": "^26.6.3",
-        "metro-react-native-babel-preset": "^0.64.0",
-        "react-test-renderer": "17.0.1",
-        "typescript": "^4.0.3",
+        "@types/react": "^18.2.6",
+        "typescript": "5.0.4",
         "@momo-platform/versions": "4.1.11",
         "react-scanner": "^1.1.0"
     },