@eohjsc/react-native-smart-city 0.7.3-rc2 → 0.7.3-rc21

package/src/screens/SmartAccount/Connecting/index.js

@@ -1,14 +1,14 @@
-import React, { useEffect, useCallback, useContext } from 'react';
-import { View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useContext, useEffect } from 'react';
+import { View } from 'react-native';
 import * as Progress from 'react-native-progress';
 
 import Text from '../../../commons/Text';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { Action } from '../../../context/actionType';
+import { API, Colors, Constants } from '../../../configs';
 import { SCContext, useSCContextSelector } from '../../../context';
+import { Action } from '../../../context/actionType';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { axiosPost } from '../../../utils/Apis/axios';
-import { API, Colors, Constants } from '../../../configs';
 import Routes from '../../../utils/Route';
 import styles from './style';
 

package/src/screens/SmartAccount/ListDevice/__test__/ListDevice.test.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import { act, create } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
 
-import ListDevice from '../index';
+import { useNavigation } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
+import Text from '../../../../commons/Text';
+import { API } from '../../../../configs';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import Text from '../../../../commons/Text';
 import api from '../../../../utils/Apis/axios';
-import { API } from '../../../../configs';
 import Routes from '../../../../utils/Route';
-import MockAdapter from 'axios-mock-adapter';
-import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
-import { useNavigation } from '@react-navigation/native';
+import ListDevice from '../index';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -78,7 +78,7 @@ describe('Test ListDeviceSmartAccount', () => {
       await touchs[touchs.length - 1].props.onPress();
     });
 
-    expect(navigate).toBeCalledWith(Routes.AddDeviceStack, {
+    expect(navigate).toHaveBeenCalledWith(Routes.AddDeviceStack, {
       screen: Routes.AddCommonSelectSubUnit,
       params: {
         addType: 'AddHassiDevice',

package/src/screens/SmartAccount/SuccessfullyConnected/__test__/SuccessfullyConnected.test.js

@@ -1,16 +1,16 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import SuccessfullyConnected from '../index';
+import _TextInput from '../../../../commons/Form/TextInput';
+import { API } from '../../../../configs';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
-import { API } from '../../../../configs';
-import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
 import Routes from '../../../../utils/Route';
-import _TextInput from '../../../../commons/Form/TextInput';
 import { flushPromises } from '../../../AllGateway/test-utils';
+import SuccessfullyConnected from '../index';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -100,7 +100,7 @@ describe('Test SuccessfullyConnected', () => {
     await act(async () => {
       handleContinue.props.onPress();
     });
-    expect(global.mockedNavigate).toBeCalledWith(
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
       Routes.ListDeviceSmartAccount,
       {
         smart_account_id: 1,
@@ -125,7 +125,7 @@ describe('Test SuccessfullyConnected', () => {
     await act(async () => {
       handleFinish.props.onPress();
     });
-    expect(global.mockedDispatch).toBeCalledWith({
+    expect(global.mockedDispatch).toHaveBeenCalledWith({
       payload: {
         index: 0,
         routes: [

package/src/screens/SmartAccount/SuccessfullyConnected/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { View, ScrollView, ActivityIndicator } from 'react-native';
 import { useNavigation, CommonActions } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import _TextInput from '../../../commons/Form/TextInput';
 import Text from '../../../commons/Text';
@@ -134,7 +134,7 @@ const SuccessfullyConnected = memo(({ route }) => {
       <View style={styles.wrap}>
         <ScrollView>
           <View style={styles.body}>
-            <AntDesign name="check-circle" size={28} color={Colors.Green6} />
+            <IconOutline name="check-circle" size={28} color={Colors.Green6} />
             <Text bold style={styles.connectingText}>
               {t('successfully_connected')}
             </Text>

package/src/screens/SmartAccount/__test__/Connecting.test.js

@@ -1,14 +1,14 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+import Text from '../../../commons/Text';
+import { API } from '../../../configs';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import SmartAccountConnecting from '../Connecting';
-import Text from '../../../commons/Text';
-import MockAdapter from 'axios-mock-adapter';
+import t from '../../../hooks/Common/useTranslations';
 import api from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
 import Routes from '../../../utils/Route';
-import t from '../../../hooks/Common/useTranslations';
+import SmartAccountConnecting from '../Connecting';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -53,7 +53,7 @@ describe('Test Connecting', () => {
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
-    expect(global.mockedNavigate).toBeCalledWith(Routes.SmartAccount, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.SmartAccount, {
       params: {},
     });
   });

package/src/screens/SmartAccount/__test__/SmartAccount.test.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
-import Toast from 'react-native-toast-message';
 import { ScrollView, TouchableOpacity } from 'react-native';
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
-import SmartAccount from '../index';
-import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import Toast from 'react-native-toast-message';
+import renderer, { act } from 'react-test-renderer';
 import TextInput from '../../../commons/Form/TextInput';
 import _TextInputPassword from '../../../commons/Form/TextInputPassword';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import Routes from '../../../utils/Route';
+import SmartAccount from '../index';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -98,7 +98,7 @@ describe('Test SmartAccount', () => {
     await act(async () => {
       await touchableOpacity.props.onPress();
     });
-    expect(Toast.show).toBeCalledWith({
+    expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',
       text1: 'Please select a supplier',
@@ -152,7 +152,7 @@ describe('Test SmartAccount', () => {
     await act(async () => {
       await touchableOpacity.props.onPress();
     });
-    expect(global.mockedNavigate).toBeCalledWith(
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
       Routes.SmartAccountConnecting,
       {
         brand: 'google_home',
@@ -206,7 +206,7 @@ describe('Test SmartAccount', () => {
     await act(async () => {
       await touchableOpacity.props.onPress();
     });
-    expect(global.mockedNavigate).toBeCalledWith(Routes.AddDeviceStack, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.AddDeviceStack, {
       screen: 'AddCommonSelectUnit',
       params: {
         addType: 'AddHassioDevice',
@@ -236,7 +236,7 @@ describe('Test SmartAccount', () => {
       await touchSupplierItem[1].props.onPress();
     });
     expect(touchSupplierItem).toBeDefined();
-    expect(global.mockedNavigate).toBeCalledWith(Routes.Browser, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.Browser, {
       // eslint-disable-next-line max-len
       link: 'https://qt-vn.m.lgaccount.com/emp/v2/authorize?client_id=2b85aee334f046848341547894bb7c4e&redirect_uri=app://eoh/sync-lg-device&response_type=code&state=1',
     });

package/src/screens/SmartIr/__test__/GroupButtonByType.test.js

@@ -9,8 +9,9 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import TextInput from '../../../commons/Form/TextInput';
 import { ModalCustom } from '../../../commons/Modal';
 import { TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -133,7 +134,7 @@ describe('Test GroupButtonByType', () => {
     const icon = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.ICON_OUTLINE_TYPE_RELOAD && el.type === AntDesign
+          AccessibilityLabel.ICON_OUTLINE_TYPE_RELOAD && el.type === IconOutline
     );
     await act(async () => {
       await touch.props.onPress();

package/src/screens/SmartIr/components/GroupButtonByType/GroupButtonByType.js

@@ -5,7 +5,7 @@ import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import SmartTiviActionTemplate from '../../../../commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate';
 import Text from '../../../../commons/Text';
 import { ModalCustom } from '../../../../commons/Modal';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { Colors } from '../../../../configs';
 import TextInput from '../../../../commons/Form/TextInput';
@@ -58,7 +58,7 @@ const GroupButtonByType = memo(({ route }) => {
               style={[styles.headerButton]}
               accessibilityLabel={AccessibilityLabel.HEADER_BUTTON_TYPE_RELOAD}
             >
-              <AntDesign
+              <IconOutline
                 name={'reload1'}
                 size={27}
                 color={Colors.Black}

package/src/screens/SmartIr/components/SelectBrand.js

@@ -5,7 +5,7 @@ import { HeaderCustom } from '../../../commons/Header';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Routes from '../../../utils/Route';
 import { RowItem } from '../../../commons/RowItem';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../../configs';
 
 import styles from './SelectBrandStyles';
@@ -47,7 +47,7 @@ const SelectDeviceType = memo(({ route }) => {
                   key={index.toString()}
                   isShowSubText={false}
                   rightComponent={
-                    <AntDesign name="right" size={20} color={Colors.Gray7} />
+                    <IconOutline name="right" size={20} color={Colors.Gray7} />
                   }
                 />
               );

package/src/screens/SubUnit/AddSubUnit.js

@@ -64,7 +64,7 @@ const AddSubUnit = ({ route }) => {
           lat: location.latitude,
           lng: location.longitude,
         };
-        const formData = createFormData(dataObj, ['background']);
+        const formData = createFormData(dataObj, ['background', 'lat', 'lng']);
         const { success, data } = await axiosPost(
           API.UNIT.CREATE_UNIT(),
           formData,
@@ -120,9 +120,7 @@ const AddSubUnit = ({ route }) => {
             routeName: Routes.DashboardStack,
           };
           if (isInsideUnit) {
-            navigate(Routes.UnitDetail, {
-              params: commonPrams,
-            });
+            navigate(Routes.UnitDetail, commonPrams);
           } else {
             dispatch(
               replace(Routes.UnitStack, {

package/src/screens/SubUnit/EditSubUnit.js

@@ -1,27 +1,27 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { View, TouchableOpacity, Image } from 'react-native';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { Colors, API } from '../../configs';
-import { ToastBottomHelper } from '../../utils/Utils';
+import { API, Colors } from '../../configs';
+import useBoolean from '../../hooks/Common/useBoolean';
 import {
-  axiosPatch,
   axiosDelete,
+  axiosPatch,
   createFormData,
 } from '../../utils/Apis/axios';
 import Routes from '../../utils/Route';
-import useBoolean from '../../hooks/Common/useBoolean';
+import { ToastBottomHelper } from '../../utils/Utils';
 
+import { IconOutline } from '@ant-design/icons-react-native';
 import { ImagePicker, Section } from '../../commons';
 import AlertAction from '../../commons/AlertAction';
 import _TextInput from '../../commons/Form/TextInput';
 import Text from '../../commons/Text';
 import { AccessibilityLabel } from '../../configs/Constants';
-import AntDesign from 'react-native-vector-icons/AntDesign';
-import { useEmeragencyContacts } from './hooks/useEmergencyContacts';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 import styles from './EditSubUnitStyles';
+import { useEmeragencyContacts } from './hooks/useEmergencyContacts';
 
 const EditSubUnit = ({ route }) => {
   const { unit, station } = route?.params || {};
@@ -118,6 +118,7 @@ const EditSubUnit = ({ route }) => {
     if (success) {
       //dispatch(removeSubUnit(station.id));
       ToastBottomHelper.success(t('text_remove_sub_unit_success'));
+      navigation.pop();
       onBack();
     } else {
       ToastBottomHelper.error(t('text_remove_sub_unit_fail'));
@@ -207,7 +208,7 @@ const EditSubUnit = ({ route }) => {
                 <Text type={'H4'} color={Colors.Gray9}>
                   {t('emergency_contacts')}
                 </Text>
-                <AntDesign name={'right'} size={20} color={Colors.Gray8} />
+                <IconOutline name={'right'} size={20} color={Colors.Gray8} />
               </TouchableOpacity>
               <Text
                 type={'Body'}

package/src/screens/SubUnit/ManageSubUnit.js

@@ -14,7 +14,7 @@ import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import Text from '../../commons/Text';
 
 import styles from './ManageSubUnitStyles';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Routes from '../../utils/Route';
 import { RowItem } from '../../commons/RowItem';
@@ -54,7 +54,7 @@ const ManageSubUnit = ({ route }) => {
           onPress={addSubUnit}
           style={styles.headerButton}
         >
-          <AntDesign name={'plus'} size={27} color={Colors.Black} />
+          <IconOutline name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
         <TouchableOpacity
           // onPress={handleShowMenuAction}
@@ -112,7 +112,7 @@ const ManageSubUnit = ({ route }) => {
                       }  devices`}
                       onPress={() => goToEditSubUnit(item, unit)}
                       rightComponent={
-                        <AntDesign
+                        <IconOutline
                           name="right"
                           size={20}
                           color={Colors.Gray6}

package/src/screens/SubUnit/__test__/AddSubUnit.test.js

@@ -244,19 +244,17 @@ describe('Test AddSubUnit', () => {
       await viewButtonBottom.props.onRightClick();
     });
     expect(global.mockedNavigate).toHaveBeenCalledWith('UnitDetail', {
-      params: {
-        isAddSubUnit: true,
-        routeName: 'DashboardStack',
-        stationId: undefined,
-        unitData: {
-          id: 1,
-          name: 'Unit name',
-          location: {
-            description: 'location',
-          },
+      isAddSubUnit: true,
+      routeName: 'DashboardStack',
+      stationId: undefined,
+      unitData: {
+        id: 1,
+        name: 'Unit name',
+        location: {
+          description: 'location',
         },
-        unitId: 1,
       },
+      unitId: 1,
     });
   });
 

package/src/screens/Template/EditTemplate.js

@@ -9,6 +9,7 @@ import React, {
 import { Image, TouchableOpacity, View } from 'react-native';
 import DraggableFlatList from 'react-native-draggable-flatlist';
 
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { EmptyComponent } from '../../commons/DevMode';
 import { HeaderCustom } from '../../commons/Header';
 import Text from '../../commons/Text';
@@ -16,9 +17,9 @@ import { Images } from '../../configs';
 import { SCContext } from '../../context';
 import { Action } from '../../context/actionType';
 import t from '../../hooks/Common/useTranslations';
+import { notImplemented } from '../../utils/Utils';
 import { SensorDisplayItem } from '../Device/components/SensorDisplayItem';
 import styles from './Styles/EditTemplateStyle';
-import { notImplemented } from '../../utils/Utils';
 
 const EditTemplate = () => {
   const { setAction } = useContext(SCContext);
@@ -100,7 +101,7 @@ const EditTemplate = () => {
       {!actionsList?.length ? (
         renderEmpty
       ) : (
-        <>
+        <GestureHandlerRootView>
           <View style={styles.wrapDescription}>
             <Text style={styles.description}>
               {t('hold_and_hover_description')}
@@ -109,7 +110,8 @@ const EditTemplate = () => {
           <DraggableFlatList
             showsVerticalScrollIndicator={false}
             data={actionsList}
-            renderItem={({ item, index, drag }) => {
+            renderItem={({ item, getIndex, drag }) => {
+              const index = getIndex();
               return (
                 <TouchableOpacity
                   onLongPress={onDrag(item, drag)}
@@ -153,7 +155,7 @@ const EditTemplate = () => {
               <Text style={styles.save}>{t('save')}</Text>
             </TouchableOpacity>
           </View>
-        </>
+        </GestureHandlerRootView>
       )}
     </View>
   );

package/src/screens/Template/__test__/EditTemplate.test.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import { act, create } from 'react-test-renderer';
 import DraggableFlatList from 'react-native-draggable-flatlist';
+import { act, create } from 'react-test-renderer';
 
+import { useRoute } from '@react-navigation/native';
+import { TouchableOpacity } from 'react-native';
+import Text from '../../../commons/Text';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import EditTemplate from '../EditTemplate';
-import Text from '../../../commons/Text';
-import { useRoute } from '@react-navigation/native';
 import { getTranslate } from '../../../utils/I18n';
-import { TouchableOpacity } from 'react-native';
+import EditTemplate from '../EditTemplate';
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
@@ -67,7 +67,7 @@ describe('Test EditTemplate', () => {
       await firstItem.props.onLongPress();
     });
 
-    expect(global.mockedGoBack).toBeCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
 
     await act(async () => {
       await DraggableFlatLists[0].props.onDragEnd({
@@ -79,6 +79,6 @@ describe('Test EditTemplate', () => {
         .findByProps({ accessibilityLabel: 'Save' })
         .props.onPress();
     });
-    expect(global.mockedGoBack).toBeCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
   });
 });

package/src/screens/Template/__test__/detail.test.js

@@ -4,13 +4,13 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 
+import MenuActionMore from '../../../commons/MenuActionMore';
+import ModalPopupCT from '../../../commons/ModalPopupCT';
 import { API } from '../../../configs';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
 import Detail from '../detail';
-import ModalPopupCT from '../../../commons/ModalPopupCT';
-import MenuActionMore from '../../../commons/MenuActionMore';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -59,7 +59,7 @@ describe('Test Detail', () => {
     const instance = tree.root;
     const touchableOpacities = instance.findAllByType(TouchableOpacity);
     await touchableOpacities[0].props.onPress();
-    expect(global.mockedGoBack).toBeCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
   });
 
   it('Test render onClick more header onPress delete', async () => {
@@ -95,7 +95,7 @@ describe('Test Detail', () => {
     await act(async () => {
       await menuActionMore.props.onItemClick(item);
     });
-    expect(mockDoAction).toBeCalled();
+    expect(mockDoAction).toHaveBeenCalled();
     const modalPopupCT = instance.findByType(ModalPopupCT);
     mock.onGet(API.DEV_MODE.DASHBOARD.DETAIL(1)).reply(200);
     await act(async () => {

package/src/screens/Template/__test__/index.test.js

@@ -27,7 +27,7 @@ describe('Test Template screen', () => {
     expect(FlatLists).toHaveLength(1);
     const touchableOpacities = instance.findAllByType(TouchableOpacity);
     await touchableOpacities[0].props.onPress();
-    expect(global.mockedNavigate).toBeCalled();
+    expect(global.mockedNavigate).toHaveBeenCalled();
   });
 
   it('Test onSearch', async () => {

package/src/screens/UVIndexGuide/index.js

@@ -2,16 +2,14 @@ import React, { memo, useMemo } from 'react';
 import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import { Colors, Theme } from '../../configs';
 import Text from '../../commons/Text';
+import { Colors, Theme } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
-import useTitleHeader from '../../hooks/Common/useTitleHeader';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const UVIndexGuide = memo(() => {
   const t = useTranslations();
-  useTitleHeader(t('UV Index Guide'));
   const language = useSCContextSelector((state) => state.language);
 
   const data = useMemo(

package/src/screens/Unit/SelectAddToFavorites.js

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import { View, ScrollView, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { HeaderCustom } from '../../commons/Header';
 import Text from '../../commons/Text';
 import NavBar from '../../commons/NavBar';
@@ -142,7 +142,7 @@ const SelectAddToFavorites = memo(({ route }) => {
         style={styles.buttonClose}
         onPress={goBack}
       >
-        <AntDesign name={'close'} size={24} color={Colors.Black} />
+        <IconOutline name={'close'} size={24} color={Colors.Black} />
       </TouchableOpacity>
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/screens/Unit/SelectAddress.js

@@ -1,17 +1,17 @@
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
-import { TouchableOpacity, View, ScrollView } from 'react-native';
-import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
+import MapView, { Circle, Marker, PROVIDER_GOOGLE } from 'react-native-maps';
 import { check, RESULTS } from 'react-native-permissions';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { openPromptEnableLocation } from '../../utils/Setting/Location';
 
+import { FullLoading } from '../../commons';
 import BottomButtonView from '../../commons/BottomButtonView';
 import SearchBarLocation from '../../commons/SearchLocation';
 import RowLocation from '../../commons/SearchLocation/RowLocation';
 import Text from '../../commons/Text';
-import { FullLoading } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import {
   GEOLOCATION_ERROR,
@@ -19,15 +19,15 @@ import {
   OpenSetting,
 } from '../../utils/Permission/common';
 
-import styles from './SelectAddressStyles';
 import { API, Colors, SCConfig } from '../../configs';
-import { axiosGet } from '../../utils/Apis/axios';
-import Routes from '../../utils/Route';
 import {
   AccessibilityLabel,
-  MAP_INITIAL_REGION,
   EOH_LOCATION,
+  MAP_INITIAL_REGION,
 } from '../../configs/Constants';
+import { axiosGet } from '../../utils/Apis/axios';
+import Routes from '../../utils/Route';
+import styles from './SelectAddressStyles';
 
 navigator.geolocation = require('@react-native-community/geolocation');
 
@@ -210,7 +210,11 @@ const SelectAddress = memo(({ route }) => {
               style={styles.button}
               accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
             >
-              <AntDesign name="enviroment" size={27} color={Colors.Primary} />
+              <IconOutline
+                name="environment"
+                size={27}
+                color={Colors.Primary}
+              />
               <Text type="Body" color={Colors.Gray9} style={styles.text} bold>
                 {t('choose_on_map')}
               </Text>
@@ -248,7 +252,7 @@ const SelectAddress = memo(({ route }) => {
               }}
               tracksViewChanges={false}
             >
-              <AntDesign name="enviroment" size={27} color={Colors.Blue10} />
+              <IconOutline name="environment" size={27} color={Colors.Blue10} />
             </Marker>
           </>
         )}

package/src/screens/Unit/Station/__test__/index.test.js

@@ -52,6 +52,6 @@ describe('Test Station', () => {
     });
     const touchableOpacities = instance.findAllByType(TouchableOpacity);
     await touchableOpacities[0].props.onPress();
-    expect(mockOnSnapToItem).toBeCalled();
+    expect(mockOnSnapToItem).toHaveBeenCalled();
   });
 });