@eohjsc/react-native-smart-city 0.3.2 → 0.3.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.02",
+  "version": "0.3.05",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -146,6 +146,8 @@
     "react-hooks-global-state": "^1.0.1",
     "react-i18next": "^11.8.12",
     "react-native-alert-async": "^1.0.5",
+    "react-native-android-keyboard-adjust": "^1.2.0",
+    "react-native-android-location-enabler": "^1.2.2",
     "react-native-android-wifi": "^0.0.41",
     "react-native-appearance": "^0.3.4",
     "react-native-base64": "^0.1.0",

package/react-native-smart-city.podspec

@@ -22,7 +22,7 @@ Pod::Spec.new do |s|
   s.requires_arc = true
 
   s.dependency "React"
-  s.dependency "react-native-permissions"
+  s.dependency "RNPermissions"
   # ...
   # s.dependency "..."
 end

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -1,38 +1,51 @@
-import React, { memo, useCallback, useState, useEffect, useMemo } from 'react';
+import React, { memo, useState, useEffect } from 'react';
 import { View } from 'react-native';
 import styles from './ColorPickerTemplateStyles';
 import ColorPicker from 'react-native-wheel-color-picker';
 import { watchMultiConfigs } from '../../iot/Monitor';
 import { useConfigGlobalState } from '../../iot/states';
 
+let isFirstTime = true;
+
+const WheelColorPicker = ({ valueColor, onChangeColor }) => {
+  return (
+    <ColorPicker
+      style={styles.colorPicker}
+      sliderHidden={true}
+      swatches={false}
+      color={valueColor}
+      onColorChangeComplete={onChangeColor}
+      thumbSize={16}
+    />
+  );
+};
+
 const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
   const [valueColorComplete, setValueColorComplete] = useState('');
-  const [isFirstColor, setIsFirstColor] = useState(false);
   const [configValues] = useConfigGlobalState('configValues');
 
-  const onChangeColor = useCallback(
-    (color) => {
-      if (!isFirstColor) {
-        setIsFirstColor(true);
-        return;
-      }
+  const onChangeColor = (color) => {
+    const to = setTimeout(() => {
+      isFirstTime = false;
+      clearTimeout(to);
+    }, 1000);
+
+    !isFirstTime &&
       doAction(
         configuration?.action_color_data,
         JSON.stringify({ value: color })
       );
-    },
-    [configuration?.action_color_data, doAction, isFirstColor]
-  );
-  const valueColor = useMemo(() => {
-    return valueColorComplete || '';
-  }, [valueColorComplete]);
+  };
 
   useEffect(() => {
     const { config } = configuration;
     const configValue = configValues[config];
-    setValueColorComplete(configValue);
-  }, [configuration.config, configValues, configuration]);
+    if (configValue && isFirstTime) {
+      setValueColorComplete(`#${configValue?.toString(16)}`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configValues]);
 
   useEffect(() => {
     if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
@@ -40,15 +53,15 @@ const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
     }
   }, [sensor, configuration.config]);
 
+  useEffect(() => {
+    return () => (isFirstTime = true);
+  }, []);
+
   return (
     <View style={styles.viewPickColor}>
-      <ColorPicker
-        style={styles.colorPicker}
-        sliderHidden={true}
-        swatches={false}
-        color={valueColor}
-        onColorChangeComplete={onChangeColor}
-        thumbSize={16}
+      <WheelColorPicker
+        valueColor={valueColorComplete}
+        onChangeColor={onChangeColor}
       />
     </View>
   );

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 
@@ -7,7 +7,7 @@ import Text from '../Text';
 import { useConfigGlobalState } from '../../iot/states';
 import styles from './NumberUpDownActionTemplateStyle';
 import { watchMultiConfigs } from '../../iot/Monitor';
-import { TESTID } from '../../configs/Constants';
+import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
 
 const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const { configuration, title } = actionGroup;
@@ -25,6 +25,19 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const [value, setValue] = useState();
   const valueDefault = 28;
 
+  useEffect(() => {
+    if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
+      return;
+    }
+    if (
+      !!config &&
+      sensor?.is_managed_by_backend &&
+      sensor.device_type !== 'GOOGLE_HOME'
+    ) {
+      watchMultiConfigs([config]);
+    }
+  }, [sensor, config]);
+
   useEffect(() => {
     if (!config) {
       setValue(valueDefault);
@@ -34,11 +47,9 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     const configValue = configValues[config];
     if (configValue !== null && configValue !== undefined) {
       setValue(configValue);
-    } else {
-      setValue(valueDefault);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [JSON.stringify(configValues)]);
 
   const doActionAndWatchConfig = useCallback(
     async (actionData, actionValue, actionName) => {
@@ -113,7 +124,11 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
         </TouchableOpacity>
 
         <Text testID={'abcd'} type="H2">
-          {text_format.replace('{number}', value)}
+          {value !== undefined ? (
+            text_format.replace('{number}', value)
+          ) : (
+            <ActivityIndicator />
+          )}
         </Text>
 
         <TouchableOpacity

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplate.js

@@ -5,15 +5,20 @@ import React, { memo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { Colors } from '../../../configs';
 import styles from './OnOffButtonTemplateStyle';
+import { TESTID } from '../../../configs/Constants';
 
 const OnOffButtonTemplate = memo(
   ({ isOn, triggerAction, actionGroup, isLight = false }) => {
-    const { configuration } = actionGroup;
+    const { configuration, id } = actionGroup;
 
     return (
       <>
         <View style={styles.barrierControlContainer}>
-          <TouchableOpacity style={styles.bigCircle} onPress={triggerAction}>
+          <TouchableOpacity
+            style={styles.bigCircle}
+            onPress={triggerAction}
+            testID={`${TESTID.ON_OFF_BUTTON}-${id}`}
+          >
             <View style={styles.smallCircle}>
               <Icon
                 name={isOn ? configuration.icon_on : configuration.icon_off}
@@ -25,6 +30,7 @@ const OnOffButtonTemplate = memo(
                   styles.textBig,
                   { color: isOn ? Colors.Gray8 : Colors.Gray6 },
                 ]}
+                testID={`${TESTID.SENSOR_STATUS}-${id}`}
               >
                 {isOn ? configuration.text_on : configuration.text_off}
               </Text>

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -33,7 +33,11 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
   useEffect(() => {
     const { config } = configuration;
     const configValue = configValues[config];
-    setValueBrightness(configValue);
+    let valueTemp = configValue;
+    if (configValue > 0) {
+      valueTemp = Math.round((configValue / 254) * 100);
+    }
+    setValueBrightness(valueTemp);
   }, [configuration.config, configValues, configuration]);
 
   useEffect(() => {

package/src/commons/ActionGroup/__test__/NumberUpDownTemplate.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { ActivityIndicator, TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import Text from '../../../commons/Text';
-import { TESTID } from '../../../configs/Constants';
+import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import NumberUpDownActionTemplate from '../NumberUpDownActionTemplate';
 
@@ -48,7 +48,10 @@ describe('Test NumberUpDownActionTemplate', () => {
         <NumberUpDownActionTemplate
           actionGroup={actionGroup}
           doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
+          sensor={{
+            is_managed_by_backend: true,
+            device_type: DEVICE_TYPE.LG_THINQ,
+          }}
         />
       );
     });
@@ -288,4 +291,41 @@ describe('Test NumberUpDownActionTemplate', () => {
     const text = instance.findByType(Text);
     expect(text.props.children).toEqual('25 *C');
   });
+  test('render template have title', async () => {
+    const mockDoAction = jest.fn();
+    actionGroup.title = 'title';
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{
+            is_managed_by_backend: true,
+            device_type: DEVICE_TYPE.LG_THINQ,
+          }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const text = instance.findAllByType(Text);
+    expect(text).toHaveLength(2);
+  });
+  test('render template watch config not exits', async () => {
+    const mockDoAction = jest.fn();
+    actionGroup.configuration.config = 100;
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{
+            is_managed_by_backend: true,
+          }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const text = instance.findAllByType(ActivityIndicator);
+    expect(text).toHaveLength(1);
+  });
 });

package/src/commons/ActionGroup/__test__/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableOpacity, Switch } from 'react-native';
+import { TouchableOpacity, Switch, ActivityIndicator } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
@@ -344,7 +344,7 @@ describe('Test ActionGroup', () => {
     expect(mockDoAction).toHaveBeenCalledTimes(1);
   });
 
-  test('render ActionGroup NumberUpDownActionTemplate', async () => {
+  test('render ActionGroup NumberUpDownActionTemplate watch config value null', async () => {
     const mockDoAction = jest.fn();
     const actionGroup = {
       template: 'NumberUpDownActionTemplate',
@@ -362,11 +362,8 @@ describe('Test ActionGroup', () => {
       );
     });
     const instance = wrapper.root;
-    const text = instance.findAllByType(Text);
-    expect(text[0].props.children).toEqual('28 *C');
-
-    const touchs = instance.findAllByType(TouchableOpacity);
-    expect(touchs).toHaveLength(2);
+    const activity = instance.findAllByType(ActivityIndicator);
+    expect(activity.length).toEqual(1);
   });
 
   test('render ActionGroup StatesGridActionTemplate', async () => {

package/src/commons/ConnectingProcess/index.js

@@ -45,6 +45,7 @@ const ConnectingProcess = ({ route }) => {
         );
         if (success) {
           setSensor(data);
+          setNewName(data?.name);
         } else {
           ToastBottomHelper.error(JSON.stringify(data));
           goBack();
@@ -64,6 +65,7 @@ const ConnectingProcess = ({ route }) => {
         });
         if (success) {
           setSensor(data);
+          setNewName(data?.name);
         } else {
           ToastBottomHelper.error(JSON.stringify(data));
           goBack();
@@ -80,6 +82,7 @@ const ConnectingProcess = ({ route }) => {
         );
         if (success) {
           setSensor({ name: gateway?.model });
+          setNewName(gateway?.model);
         } else {
           ToastBottomHelper.error(JSON.stringify(data));
           goBack();

package/src/commons/Device/ItemDevice.js

@@ -72,7 +72,10 @@ const ItemDevice = memo(
     const textConnected = isConnected ? t('connected') : t('disconnected');
 
     return (
-      <TouchableWithoutFeedback onPress={goToSensorDisplay}>
+      <TouchableWithoutFeedback
+        onPress={goToSensorDisplay}
+        testID={`${TESTID.SENSOR_NAME}-${sensor?.id}`}
+      >
         <View
           style={[styles.container, wrapStyle, { borderColor }]}
           testID={TESTID.SUB_UNIT_DEVICES}

package/src/commons/Device/WaterQualitySensor/QualityIndicatorsItem.js

@@ -37,7 +37,7 @@ const QualityIndicatorItem = memo(
             >
               <IconOutline
                 name={'info-circle'}
-                size={16}
+                size={18}
                 color={Colors.Gray8}
               />
             </TouchableOpacity>
@@ -92,6 +92,11 @@ const styles = StyleSheet.create({
     marginTop: 8,
   },
   iconInfo: {
-    top: 10,
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: -10,
+    marginTop: -2,
   },
 });

package/src/commons/Form/CurrencyInput.js

@@ -1,4 +1,10 @@
-import React, { useState, useRef, useCallback, useMemo } from 'react';
+import React, {
+  useState,
+  useRef,
+  useCallback,
+  useMemo,
+  useEffect,
+} from 'react';
 import {
   View,
   TextInput,
@@ -6,6 +12,7 @@ import {
   TouchableWithoutFeedback,
   Platform,
 } from 'react-native';
+import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -125,6 +132,13 @@ const CurrencyInput = ({
     return textInputValue.toString().length < 2 ? -12 : 0;
   }, [textInputValue]);
 
+  useEffect(() => {
+    const isAndroid = Platform.OS === 'android';
+    isAndroid && AndroidKeyboardAdjust.setAdjustResize();
+
+    return () => isAndroid && AndroidKeyboardAdjust.setAdjustPan();
+  }, []);
+
   return (
     <TouchableWithoutFeedback onPress={focusInput}>
       <View style={styles.wrap}>

package/src/commons/Form/TextInputPassword.js

@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
     borderRadius: 2,
     paddingTop: 12,
     paddingBottom: 12,
-    paddingHorizontal: 20,
+    paddingRight: 20,
     backgroundColor: Colors.White,
     // ...Theme.shadow,
     shadowColor: Colors.Gray13,

package/src/commons/HeaderAni/index.js

@@ -6,6 +6,7 @@ import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 import Text from '../../commons/Text';
 import { Colors, Constants } from '../../configs';
+import { TESTID } from '../../configs/Constants';
 
 const screenHeight = Constants.height;
 const default_height = 44;
@@ -89,7 +90,11 @@ const HeaderAni = memo(
             },
           ]}
         >
-          <TouchableOpacity style={styles.btnBack} onPress={onPressLeft}>
+          <TouchableOpacity
+            style={styles.btnBack}
+            onPress={onPressLeft}
+            testID={TESTID.ICON_BACK}
+          >
             <Icon name={'left'} size={27} color={Colors.Gray9} />
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>

package/src/commons/MediaPlayerDetail/index.js

@@ -6,7 +6,14 @@ import React, {
   useContext,
   useMemo,
 } from 'react';
-import { Image, View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import {
+  Image,
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
@@ -68,7 +75,9 @@ const MediaPlayerDetail = ({
         newHeight = 224;
         break;
       case 4:
-        newWidth = Constants.width / 1.5;
+        newWidth =
+          Constants.width /
+          (Platform.OS === 'ios' && Constants.width < 400 ? 1.5 : 2);
         newHeight = 112;
         break;
       case 6:

package/src/commons/Sharing/MemberList.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { Colors } from '../../configs';
+import { Colors, Constants } from '../../configs';
 import Text from '../../commons/Text';
 import RowMember from './RowMember';
 
@@ -26,7 +26,9 @@ const MemberList = ({
           />
         ))}
       {!dataMember.length && (
-        <Text style={styles.textCenter}>{t('no_member')}</Text>
+        <View style={styles.viewEmpty}>
+          <Text style={styles.textCenter}>{t('no_member')}</Text>
+        </View>
       )}
     </View>
   );
@@ -37,4 +39,10 @@ const styles = StyleSheet.create({
   box: {
     backgroundColor: Colors.White,
   },
+  viewEmpty: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: Constants.height - 200,
+    backgroundColor: Colors.White,
+  },
 });

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -13,6 +13,7 @@ import { isIphoneX } from 'react-native-iphone-x-helper';
 import { Colors, Theme } from '../../configs';
 import HeaderAni, { heightHeader } from '../../commons/HeaderAni';
 import Text from '../../commons/Text';
+import { TESTID } from '../../configs/Constants';
 
 const WrapHeaderScrollable = ({
   children,
@@ -59,6 +60,7 @@ const WrapHeaderScrollable = ({
         onLeft={onGoBack}
       />
       <Animated.ScrollView
+        testID={TESTID.ANIMATED_SCROLL}
         scrollEventThrottle={16}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: animatedScrollYValue } } }],

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -151,7 +151,7 @@ describe('test ShortDetail Subunit', () => {
       (item) =>
         item.props.testID === TESTID.SUB_UNIT_DEVICES && item.type === View
     );
-    expect(itemDevice.length).toBe(1);
+    expect(itemDevice.length).toBe(0);
   });
 
   test('render ShortDetail add new device', async () => {

package/src/configs/Constants.js

@@ -288,6 +288,8 @@ export const TESTID = {
   SUB_UNIT_TEXT_DROPDOWN: 'SUB_UNIT_TEXT_DROPDOWN',
   SUB_UNIT_GO_DETAIL: 'SUB_UNIT_GO_DETAIL',
   VIEW_SUB_UNIT_AUTOMATE: 'VIEW_SUB_UNIT_AUTOMATE',
+  SUB_UNIT_NAME: 'SUB_UNIT_NAME',
+  ANIMATED_SCROLL: 'ANIMATED_SCROLL',
   ADD_SUB_UNIT: 'ADD_SUB_UNIT',
 
   // NavBar
@@ -392,6 +394,7 @@ export const TESTID = {
   ITEM_TEXT_ERROR: 'ITEM_TEXT_ERROR',
   SEARCH_BAR_INPUT: 'SEARCH_BAR_INPUT',
   GO_DETAIL: 'GO_DETAIL',
+  NAV_LIST: 'NAV_LIST',
 
   // Automate
   AUTOMATE_SCRIPT_ACTION: 'AUTOMATE_SCRIPT_ACTION',
@@ -447,8 +450,13 @@ export const TESTID = {
   ITEM_QUICK_ACTION_PRESS: 'ITEM_QUICK_ACTION_PRESS',
   TIME_COUNT_DOWN_TEXT: 'TIME_COUNT_DOWN_TEXT',
   ACTION_ITEM: 'ACTION_ITEM',
+
   // Sensor Item
   TEXT_SENSOR_ITEM: 'TEXT_SENSOR_ITEM',
+  SENSOR_NAME: 'SENSOR_NAME',
+  ON_OFF_BUTTON: 'ON_OFF_BUTTON',
+  SENSOR_STATUS: 'SENSOR_STATUS',
+  ICON_BACK: 'ICON_BACK',
 
   // DeviceInfo
   DEVICE_INFO_BATTERY: 'DEVICE_INFO_BATTERY',
@@ -564,6 +572,7 @@ export const TESTID = {
   ICON_ADD_STAR_SHARED_UNIT: 'ICON_ADD_STAR_SHARED_UNIT',
   TOUCH_SHARED_UNIT: 'TOUCH_SHARED_UNIT',
   SHARED_UNIT_OWN_BY: 'SHARED_UNIT_OWN_BY',
+  ICON_UNIT: 'ICON_UNIT',
 
   // Select subunit
 
@@ -809,3 +818,13 @@ export const SENSOR_TYPE = {
   SOS: 'sos',
   FILTER_WATER: 'filter_water',
 };
+
+export const PROBLEM_CODE = {
+  CLIENT_ERROR: 'CLIENT_ERROR',
+  SERVER_ERROR: 'SERVER_ERROR',
+  TIMEOUT_ERROR: 'TIMEOUT_ERROR',
+  CONNECTION_ERROR: 'CONNECTION_ERROR',
+  NETWORK_ERROR: 'NETWORK_ERROR',
+  UNKNOWN_ERROR: 'UNKNOWN_ERROR',
+  CANCEL_ERROR: 'CANCEL_ERROR',
+};

package/src/configs/SCConfig.js

@@ -107,11 +107,13 @@ export class SCConfig {
   static VCONNEX_REDIRECT_URI_APP = SCDefaultConfig.VCONNEX_REDIRECT_URI_APP;
   static pusherAppKey = SCDefaultConfig.pusherAppKey;
   static pusherAppCluste = SCDefaultConfig.pusherAppCluster;
+  static language = 'en';
 }
 
 export const initSCConfig = (config) => {
   api.setBaseURL(config.apiRoot ?? SCDefaultConfig.apiRoot);
   LocaleConfig.defaultLocale = config.language;
+  SCConfig.language = config.language ?? SCConfig.language;
   SCConfig.apiRoot = config.apiRoot ?? SCDefaultConfig.apiRoot;
   SCConfig.GOOGLE_MAP_API_KEY =
     config.GOOGLE_MAP_API_KEY ?? SCDefaultConfig.GOOGLE_MAP_API_KEY;

package/src/navigations/UnitStack.js

@@ -1,5 +1,5 @@
 import React, { memo, useContext, useEffect } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { BleManager } from 'react-native-ble-plx';
@@ -52,10 +52,10 @@ import ConfirmUnitDeletion from '../screens/ConfirmUnitDeletion';
 import InfoMemberUnit from '../screens/Sharing/InfoMemberUnit';
 import EnterPassword from '../screens/EnterPassword';
 import { HanetCameraStack } from './HanetCameraStack';
-
 import { axiosGet } from '../utils/Apis/axios';
 import { API } from '../configs';
 import SideMenuDetail from '../screens/SideMenuDetail';
+import { styles } from './UnitStackStyles';
 
 const Stack = createStackNavigator();
 
@@ -173,12 +173,9 @@ export const UnitStack = memo((props) => {
         component={ChooseLocation}
         options={{
           headerShown: true,
-          headerTitleStyle: {
-            ...styles.headerLocation,
-          },
           headerTitle: () => (
             <View style={styles.headerLocation}>
-              <Text type="H3" color={Colors.Gray9} bold>
+              <Text color={Colors.Gray9} style={styles.headerTitle} bold>
                 {t('choose_on_map')}
               </Text>
 
@@ -406,17 +403,3 @@ export const UnitStack = memo((props) => {
     </Stack.Navigator>
   );
 });
-
-const styles = StyleSheet.create({
-  icLeft: {
-    marginLeft: Device.isIOS ? 8 : 0,
-  },
-  headerLocation: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  headerContent: {
-    textAlign: 'center',
-    paddingBottom: 8,
-  },
-});

package/src/navigations/UnitStackStyles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { Device } from '../configs';
+
+export const styles = StyleSheet.create({
+  icLeft: {
+    marginLeft: Device.isIOS ? 8 : 0,
+  },
+  headerLocation: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 290,
+  },
+  headerTitle: {
+    fontSize: 20,
+    lineHeight: 28,
+  },
+  headerContent: {
+    textAlign: 'center',
+    paddingBottom: 4,
+  },
+});