@eohjsc/react-native-smart-city 0.7.3-rc12 → 0.7.3-rc14

package/src/screens/Device/EditDevice/index.js

@@ -2,7 +2,7 @@ import React, { memo, useState, useCallback } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { HeaderCustom } from '../../../commons/Header';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../../configs';
 import Text from '../../../commons/Text';
 import { useRoute } from '@react-navigation/native';
@@ -92,7 +92,7 @@ const EditDevice = memo(() => {
             <Text type="Body" Reugular color={Colors.Grey7}>
               {sensorName}
             </Text>
-            <AntDesign
+            <IconOutline
               name="right"
               size={18}
               color={Colors.Gray7}

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

@@ -3,8 +3,6 @@ import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import { Alert, ScrollView } from 'react-native';
 import { act, create } from 'react-test-renderer';
-
-import AntDesign from 'react-native-vector-icons/AntDesign';
 import { AlertAction, ButtonPopup, MenuActionMore } from '../../../commons';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
 import { AlertSendConfirm } from '../../../commons/EmergencyButton/AlertSendConfirm';
@@ -19,6 +17,7 @@ import api from '../../../utils/Apis/axios';
 import { getTranslate } from '../../../utils/I18n';
 import Routes from '../../../utils/Route';
 import DeviceDetail from '../detail';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -352,7 +351,8 @@ describe('test DeviceDetail', () => {
     const buttonPopupIcon = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.BUTTON_POPUP_RESOLVED_ICON && el.type === AntDesign
+          AccessibilityLabel.BUTTON_POPUP_RESOLVED_ICON &&
+        el.type === IconOutline
     );
     expect(buttonPopupTitle.props.children).toEqual([
       'Unit name',

package/src/screens/Device/detail.js

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import { View, TouchableOpacity, Platform } from 'react-native';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import moment from 'moment';
 
@@ -685,9 +685,9 @@ const DeviceDetail = ({ route }) => {
         >
           <View style={styles.buttonStar}>
             {isFavorite ? (
-              <AntDesign name="star" size={25} color={Colors.Yellow6} />
+              <IconFill name="star" size={25} color={Colors.Yellow6} />
             ) : (
-              <AntDesign name="staro" size={25} />
+              <IconOutline name="star" size={25} />
             )}
           </View>
         </TouchableOpacity>
@@ -695,7 +695,7 @@ const DeviceDetail = ({ route }) => {
         {isShowSetupEmergencyContact && (
           <TouchableOpacity onPress={onPressSetting}>
             <View style={styles.button}>
-              <AntDesign name="setting" size={25} color={Colors.Black} />
+              <IconOutline name="setting" size={25} color={Colors.Black} />
             </View>
           </TouchableOpacity>
         )}
@@ -792,7 +792,7 @@ const DeviceDetail = ({ route }) => {
             <BottomButtonView
               style={styles.bottomButtonEmergencyContact}
               mainIcon={
-                <AntDesign name="plus" size={16} color={Colors.Primary} />
+                <IconOutline name="plus" size={16} color={Colors.Primary} />
               }
               mainTitle={t('setup_my_emergency_contact')}
               onPressMain={onSetupContacts}
@@ -827,7 +827,7 @@ const DeviceDetail = ({ route }) => {
       {isShowEmergencyResolve && !isEmergencyPopupScreen && (
         <BottomButtonView
           style={styles.bottomButtonEmergencyResolve}
-          mainIcon={<AntDesign name="tool" size={15} color={Colors.Gray6} />}
+          mainIcon={<IconOutline name="tool" size={15} color={Colors.Gray6} />}
           mainTitle={t('resolve_situation')}
           onPressMain={onPressResolveSituationConfirm}
           topComponent={
@@ -867,7 +867,7 @@ const DeviceDetail = ({ route }) => {
           >
             {unit?.name} - {sensor?.station?.name}
           </Text>
-          <AntDesign
+          <IconOutline
             accessibilityLabel={AccessibilityLabel.BUTTON_POPUP_RESOLVED_ICON}
             name="check-circle"
             size={42}

package/src/screens/Drawer/index.js

@@ -1,4 +1,4 @@
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import React, { useCallback, useContext } from 'react';
 import {
   Image,
@@ -59,7 +59,7 @@ const DrawerContainer = () => {
                 style={styles.avatar}
                 accessibilityLabel={AccessibilityLabel.SIDE_MENU_AVATAR_USER}
               >
-                <AntDesign name={'user'} size={27} />
+                <IconOutline name={'user'} size={27} />
               </View>
             )}
             <View style={styles.textContainer}>
@@ -116,7 +116,7 @@ export const Row = ({
       ]}
       accessibilityLabel={accessibilityLabel}
     >
-      <AntDesign name={image} size={24} />
+      <IconOutline name={image} size={24} />
 
       <View style={styles.wrapText}>
         <Text style={[styles.text]}>{name}</Text>

package/src/screens/EmergencyContacts/EmergencyContactsList.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { AlertAction, MenuActionList, Section } from '../../commons';
@@ -99,7 +99,7 @@ export const EmergencyContactsList = ({ route }) => {
                 : 'disable'
             }
             leftIcon={
-              <AntDesign name={'plus'} size={20} color={Colors.White} />
+              <IconOutline name={'plus'} size={20} color={Colors.White} />
             }
             text={t('add_new')}
             subtext={t('emergency_max_contacts', {
@@ -113,7 +113,7 @@ export const EmergencyContactsList = ({ route }) => {
                 key={contact.id}
                 index={index}
                 leftIcon={
-                  <AntDesign name={'user'} size={20} color={Colors.White} />
+                  <IconOutline name={'user'} size={20} color={Colors.White} />
                 }
                 text={contact.name}
                 subtext={contact.phone_number}
@@ -122,7 +122,11 @@ export const EmergencyContactsList = ({ route }) => {
                     style={styles.buttonRemove}
                     onPress={onPressRemoveContact(contact)}
                   >
-                    <AntDesign name={'minus'} size={20} color={Colors.Gray8} />
+                    <IconOutline
+                      name={'minus'}
+                      size={20}
+                      color={Colors.Gray8}
+                    />
                   </TouchableOpacity>
                 }
               />

package/src/screens/EmergencyContacts/EmergencyContactsSelectContacts.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Section, ViewButtonBottom } from '../../commons';
@@ -81,7 +81,7 @@ export const EmergencyContactsSelectContacts = ({ route }) => {
               }
               index={index}
               leftIcon={
-                <AntDesign name={'user'} size={20} color={Colors.White} />
+                <IconOutline name={'user'} size={20} color={Colors.White} />
               }
               text={contact.name}
               subtext={contact.phone_number}
@@ -91,7 +91,7 @@ export const EmergencyContactsSelectContacts = ({ route }) => {
                   {currentContacts.some(
                     (item) => item?.name === contact?.name
                   ) && (
-                    <AntDesign
+                    <IconOutline
                       name={'check-circle'}
                       size={20}
                       color={Colors.Primary}

package/src/screens/EmergencySetting/components/DropDownItem.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import Text from '../../../commons/Text';
 import styles from '../styles/DropDownItem';
@@ -29,7 +29,7 @@ const DropDownItem = ({ label, data, onSelectItem, isOpen, onOpen, index }) => {
       <View style={styles.dropDownContainer}>
         <TouchableOpacity style={styles.dropDownStyle} onPress={handleOnOpen}>
           <Text>{selecteValue?.label}</Text>
-          <AntDesign name="caretdown" size={18} color={Colors.Gray8} />
+          <IconOutline name="caret-down" size={18} color={Colors.Gray8} />
         </TouchableOpacity>
 
         {isOpen && (

package/src/screens/GuestInfo/components/RowGuestInfo.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../../commons/Text';
 import styles from '../styles/indexStyles';
 
@@ -19,7 +19,7 @@ const RowGuestInfo = ({
         <View style={styles.rowRight}>
           <Text type="Body">{textRight}</Text>
           {rightArrow && (
-            <AntDesign name="right" size={20} style={styles.icon} />
+            <IconOutline name="right" size={20} style={styles.icon} />
           )}
         </View>
       </View>

package/src/screens/GuestInfo/index.js

@@ -7,7 +7,7 @@ import RowGuestInfo from './components/RowGuestInfo';
 import HeaderGuestInfo from './components/HeaderGuestInfo';
 import AccessScheduleSheet from './components/AccessScheduleSheet';
 import { CircleView } from '../../commons/CircleView';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../commons/Text';
 import { useBoolean } from '../../hooks/Common';
 import { axiosGet, axiosPut } from '../../utils/Apis/axios';
@@ -113,7 +113,7 @@ const GuestInfo = ({ route }) => {
                   />
                 ) : (
                   <CircleView size={88} center style={styles.avatar}>
-                    <AntDesign name="user" size={44} color={Colors.Pink1} />
+                    <IconOutline name="user" size={44} color={Colors.Pink1} />
                   </CircleView>
                 )}
                 <Text type="H3" bold>

package/src/screens/HanetCamera/ManageAccess.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { View, TouchableOpacity, Image, FlatList } 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 RequestFaceIDPopup from './components/RequestFaceIDPopup';
@@ -74,7 +74,7 @@ const HanetManageAccess = ({ route }) => {
             {' '}
             {item.name}
           </Text>
-          <AntDesign name="right" size={20} color={Colors.Gray6} />
+          <IconOutline name="right" size={20} color={Colors.Gray6} />
         </TouchableOpacity>
       );
     },
@@ -89,7 +89,7 @@ const HanetManageAccess = ({ route }) => {
           onPress={setShowAddMemberModal}
           accessibilityLabel={AccessibilityLabel.HANET_MANAGE_ACCESS_ADD_BUTTON}
         >
-          <AntDesign name={'plus'} size={27} color={Colors.Black} />
+          <IconOutline name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),

package/src/screens/HanetCamera/MemberInfo.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { View, TouchableOpacity, Image } 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 { AlertAction, FullLoading } from '../../commons';
@@ -173,7 +173,7 @@ const HanetMemberInfo = ({ route }) => {
         onPress={setShowSetFaceIDModal}
         style={[styles.row, !!error && { borderBottomColor: Colors.Red6 }]}
       >
-        <AntDesign name="camera" size={27} color={Colors.Primary} />
+        <IconOutline name="camera" size={27} color={Colors.Primary} />
         <Text
           type="Body"
           bold

package/src/screens/HanetCamera/components/RequestFaceIDPopup.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import ImagePicker from 'react-native-image-crop-picker';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../../commons/Text';
 import BottomSheet from '../../../commons/BottomSheet';
 import { Colors } from '../../../configs';
@@ -19,7 +19,7 @@ const RequestFaceIDPopup = ({
   const t = useTranslations();
   const options = [
     {
-      icon: <AntDesign name="camera" color={Colors.Gray9} size={27} />,
+      icon: <IconOutline name="camera" color={Colors.Gray9} size={27} />,
       text: t('capture_image'),
       onChoose: () => {
         setHide();

package/src/screens/ManageAccess/index.js

@@ -9,7 +9,7 @@ import {
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { HeaderCustom } from '../../commons/Header';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import styles from './styles/ManageAccessStyles';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -75,7 +75,7 @@ const ManageAccessScreen = memo(({ route }) => {
                             // accessibilityLabel={AccessibilityLabel.SIDE_MENU_AVATAR_USER}
                           />
                         ) : (
-                          <AntDesign
+                          <IconOutline
                             name="user"
                             size={20}
                             color={Colors.White}
@@ -90,7 +90,7 @@ const ManageAccessScreen = memo(({ route }) => {
                       subtext={item.schedule}
                       onPress={() => goToGuestInfo(item.id)}
                       rightComponent={
-                        <AntDesign
+                        <IconOutline
                           name="right"
                           size={20}
                           color={Colors.Gray6}

package/src/screens/Notification/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useFocusEffect } from '@react-navigation/native';
 
 import styles from './styles/indexStyles';
@@ -33,7 +33,7 @@ const Notification = memo(() => {
             notImplemented(t);
           }}
         >
-          <AntDesign name={'plus'} size={27} color={Colors.Black} />
+          <IconOutline name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
 
         <TouchableOpacity
@@ -41,7 +41,7 @@ const Notification = memo(() => {
             notImplemented(t);
           }}
         >
-          <AntDesign name={'search1'} size={27} color={Colors.Black} />
+          <IconOutline name={'search'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),

package/src/screens/ScanChipQR/components/QRScan/index.js

@@ -7,7 +7,7 @@ import {
   Dimensions,
   TouchableOpacity,
 } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { RNCamera } from 'react-native-camera';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
@@ -36,7 +36,7 @@ const VerifyingQRCode = memo(() => {
     <View style={styles.maskOuter}>
       <TouchableOpacity style={[styles.viewVerifying, styles.buttonShadow]}>
         <Loading
-          icon={<AntDesign name={'sync'} color={Colors.Green6} size={16} />}
+          icon={<IconOutline name={'sync'} color={Colors.Green6} size={16} />}
         />
         <Text type={'Body'} style={styles.text}>
           {t('verify_qr_code')}
@@ -117,7 +117,7 @@ const QRScan = ({ isScanReady = true, onScan }) => {
               borderColor={Colors.Gray4}
               style={styles.buttonClose}
             >
-              <AntDesign name={'close'} size={24} co />
+              <IconOutline name={'close'} size={24} co />
             </CircleButton>
             {loading && <VerifyingQRCode />}
           </View>

package/src/screens/SelectUnit/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity, FlatList } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import { API, Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -132,7 +132,7 @@ const SelectUnit = () => {
         accessibilityLabel={AccessibilityLabel.ICON_CLOSE}
       >
         <View style={styles.buttonClose}>
-          <AntDesign name={'close'} size={24} color={Colors.Black} />
+          <IconOutline name={'close'} size={24} color={Colors.Black} />
         </View>
       </TouchableOpacity>
     ),

package/src/screens/SharedUnit/TabHeader.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import Text from '../../commons/Text';
@@ -54,7 +54,7 @@ const TabHeader = ({ current, getCurrentTab, showModal, textFilter }) => {
           <Text style={styles.sortBy}>
             {t('sort_by') + ': '} {textFilter}
           </Text>
-          <AntDesign name="arrowdown" size={10} />
+          <IconOutline name="arrowdown" size={10} />
         </TouchableOpacity>
       </View>
     </View>

package/src/screens/Sharing/Components/EndDevice.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo, useState } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../../configs';
 import styles from './Styles/DeviceItemStyles';
 import { AccessibilityLabel } from '../../../configs/Constants';
@@ -71,11 +71,11 @@ const EndDevice = ({
             {name}
           </Text>
           {checked && (
-            <AntDesign name={'check'} color={Colors.Primary} size={20} />
+            <IconOutline name={'check'} color={Colors.Primary} size={20} />
           )}
 
           {dataConfig.length > 0 && (
-            <AntDesign
+            <IconOutline
               onPress={() => toggleExpandEndDevice()}
               name={isItemExpanded ? 'up' : 'down'}
               size={20}

package/src/screens/Sharing/UnitMemberList.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-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 { useNavigation, useIsFocused } from '@react-navigation/native';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
@@ -83,7 +83,7 @@ const UnitMemberList = ({ route }) => {
       style={styles.rightHeader}
     >
       {isOwner ? (
-        <AntDesign name={'plus'} size={27} color={Colors.Black} />
+        <IconOutline name={'plus'} size={27} color={Colors.Black} />
       ) : (
         <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
       )}

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/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/EditSubUnit.js

@@ -18,7 +18,7 @@ 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 { IconOutline } from '@ant-design/icons-react-native';
 import { useEmeragencyContacts } from './hooks/useEmergencyContacts';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 import styles from './EditSubUnitStyles';
@@ -207,7 +207,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/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

@@ -2,7 +2,7 @@ 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 { useNavigation } from '@react-navigation/native';
-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 { check, RESULTS } from 'react-native-permissions';
 import { openPromptEnableLocation } from '../../utils/Setting/Location';
@@ -210,7 +210,7 @@ const SelectAddress = memo(({ route }) => {
               style={styles.button}
               accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
             >
-              <AntDesign name="enviroment" size={27} color={Colors.Primary} />
+              <IconOutline name="enviroment" size={27} color={Colors.Primary} />
               <Text type="Body" color={Colors.Gray9} style={styles.text} bold>
                 {t('choose_on_map')}
               </Text>
@@ -248,7 +248,7 @@ const SelectAddress = memo(({ route }) => {
               }}
               tracksViewChanges={false}
             >
-              <AntDesign name="enviroment" size={27} color={Colors.Blue10} />
+              <IconOutline name="enviroment" size={27} color={Colors.Blue10} />
             </Marker>
           </>
         )}