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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.3-rc12",
+  "version": "0.7.3-rc14",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { View, TouchableOpacity, ActivityIndicator } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 
 import Text from '../Text';
@@ -116,7 +116,7 @@ const NumberUpDownActionTemplate = ({
           onPress={doActionDown}
           accessibilityLabel={AccessibilityLabel.NUMBER_ACTION_DOWN}
         >
-          <AntDesign name="down" size={32} color={Colors.Primary} />
+          <IconOutline name="down" size={32} color={Colors.Primary} />
         </TouchableOpacity>
 
         <Text accessibilityLabel={'text_format'} type="H2">
@@ -132,7 +132,7 @@ const NumberUpDownActionTemplate = ({
           onPress={doActionUp}
           accessibilityLabel={AccessibilityLabel.NUMBER_ACTION_UP}
         >
-          <AntDesign name="up" size={32} color={Colors.Primary} />
+          <IconOutline name="up" size={32} color={Colors.Primary} />
         </TouchableOpacity>
       </View>
     </View>

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/ButtonWrapper.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Switch, View } from 'react-native';
 import styles from './ButtonWrapperStyles';
 import Text from '../../../Text';
@@ -28,7 +28,7 @@ const ButtonWrapper = memo(
           </View>
         ) : (
           <View style={styles.wrapHeadline}>
-            <AntDesign name={'lock'} size={20} color={Colors.Gray9} />
+            <IconOutline name={'lock'} size={20} color={Colors.Gray9} />
             <Text style={styles.textAutoLock}>
               {isButtonEnable ? t('auto_lock_enabled') : t('auto_lock_when')}
             </Text>
@@ -49,7 +49,7 @@ const ButtonWrapper = memo(
             <Text type="Body" style={styles.textValue}>
               {t('instant')}
             </Text>
-            <AntDesign name="right" size={20} color={Colors.Gray7} />
+            <IconOutline name="right" size={20} color={Colors.Gray7} />
           </View>
         )}
         {isButtonReLockTiming && (

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { TextInput, View, TouchableOpacity } 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 Text from '../../../Text';
@@ -39,7 +39,7 @@ const PasscodeList = memo(() => {
       <View style={styles.wrap}>
         <View style={styles.searchBox}>
           <View>
-            <AntDesign name="search" size={24} style={styles.search} />
+            <IconOutline name="search" size={24} style={styles.search} />
           </View>
           <TextInput
             placeholder={t('search')}
@@ -58,7 +58,7 @@ const PasscodeList = memo(() => {
               <Text style={styles.textCode}>{item.code}</Text>
               <Text style={styles.textName}>{item.name}</Text>
             </View>
-            <AntDesign name="right" size={20} color={Colors.Gray8} />
+            <IconOutline name="right" size={20} color={Colors.Gray8} />
           </TouchableOpacity>
         ))}
       </View>

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/ButtonWrapper.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Text, TouchableOpacity, View } from 'react-native';
 
 import { RadioCircle } from '../../..';
@@ -50,7 +50,7 @@ const ButtonWrapper = memo(
         {isButtonChooseUser && (
           <TouchableOpacity style={styles.buttonValue}>
             <Text style={styles.value}>{value}</Text>
-            <AntDesign name="right" size={20} color={Colors.Gray8} />
+            <IconOutline name="right" size={20} color={Colors.Gray8} />
           </TouchableOpacity>
         )}
         {isButtonSetTime && (

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Switch } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import Text from '../../Text';
 import styles from './OnOffSimpleTemplateStyle';
@@ -15,7 +15,7 @@ const OnOffSimpleTemplate = ({
   return (
     <View style={styles.wrap}>
       <View style={styles.iconAndText}>
-        <AntDesign name="poweroff" size={20} style={styles.marginRight} />
+        <IconOutline name="poweroff" size={20} style={styles.marginRight} />
         <Text type="H4">{actionGroup.title}</Text>
       </View>
       {isOn !== null && (

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { View, TouchableOpacity, ScrollView } from 'react-native';
-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';
@@ -139,7 +139,7 @@ const OptionsDropdownActionTemplate = ({
         >
           {displaySelected}
         </Text>
-        <AntDesign name="right" size={20} />
+        <IconOutline name="right" size={20} />
       </TouchableOpacity>
       <AlertAction
         visible={stateAlert.visible}

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -5,7 +5,7 @@ import styles from './SmartTiviActionTemplateStyles';
 import Text from '../../Text';
 import { Colors } from '../../../configs';
 import { SMART_TIVI_BUTTON } from '../../../configs/Constants';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import CircleButton from './component/CircleButton';
 import RectangleButton from './component/RectangleButton';
 import ControlPlay from './component/ControlPlay';
@@ -97,7 +97,7 @@ const SmartTiviActionTemplate = memo(
               <CircleButton
                 type="small"
                 icon={
-                  <AntDesign
+                  <IconOutline
                     name="poweroff"
                     size={20}
                     color={Colors.Gray6}

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/CircleButton.js

@@ -3,7 +3,7 @@ import { TouchableOpacity, View, Image } from 'react-native';
 import styles from './CircleButtonStyles';
 import Text from '../../../Text';
 import { Colors, Images } from '../../../../configs';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const CircleButton = memo(
@@ -46,7 +46,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.UP_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caretup'} />
+                <IconOutline size={14} name={'caret-up'} />
               </TouchableOpacity>
             </View>
             <View style={styles.bodyMultipleButton}>
@@ -57,7 +57,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.LEFT_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caretleft'} />
+                <IconOutline size={14} name={'caret-left'} />
               </TouchableOpacity>
               <TouchableOpacity
                 style={[styles.okButton]}
@@ -77,7 +77,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.RIGHT_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caret-right'} />
+                <IconOutline size={14} name={'caret-right'} />
               </TouchableOpacity>
             </View>
             <View style={styles.footerMultipleButton}>
@@ -88,7 +88,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.DOWN_BUTTON
                 }
               >
-                <AntDesign size={14} name={'caretdown'} />
+                <IconOutline size={14} name={'caret-down'} />
               </TouchableOpacity>
             </View>
           </View>

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/ControlPlay.js

@@ -6,7 +6,7 @@ import styles from './ControlPlayStyles';
 import { Pause } from './Icon';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const ControlPlay = memo(
   ({ onPressPrev, onPressStop, onPressNext, wrapStyle }) => {
@@ -19,9 +19,9 @@ const ControlPlay = memo(
             AccessibilityLabel.SMART_TIVI_TEMPLATE.PREV_BUTTON
           }
         >
-          <AntDesign
+          <IconOutline
             size={32}
-            name={'stepbackward'}
+            name={'backward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />
@@ -42,9 +42,9 @@ const ControlPlay = memo(
             AccessibilityLabel.SMART_TIVI_TEMPLATE.NEXT_BUTTON
           }
         >
-          <AntDesign
+          <IconOutline
             size={32}
-            name={'stepforward'}
+            name={'forward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -6,7 +6,7 @@ import React, {
   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 { useConfigGlobalState } from '../../iot/states';
 import styles from './TerminalBoxTemplateStyle';
@@ -174,7 +174,7 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           accessibilityLabel={AccessibilityLabel.TERMINAL_BOX_BUTTON_SEND}
           disabled={!value}
         >
-          <AntDesign name="send" size={25} />
+          <IconOutline name="send" size={25} />
         </TouchableOpacity>
       </View>
     </View>

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, 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 { AlertAction } from '../../commons';
 import { useDropdownAction } from './hooks/useDropdownAction';
@@ -48,7 +48,7 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           onPress={onShowAlert}
           accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_EDIT}
         >
-          <AntDesign name="edit" size={25} />
+          <IconOutline name="edit" size={25} />
         </TouchableOpacity>
       </View>
       <AlertAction

package/src/commons/ActionGroup/TimerActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Switch, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 import { watchMultiConfigs } from '../../iot/Monitor';
@@ -183,7 +183,10 @@ const TimerActionTemplate = ({ item = {}, doAction, sensor = {} }) => {
           <Text>{title}</Text>
           {configuration.config_hour && configuration.config_minute && (
             <View style={styles.wrapTimer}>
-              <AntDesign style={styles.iconClockCircle} name={'clock-circle'} />
+              <IconOutline
+                style={styles.iconClockCircle}
+                name={'clock-circle'}
+              />
               <Text type="Label" color={Colors.Gray7}>
                 {textTimer ? textTimer : t('set_time')}
               </Text>
@@ -193,7 +196,7 @@ const TimerActionTemplate = ({ item = {}, doAction, sensor = {} }) => {
         {configuration.config_hour && !configuration.config_minute && (
           <View style={styles.timerButton}>
             <Text style={styles.textTimerEndLine}>{textTimer}</Text>
-            <AntDesign name="right" size={20} />
+            <IconOutline name="right" size={20} />
           </View>
         )}
       </TouchableOpacity>

package/src/commons/ActionGroup/TwoButtonTemplate/index.js

@@ -1,4 +1,4 @@
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import React, { memo, useState, useCallback, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
@@ -122,7 +122,7 @@ const TwoButtonTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
             key={index}
           >
             <View style={styles.smallCircle}>
-              <AntDesign
+              <IconOutline
                 name={button?.isCheckOnOff ? button?.icon_on : button?.icon_off}
                 size={44}
                 color={button?.isCheckOnOff ? Colors.Green7 : Colors.Gray6}

package/src/commons/BackDefault/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { AccessibilityLabel } from '../../configs/Constants';
 
 const BackDefault = memo(({ goBack, color, fixedHeight }) => {
@@ -10,7 +10,7 @@ const BackDefault = memo(({ goBack, color, fixedHeight }) => {
       onPress={goBack}
       style={[styles.wrap, fixedHeight && styles.noPaddingVertical]}
     >
-      <AntDesign name="left" size={27} color={color} />
+      <IconOutline name="left" size={27} color={color} />
     </TouchableOpacity>
   );
 });

package/src/commons/ButtonPopup/index.js

@@ -1,6 +1,6 @@
 import React 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 { Colors, Device } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
@@ -42,7 +42,7 @@ const ButtonPopup = ({
       <View style={styles.popoverStyle}>
         <View style={styles.modalWrapper}>
           {!hideClose && (
-            <AntDesign
+            <IconOutline
               name={'close'}
               color={Colors.Gray8}
               style={styles.close}

package/src/commons/DateTimeRangeChange/DateTimeButton.js

@@ -1,13 +1,13 @@
 import React, { memo } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 
 const DateTimeButton = memo(({ onPress, style, children }) => {
   return (
     <TouchableOpacity style={[styles.dateSelect, style]} onPress={onPress}>
       {children}
-      <AntDesign style={styles.iconDateTime} name={'calendar'} />
+      <IconOutline style={styles.iconDateTime} name={'calendar'} />
     </TouchableOpacity>
   );
 });

package/src/commons/Device/ConnectedViewHeader.js

@@ -1,6 +1,6 @@
 import React, { memo } 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 { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -30,7 +30,7 @@ const ConnectedViewHeader = memo(
     return (
       <View style={styles.statusContainer}>
         <View style={styles.connectStatus}>
-          <AntDesign name={'wifi'} color={Colors.Green6} size={16} />
+          <IconOutline name={'wifi'} color={Colors.Green6} size={16} />
           <DisplayTextConnected type={type} />
         </View>
         {isDisplayTime && (

package/src/commons/Device/Emergency/EmergencyDetail.js

@@ -6,7 +6,7 @@ import MediaPlayer from '../../MediaPlayer';
 import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { Colors, Device } from '../../../configs';
 import { RowUser } from '../../RowUser';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useEmeragencyContacts } from '../../../screens/EmergencyContacts/hook';
 import { useIsFocused } from '@react-navigation/native';
 
@@ -49,12 +49,12 @@ const EmergencyDetail = memo(({ item }) => {
               key={contact.id.toString()}
               index={index}
               leftIcon={
-                <AntDesign name={'user'} size={20} color={Colors.White} />
+                <IconOutline name={'user'} size={20} color={Colors.White} />
               }
               text={contact.name}
               rightComponent={
                 <View style={styles.rightComponent}>
-                  <AntDesign
+                  <IconOutline
                     name={'phone'}
                     size={20}
                     color={Colors.Gray9}

package/src/commons/Device/FlatListItems.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useState } 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 { Colors, Constants } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
 import { useBoolean } from '../../hooks/Common';
@@ -75,7 +75,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
             style={styles.iconInfo}
             accessibilityLabel={AccessibilityLabel.TOUCH_INFO_FLAT_LIST_ITEM}
           >
-            <AntDesign name={'info-circle'} size={16} color={Colors.Gray8} />
+            <IconOutline name={'info-circle'} size={16} color={Colors.Gray8} />
           </TouchableOpacity>
         )}
       </View>
@@ -98,7 +98,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
           onPress={() => setViewFull(true)}
         >
           <Text style={styles.textSeeMore}>{t('see_more')}</Text>
-          <AntDesign name={'caretdown'} color={Colors.Gray8} size={16} />
+          <IconOutline name={'caret-down'} color={Colors.Gray8} size={16} />
         </TouchableOpacity>
       )}
 

package/src/commons/Device/Hanet/ItemHanetDevice.js

@@ -5,7 +5,7 @@ import {
   TouchableWithoutFeedback,
   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 Text from '../../Text';
@@ -35,7 +35,7 @@ const ItemHanetDevice = memo(
       return iconKit ? (
         <FImage source={{ uri: iconKit }} style={styles.iconSensor} />
       ) : (
-        <AntDesign name={svgMain} size={32} color={Colors.Red6} />
+        <IconOutline name={svgMain} size={32} color={Colors.Red6} />
       );
     };
 
@@ -58,7 +58,7 @@ const ItemHanetDevice = memo(
               {title}
             </Text>
             <View style={styles.row}>
-              <AntDesign name="right" size={12} />
+              <IconOutline name="right" size={12} />
             </View>
           </TouchableOpacity>
         </View>

package/src/commons/Device/ItemAddNew/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../Text';
 
 import { Colors } from '../../../configs';
@@ -16,7 +16,7 @@ const ItemAddNew = memo(({ title, onAddNew, wrapStyle }) => {
       <View style={[styles.container, wrapStyle]}>
         <View style={styles.boxIcon}>
           <View style={styles.buttonPlus}>
-            <AntDesign name="plus" size={22} color={Colors.Gray8} />
+            <IconOutline name="plus" size={22} color={Colors.Gray8} />
           </View>
         </View>
         <View>

package/src/commons/Device/ItemDevice.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import Routes from '../../utils/Route';
-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 ItemQuickAction from '../../commons/Action/ItemQuickAction';
@@ -116,7 +116,7 @@ const ItemDevice = memo(
             >
               {description || textConnected}
             </Text>
-            <AntDesign name="right" size={12} />
+            <IconOutline name="right" size={12} />
           </View>
         </TouchableOpacity>
       </ItemDeviceWrapper>

package/src/commons/Device/SonosSpeaker/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Slider } from '@miblanchard/react-native-slider';
 
 import Text from '../../Text';
@@ -44,7 +44,7 @@ const SonosSpeaker = memo(() => {
         </TouchableOpacity>
         <View style={styles.threeButton}>
           <TouchableOpacity style={styles.buttonLeft}>
-            <AntDesign name={'backward'} size={35} color={Colors.Black} />
+            <IconOutline name={'backward'} size={35} color={Colors.Black} />
           </TouchableOpacity>
           <TouchableOpacity
             style={styles.buttonCenter}
@@ -53,7 +53,7 @@ const SonosSpeaker = memo(() => {
             {active ? <SvgButtonPauseActive /> : <SvgButtonPauseNotActive />}
           </TouchableOpacity>
           <TouchableOpacity style={styles.buttonRight}>
-            <AntDesign name={'forward'} size={35} color={Colors.Black} />
+            <IconOutline name={'forward'} size={35} color={Colors.Black} />
           </TouchableOpacity>
         </View>
       </View>

package/src/commons/Device/WaterPurifierStatus/AlertStatusMachine.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import Text from '../../../commons/Text';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const AlertStatusMachine = memo(({ message, style, icon }) => {
   return (
     <View style={[styles.container, style]}>
-      <AntDesign
+      <IconOutline
         name={icon}
         size={20}
         color={style.borderColor}

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

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, Dimensions, StyleSheet, TouchableOpacity } 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 { Colors } from '../../../configs';
@@ -35,7 +35,11 @@ const QualityIndicatorItem = memo(
               onPress={() => navigation.navigate(descriptionScreen)}
               style={styles.iconInfo}
             >
-              <AntDesign name={'info-circle'} size={18} color={Colors.Gray8} />
+              <IconOutline
+                name={'info-circle'}
+                size={18}
+                color={Colors.Gray8}
+              />
             </TouchableOpacity>
           )}
         </View>

package/src/commons/DisplayChecking/index.js

@@ -3,7 +3,7 @@ import { View, TouchableOpacity } from 'react-native';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import styles from './styles';
 import { ModalCustom } from '../Modal';
 import Loading from '../../screens/Automate/Components/Loading';
@@ -18,7 +18,7 @@ const LoadingMessage = memo(({ visible, onClose, message }) => {
           onPress={onClose}
         >
           <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}>
             {message}

package/src/commons/EmergencyButton/AlertSendConfirm.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { ButtonPopup } from '../index';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -29,7 +29,7 @@ const AlertSendConfirm = ({
       bodyStyle={styles.buttonPopupBody}
     >
       <View style={styles.firstInfo}>
-        <AntDesign name="clockcircleo" size={42} style={styles.clock} />
+        <IconOutline name="clock-circle" size={42} style={styles.clock} />
         <Text semibold type="H4" style={styles.textAlertWillBe}>
           {t('alert_will_be_sent_in')}
         </Text>

package/src/commons/FieldTemplate/ChooseUserField/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useState } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { TouchableOpacity, View } from 'react-native';
 
 import styles from './ChooseFieldStyles';
@@ -47,7 +47,7 @@ const ChooseUserField = ({ unit, dataItem, index, setDataForm, dataForm }) => {
         onPress={setShowFilterPopup}
       >
         <Text style={styles.value}>{choose.name}</Text>
-        <AntDesign name="right" size={20} color={Colors.Gray8} />
+        <IconOutline name="right" size={20} color={Colors.Gray8} />
       </TouchableOpacity>
       <ChoosePopup
         isVisible={showFilterPopup}