@momo-kits/foundation 0.92.1-tracking.2 → 0.92.1-tracking.20

package/Application/StackScreen.tsx

@@ -1,13 +1,14 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {ScreenParams} from './types';
 import Navigation from './Navigation';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {Alert, InteractionManager} from 'react-native';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const StackScreen: React.FC<ScreenParams> = props => {
@@ -17,25 +18,23 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const timeLoad = useRef(0);
   const timeout = useRef<any>();
 
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
 
-  const {screen: Component, options, params}: ScreenParams = props.route.params;
+  const {screen: Component, options}: ScreenParams = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
   const heightHeader = useHeaderHeight();
 
-  const data = {
+  const params = {
     ...props.route.params,
-    params,
     navigation,
   };
 
-  delete data.screen;
+  delete params.screen;
 
   /**
    * set options for screen
    */
   useLayoutEffect(() => {
-    startTime.current = Date.now();
     InteractionManager.runAfterInteractions(() => {
       navigator?.maxApi?.showToastDebug?.({
         appId: context.appId,
@@ -114,15 +113,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}`,
-            });
-          }, 1000);
+            if (timeLoad.current === 0) {
+              timeLoad.current = endTime.current - startTime.current;
+              navigator?.maxApi?.showToastDebug?.({
+                appId: context.appId,
+                message: `${Component.name} screen_load_time ${timeLoad.current}`,
+              });
+            }
+          }, 2000);
         },
       }}>
-      <Component heightHeader={heightHeader} {...data} />
+      <Component
+        heightHeader={heightHeader}
+        {...params}
+        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,6 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
-  params: Record<string, any>;
   localization?: LocalizationObject;
 };
 
@@ -119,8 +118,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 +153,7 @@ export interface NavigationOptions extends StackNavigationOptions {
   toolkitParams?: {
     pinnedTool?: PinnedToolType;
     runtimeTools?: RuntimeToolType[];
+    preventClose?: PopupNotifyProps;
   };
 }
 
@@ -185,11 +185,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

@@ -7,7 +7,7 @@ import {
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
@@ -18,6 +18,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
@@ -78,6 +79,8 @@ export interface ButtonProps extends TouchableOpacityProps {
   params?: any;
 
   componentId?: string;
+
+  accessibilityID?: object;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -93,10 +96,11 @@ const Button: FC<ButtonProps> = ({
   params,
   componentId,
   accessibilityLabel,
+  accessibilityID,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
-  const {appId, code} = useContext(MiniAppContext)
+  const {appId, code} = useContext<any>(MiniAppContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
   if (gradient?.length > 0 && type == 'primary') {
@@ -303,7 +307,11 @@ 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 +329,7 @@ const Button: FC<ButtonProps> = ({
       }}>
       <TouchableOpacity
         {...rest}
-        {...accessibilityID}
+        {...selfAccessibilityID}
         activeOpacity={activeOpacity}
         onPress={onPressButton}
         style={buttonStyle}>

package/CheckBox/index.tsx

@@ -2,13 +2,14 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
 import {formatNameLength, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const CheckBox: FC<CheckBoxProps> = ({
@@ -21,7 +22,7 @@ const CheckBox: FC<CheckBoxProps> = ({
   params,
   componentId,
 }) => {
-    const {appId} = useContext(MiniAppContext)
+  const {appId} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
@@ -42,7 +43,9 @@ 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
@@ -57,7 +60,7 @@ const CheckBox: FC<CheckBoxProps> = ({
         componentValue: indeterminate ? 'indetermine' : value,
       }}>
       <TouchableOpacity
-          {...accessibilityID}
+        {...accessibilityID}
         activeOpacity={0.8}
         onPress={() => onChange?.(!value)}
         disabled={disabled}

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

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
@@ -17,6 +17,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
@@ -51,7 +52,7 @@ const Input = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
@@ -121,6 +122,11 @@ const Input = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
+      const accessibilityID = getAccessibilityID?.(
+        `${appId}/${screenInfo.screenName}/input_${floatingValue}${
+          disabled && '_disabled'
+        }`,
+      );
 
       return (
         <View
@@ -149,6 +155,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
+              {...accessibilityID}
               editable={!disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
@@ -202,8 +209,6 @@ const Input = forwardRef(
       inputState = 'disabled';
     }
 
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
-
     return (
       <ScreenContext.Provider
         value={{
@@ -214,7 +219,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

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {TextInput, TouchableOpacity, View} from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
@@ -11,6 +11,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputDropDown = ({
@@ -35,7 +36,7 @@ const InputDropDown = ({
   componentId,
   ...props
 }: InputDropDownProps) => {
-    const {appId} = useContext(MiniAppContext)
+  const {appId} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
   const screenInfo = useContext<any>(ScreenContext);
@@ -60,6 +61,11 @@ const InputDropDown = ({
       placeholderColor = disabledColor;
       iconTintColor = disabledColor;
     }
+    const accessibilityID = getAccessibilityID?.(
+      `${appId}/${screenInfo.screenName}/input_${floatingValue}${
+        disabled && '_disabled'
+      }`,
+    );
 
     return (
       <View
@@ -89,6 +95,7 @@ const InputDropDown = ({
           {full && (
             <TextInput
               {...props}
+              {...accessibilityID}
               onPressIn={onPress}
               editable={false}
               textAlignVertical="top"
@@ -112,9 +119,6 @@ const InputDropDown = ({
     );
   };
 
-    const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
-
-
   return (
     <ScreenContext.Provider
       value={{
@@ -126,7 +130,6 @@ const InputDropDown = ({
         componentId,
       }}>
       <TouchableOpacity
-          {...accessibilityID}
         onPress={onPress}
         style={[style, full && styles.wrapper]}>
         {renderInputView()}

package/Input/InputMoney.tsx

@@ -12,7 +12,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
@@ -22,6 +22,7 @@ import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputMoney = forwardRef(
@@ -49,7 +50,7 @@ const InputMoney = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const screenInfo = useContext<any>(ScreenContext);
@@ -104,6 +105,11 @@ const InputMoney = forwardRef(
         placeholderColor = disabledColor;
         iconTintColor = disabledColor;
       }
+      const accessibilityID = getAccessibilityID?.(
+        `${appId}/${screenInfo.screenName}/input_${floatingValue}${
+          disabled && '_disabled'
+        }`,
+      );
 
       return (
         <View
@@ -123,6 +129,7 @@ const InputMoney = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              {...accessibilityID}
               editable={!disabled}
               textAlignVertical="top"
               ref={inputRef}
@@ -173,8 +180,6 @@ const InputMoney = forwardRef(
       inputState = 'disabled';
     }
 
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
-
     return (
       <ScreenContext.Provider
         value={{
@@ -185,9 +190,7 @@ const InputMoney = forwardRef(
           state: inputState,
           componentId,
         }}>
-        <View
-            {...accessibilityID}
-            style={[style, styles.wrapper]}>
+        <View style={[style, styles.wrapper]}>
           {renderInputView()}
           <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
         </View>

package/Input/InputOTP.tsx

@@ -19,17 +19,17 @@ import {CaretProps, InputOTPProps} from './index';
 import {scaleSize, Text} from '../Text';
 import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
 import {formatComponentName, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const OTPCaret: FC<CaretProps> = ({index, length}) => {
   const DURATION = 300;
-    const {appId} = useContext(MiniAppContext)
   const {theme} = useContext(ApplicationContext);
   const opacity = useRef(new Animated.Value(0)).current;
 
@@ -92,7 +92,7 @@ const InputOTP = forwardRef(
     ref,
   ) => {
     const MAX_LENGTH = 10;
-      const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
 
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);
@@ -191,6 +191,9 @@ const InputOTP = forwardRef(
       );
     };
 
+    const accessibilityID = getAccessibilityID?.(
+      `${appId}/${screenInfo.screenName}/input_${floatingValue}`,
+    );
     const renderInputView = () => {
       return (
         <View
@@ -216,6 +219,7 @@ const InputOTP = forwardRef(
           <View style={styles.inputView}>
             <TextInput
               {...props}
+              {...accessibilityID}
               ref={inputRef}
               value={value}
               onChangeText={_onChangeText}
@@ -230,7 +234,6 @@ const InputOTP = forwardRef(
         </View>
       );
     };
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
       <ScreenContext.Provider
@@ -243,7 +246,6 @@ const InputOTP = forwardRef(
           componentId,
         }}>
         <TouchableOpacity
-            {...accessibilityID}
           activeOpacity={1}
           onPress={onFocusInput}
           style={[style, styles.otpWrapper]}>

package/Input/InputSearch.tsx

@@ -7,15 +7,16 @@ import {
   View,
 } from 'react-native';
 import {InputSearchProps} from './index';
-import {ApplicationContext, MiniAppContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
-import {getAccessibilityID} from "../Application/utils";
+import {getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputSearch = forwardRef(
@@ -41,7 +42,7 @@ const InputSearch = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext(MiniAppContext)
+    const {appId} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -66,11 +67,15 @@ 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 +144,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

@@ -17,11 +17,12 @@ import {
 } from './common';
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
-import {ApplicationContext, MiniAppContext} from '../Application';
-import {getAccessibilityID} from "../Application/utils";
+import {ApplicationContext} from '../Application';
+import {getAccessibilityID} from '../Application/utils';
 
 const {
-    ScreenContext,
+  ScreenContext,
+  MiniAppContext,
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const InputTextArea = forwardRef(
@@ -48,8 +49,8 @@ const InputTextArea = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-      const screenInfo = useContext<any>(ScreenContext);
-      const {appId} = useContext(MiniAppContext)
+    const screenInfo = useContext<any>(ScreenContext);
+    const {appId} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -94,6 +95,11 @@ const InputTextArea = forwardRef(
         textColor = disabledColor;
         placeholderColor = disabledColor;
       }
+      const accessibilityID = getAccessibilityID?.(
+        `${appId}/${screenInfo.screenName}/input_${floatingValue}${
+          disabled && '_disabled'
+        }`,
+      );
 
       return (
         <View
@@ -116,6 +122,7 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
+                {...accessibilityID}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -153,12 +160,9 @@ const InputTextArea = forwardRef(
         </View>
       );
     };
-      const accessibilityID = getAccessibilityID(`${appId}|${screenInfo.screenName}|input_${floatingValue}${disabled && "_disabled" }`)
 
     return (
-      <View
-          {...accessibilityID}
-          style={[style, styles.wrapper]}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>

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: {