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

package/src/commons/Header/HeaderCustom.js

@@ -2,7 +2,7 @@ import React, { useCallback, useRef } from 'react';
 import { View, Text, TouchableOpacity, Image } from 'react-native';
 import Images from '../../configs/Images';
 import { Colors } from '../../configs';
-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 } from '@react-navigation/native';
 import styles from './Styles/HeaderCustomStyles';
@@ -111,7 +111,7 @@ const HeaderCustom = ({
         {isShowClose && (
           <TouchableOpacity onPress={handleClose}>
             <View style={styles.buttonAdd}>
-              <AntDesign name={'close'} size={24} color={Colors.Black} />
+              <IconOutline name={'close'} size={24} color={Colors.Black} />
             </View>
           </TouchableOpacity>
         )}

package/src/commons/HeaderAni/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { TouchableOpacity, StyleSheet, Animated, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
@@ -95,7 +95,7 @@ const HeaderAni = memo(
             accessibilityLabel={AccessibilityLabel.ICON_BACK}
           >
             <View style={styles.btnBack}>
-              <AntDesign name={'left'} size={27} color={Colors.Gray9} />
+              <IconOutline name={'left'} size={27} color={Colors.Gray9} />
             </View>
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>

package/src/commons/NavBar/index.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { View, TouchableOpacity } from 'react-native';
 
 import styles from './NavBarStyles';
@@ -40,7 +40,7 @@ const NavBar = ({
           ref={refMenuAction}
           accessibilityLabel={idLabelIconBars}
         >
-          <AntDesign name={'bars'} size={19} color={Colors.Black} />
+          <IconOutline name={'bars'} size={19} color={Colors.Black} />
         </TouchableOpacity>
       </View>
       <MenuActionMore

package/src/commons/OneTapTemplate/NumberUpDownActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { memo, 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 { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './NumberUpDownActionTemplateStyles';
@@ -118,7 +118,7 @@ const NumberUpDownActionTemplate = ({ device, item = {}, onSelectAction }) => {
                   AccessibilityLabel.NUMBER_UP_DOWN_ACTION_DOWN
                 }
               >
-                <AntDesign name="down" size={32} color={Colors.Primary} />
+                <IconOutline name="down" size={32} color={Colors.Primary} />
               </TouchableOpacity>
               <Text
                 type="H2"
@@ -134,7 +134,7 @@ const NumberUpDownActionTemplate = ({ device, item = {}, onSelectAction }) => {
                 onPress={onPressUp}
                 accessibilityLabel={AccessibilityLabel.NUMBER_UP_DOWN_ACTION_UP}
               >
-                <AntDesign name="up" size={32} color={Colors.Primary} />
+                <IconOutline name="up" size={32} color={Colors.Primary} />
               </TouchableOpacity>
             </View>
             <View style={styles.wrapButton}>

package/src/commons/SearchLocation/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, TextInput } 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';
@@ -10,8 +10,8 @@ const SearchBarLocation = memo(({ input, onTextInput }) => {
   const t = useTranslations();
   return (
     <View style={styles.container}>
-      <AntDesign
-        name="search1"
+      <IconOutline
+        name="search"
         size={24}
         color={Colors.Gray6}
         accessibilityLabel="icon-search"

package/src/commons/SelectActionCard/index.js

@@ -1,6 +1,6 @@
 import React, { memo } 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 { Card } from '../CardShadow';
 import Text from '../Text';
@@ -20,7 +20,7 @@ const SelectActionCard = memo(({ title, action, onPress }) => {
               {action}
             </Text>
           </View>
-          <AntDesign name="right" size={20} />
+          <IconOutline name="right" size={20} />
         </View>
       </TouchableOpacity>
     </Card>

package/src/commons/SelectSubUnit/index.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import { API, Colors } from '../../configs';
 import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
@@ -98,7 +98,11 @@ const SelectSubUnit = ({ unitId, title, subTitle, onPressNext, route }) => {
               />
             ))}
             <TouchableOpacity style={styles.rowContainer} onPress={addSubUnit}>
-              <AntDesign name="plus-circle" size={20} color={Colors.Primary} />
+              <IconOutline
+                name="plus-circle"
+                size={20}
+                color={Colors.Primary}
+              />
               <View style={styles.row}>
                 <Text type="H4" color={Colors.Primary}>
                   {t('add_new_sub_unit')}

package/src/commons/Sharing/BtnRemoveMember.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback } 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 { Colors } from '../../configs';
 
 const BtnRemoveMember = memo(({ member, onPressRemove }) => {
@@ -9,7 +9,7 @@ const BtnRemoveMember = memo(({ member, onPressRemove }) => {
   }, [member, onPressRemove]);
   return (
     <TouchableOpacity style={styles.buttonRemove} onPress={onPress}>
-      <AntDesign name={'minus'} size={20} color={Colors.Gray8} />
+      <IconOutline name={'minus'} size={20} color={Colors.Gray8} />
     </TouchableOpacity>
   );
 });

package/src/commons/Sharing/StationDevicePermissions.js

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import { View, StyleSheet, 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 { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -86,7 +86,7 @@ const StationDevicePermissions = ({ dataStation, onselectSensor }) => {
           <View style={styles.infoContainer}>
             <Text style={styles.text}>{sensor.name}</Text>
             <View style={styles.rightImage}>
-              <AntDesign
+              <IconOutline
                 name={expandedIndex === index ? 'up' : 'down'}
                 size={20}
                 color={Colors.Gray6}

package/src/commons/SubUnit/DeviceTemplate/ConfigAndEvaluation/ConfigAndEvaluation.js

@@ -5,7 +5,7 @@ import Text from '../../../Text';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import { EvaluationConfigWrapper } from '../EvaluationOverConfig/EvaluationOverConfig';
 import IconComponent from '../../../IconComponent';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const ConfigAndEvaluationDisplay = memo(
   ({ device, valueEvaluation, stationItem, configValue }) => {
@@ -44,7 +44,7 @@ const ConfigAndEvaluationDisplay = memo(
               lastUpdated={configValue?.last_updated}
               format={'DDMMYYYY'}
             />
-            <AntDesign style={styles.marginTop10} name="right" size={12} />
+            <IconOutline style={styles.marginTop10} name="right" size={12} />
           </View>
         )}
       </>

package/src/commons/SubUnit/DeviceTemplate/ConfigValue/ConfigValue.js

@@ -5,7 +5,7 @@ import Text from '../../../Text';
 import { useConfigGlobalState } from '../../../../iot/states';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import IconComponent from '../../../IconComponent';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const ConfigValue = ({ device, stationItem }) => {
   const [configValues] = useConfigGlobalState('configValues');
@@ -40,7 +40,7 @@ const ConfigValue = ({ device, stationItem }) => {
               lastUpdated={configValue?.last_updated}
               format={'DDMMYYYY'}
             />
-            <AntDesign style={styles.marginTop10} name="right" size={12} />
+            <IconOutline style={styles.marginTop10} name="right" size={12} />
           </View>
         )}
       </View>

package/src/commons/SubUnit/DeviceTemplate/EvaluationOverConfig/EvaluationOverConfig.js

@@ -9,7 +9,7 @@ import {
 } from '../../../../screens/Device/hooks/useEvaluateValue';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import IconComponent from '../../../IconComponent';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 export const EvaluationConfigWrapper = memo(
   ({ device, stationItem, Child }) => {
@@ -69,7 +69,7 @@ const EvaluationOverConfigDisplay = memo(
                 lastUpdated={configValue?.last_updated}
                 format={'DDMMYYYY'}
               />
-              <AntDesign style={styles.marginTop10} name="right" size={12} />
+              <IconOutline style={styles.marginTop10} name="right" size={12} />
             </View>
           )}
         </View>

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import moment from 'moment';
 import Text from '../../Text';
 import { API, Colors } from '../../../configs';
@@ -107,7 +107,7 @@ const ItemOneTap = memo(({ automate = {}, wrapSyles, onPressItem }) => {
             >
               {activateAt && t('activated_time', { time: activateAt })}
             </Text>
-            <AntDesign name="right" size={12} />
+            <IconOutline name="right" size={12} />
           </View>
         </TouchableOpacity>
       </View>

package/src/commons/Unit/HeaderUnit/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo, useRef } from 'react';
 import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-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 { useNavigation, useRoute } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
@@ -53,7 +53,7 @@ const HeaderUnit = memo(({ transparent, unit }) => {
         onPress={handleGoBack}
       >
         <View style={styles.btnLeft}>
-          <AntDesign name={'left'} size={27} color={colorHeader} />
+          <IconOutline name={'left'} size={27} color={colorHeader} />
         </View>
       </TouchableOpacity>
       {!transparent && (
@@ -71,7 +71,7 @@ const HeaderUnit = memo(({ transparent, unit }) => {
             onPress={setShowAdd}
           >
             <View style={styles.btnAdd}>
-              <AntDesign name={'plus'} size={27} color={colorHeader} />
+              <IconOutline name={'plus'} size={27} color={colorHeader} />
             </View>
           </TouchableOpacity>
         )}

package/src/commons/Unit/SharedUnit.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useCallback } from 'react';
 import { View, Image, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 
 import { API, Colors, Images } from '../../configs';
 import Text from '../../commons/Text';
@@ -91,7 +91,7 @@ const SharedUnit = ({
         {isOptions && (
           <Fragment>
             {item.is_pin ? (
-              <AntDesign
+              <IconFill
                 name="pushpin"
                 size={20}
                 color={Colors.Blue10}
@@ -99,15 +99,15 @@ const SharedUnit = ({
                 accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT}-${item.id}`}
               />
             ) : (
-              <AntDesign
-                name="pushpino"
+              <IconOutline
+                name="pushpin"
                 size={20}
                 onPress={addPinSharedUnit}
                 accessibilityLabel={`${AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT}-${item.id}`}
               />
             )}
             {item.is_star ? (
-              <AntDesign
+              <IconFill
                 name="star"
                 size={20}
                 color={Colors.Yellow6}
@@ -115,8 +115,8 @@ const SharedUnit = ({
                 accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT}-${item.id}`}
               />
             ) : (
-              <AntDesign
-                name="staro"
+              <IconOutline
+                name="star"
                 size={20}
                 onPress={addStarSharedUnit}
                 accessibilityLabel={`${AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT}-${item.id}`}

package/src/navigations/EmergencyContactsStack.js

@@ -1,4 +1,4 @@
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
@@ -19,7 +19,7 @@ export const EmergencyContactsStack = memo(() => {
         ...screenOptions,
         headerTitleAlign: 'center',
         headerBackImage: () => (
-          <AntDesign
+          <IconOutline
             name="left"
             size={27}
             color={Colors.Black}

package/src/navigations/UnitStack.js

@@ -1,6 +1,6 @@
 import React, { memo, useContext, useEffect } from 'react';
 import { AppState, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { BleManager } from 'react-native-ble-plx';
 import NetInfo from '@react-native-community/netinfo';
@@ -173,7 +173,7 @@ export const UnitStack = memo((props) => {
         ...screenOptions,
         headerTitleAlign: 'center',
         headerBackImage: () => (
-          <AntDesign
+          <IconOutline
             name="left"
             size={27}
             color={Colors.Black}

package/src/screens/ActivityLog/index.js

@@ -7,7 +7,7 @@ import {
   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 { Colors } from '../../configs';
 import { HeaderCustom } from '../../commons/Header';
 import ItemLog from './ItemLog';
@@ -83,7 +83,7 @@ const ActivityLogScreen = ({ route }) => {
         onPress={setShowFilterPopup}
         accessibilityLabel={AccessibilityLabel.FILTER_BUTTON}
       >
-        <AntDesign name={'filter'} size={27} color={Colors.Black} />
+        <IconOutline name={'filter'} size={27} color={Colors.Black} />
       </TouchableOpacity>
     ),
     [setShowFilterPopup]

package/src/screens/AddLocationMaps/index.js

@@ -2,7 +2,7 @@ import React, { memo, useState, useCallback, useRef, useEffect } from 'react';
 import { View, ScrollView, TouchableOpacity } 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 { useTranslations } from '../../hooks/Common/useTranslations';
@@ -225,7 +225,7 @@ const AddLocationMaps = memo(() => {
                   style={styles.button}
                   accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
                 >
-                  <AntDesign
+                  <IconOutline
                     name="enviroment"
                     size={27}
                     color={Colors.Primary}
@@ -274,7 +274,7 @@ const AddLocationMaps = memo(() => {
                   }}
                   tracksViewChanges={false}
                 >
-                  <AntDesign
+                  <IconOutline
                     name="enviroment"
                     size={27}
                     color={Colors.Blue10}

package/src/screens/AddNewGateway/RenameNewDevices.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect, useState, useMemo } from 'react';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { CommonActions, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
@@ -357,7 +357,7 @@ const RenameNewDevices = memo(({ route }) => {
       />
       <View style={styles.content}>
         <View style={styles.viewIconSuccess}>
-          <AntDesign name="check-circle" size={28} color={Colors.Green6} />
+          <IconOutline name="check-circle" size={28} color={Colors.Green6} />
           <Text
             semibold
             color={Colors.Black}

package/src/screens/Automate/AddNewAction/NewActionWrapper.js

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 import { useNavigation, useRoute } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { FullLoading, HeaderCustom } from '../../../commons';
 import BottomButtonView from '../../../commons/BottomButtonView';
 import { Colors } from '../../../configs';
@@ -35,7 +35,7 @@ const NewActionWrapper = ({
         onPress={handleClose}
         accessibilityLabel={AccessibilityLabel.ICON_CLOSE}
       >
-        <AntDesign name={'close'} size={24} color={Colors.Black} />
+        <IconOutline name={'close'} size={24} color={Colors.Black} />
       </TouchableOpacity>
     ),
     [handleClose]

package/src/screens/Automate/AddNewAction/SetupConfigCondition.js

@@ -43,7 +43,7 @@ const SetupConfigCondition = () => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const { params = {} } = useRoute();
-  const { config, automate, closeScreen } = params;
+  const { config, automate, closeScreen, unitId } = params;
   const [selectedCondition, setSelectedCondition] = useState(undefined);
   const [customCondition, setCustomCondition] = useState(undefined);
   const [isShowModal, setIsShowModal] = useState(false);
@@ -88,6 +88,7 @@ const SetupConfigCondition = () => {
     navigate(Routes.ValueChangeName, {
       automate,
       closeScreen,
+      unitId,
     });
   };
 
@@ -180,7 +181,11 @@ const SetupConfigCondition = () => {
                 return;
               }
               setIsShowModal(false);
-              navigate(Routes.ValueChangeName, { automate, closeScreen });
+              navigate(Routes.ValueChangeName, {
+                automate,
+                closeScreen,
+                unitId,
+              });
             }}
             style={styles.buttonContinue}
             textSemiBold={false}

package/src/screens/Automate/ScriptDetail/Components/AddActionScript.js

@@ -11,7 +11,7 @@ import Event from '../../../../../assets/images/Event.svg';
 import Notify from '../../../../../assets/images/Notify.svg';
 import Delay from '../../../../../assets/images/Delay.svg';
 import { TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Text } from '../../../../commons';
 import Routes from '../../../../utils/Route';
 import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
@@ -117,7 +117,7 @@ const AddActionScript = memo(
                   <View style={styles.wapItem}>
                     <View style={styles.imageItem}>{item.image}</View>
                     <Text style={styles.textItem}>{item.text}</Text>
-                    <AntDesign name="right" />
+                    <IconOutline name="right" />
                   </View>
                 </TouchableOpacity>
               </View>

package/src/screens/Automate/ScriptDetail/index.js

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { Image, Platform, Switch, TouchableOpacity, View } from 'react-native';
 import { PopoverMode } from 'react-native-popover-view';
-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 { useIsFocused, useNavigation } from '@react-navigation/native';
@@ -479,9 +479,9 @@ const ButtonStar = ({ automate }) => {
       accessibilityLabel={AccessibilityLabel.HEADER_SCRIPT_DETAIL_BUTTON_STAR}
     >
       {isStarred ? (
-        <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} />
       )}
     </PreventDoubleTouch>
   );

package/src/screens/Automate/Styles/indexStyles.js

@@ -65,9 +65,9 @@ export default StyleSheet.create({
     width: (Constants.width - 40) / 2,
   },
   automatesRow: {
+    display: 'flex',
     flexDirection: 'row',
     marginTop: 8,
     overflow: 'hidden',
-    alignSelf: 'center',
   },
 });

package/src/screens/Automate/index.js

@@ -1,3 +1,9 @@
+import { IconFill } from '@ant-design/icons-react-native';
+import {
+  useIsFocused,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native';
 import React, {
   useCallback,
   useEffect,
@@ -6,27 +12,21 @@ import React, {
   useState,
 } from 'react';
 import { FlatList, Image, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
-import {
-  useIsFocused,
-  useNavigation,
-  useRoute,
-} from '@react-navigation/native';
 import { useSCContextSelector } from '../../context';
 
-import styles from './Styles/indexStyles';
+import ItemAddNew from '../../commons/Device/ItemAddNew';
+import ItemOneTap from '../../commons/SubUnit/OneTap/ItemOneTap';
+import Text from '../../commons/Text';
 import { API, Colors, Images } from '../../configs';
+import { AccessibilityLabel, UNIT_TYPES } from '../../configs/Constants';
+import { useGetIdUser } from '../../hooks/Common';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { axiosGet } from '../../utils/Apis/axios';
-import Text from '../../commons/Text';
-import ItemOneTap from '../../commons/SubUnit/OneTap/ItemOneTap';
+import { useBackendPermission } from '../../utils/Permission/backend';
 import Routes from '../../utils/Route';
-import Loading from './Components/Loading';
-import ItemAddNew from '../../commons/Device/ItemAddNew';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import { useGetIdUser } from '../../hooks/Common';
-import { AccessibilityLabel, UNIT_TYPES } from '../../configs/Constants';
 import { keyExtractor, ToastBottomHelper } from '../../utils/Utils';
-import { useBackendPermission } from '../../utils/Permission/backend';
+import Loading from './Components/Loading';
+import styles from './Styles/indexStyles';
 
 const Automate = () => {
   const t = useTranslations();
@@ -164,29 +164,32 @@ const Automate = () => {
               <Image source={Images.arrowBack} style={styles.arrowRight} />
             </TouchableOpacity>
           </View>
-          {!!automates?.length && (
-            <View style={styles.automatesRow}>
-              <ItemOneTap
-                isOwner={isOwner}
-                automate={automates[0]}
-                wrapSyles={styles.wrapAutomateItem}
-                onPressItem={() =>
-                  onPressItem(automates[0], unit_id, type, isOwner)
-                }
-              />
-              {!!automates[1] && (
+          <View style={styles.automatesRow}>
+            {!!automates?.length && (
+              <>
                 <ItemOneTap
                   isOwner={isOwner}
-                  automate={automates[1]}
+                  automate={automates[0]}
                   wrapSyles={styles.wrapAutomateItem}
                   onPressItem={() =>
-                    onPressItem(automates[1], unit_id, type, isOwner)
+                    onPressItem(automates[0], unit_id, type, isOwner)
                   }
                 />
-              )}
-            </View>
-          )}
-          {!automates?.length && renderListFooterComponent(unit_id, automates)}
+                {!!automates[1] && (
+                  <ItemOneTap
+                    isOwner={isOwner}
+                    automate={automates[1]}
+                    wrapSyles={styles.wrapAutomateItem}
+                    onPressItem={() =>
+                      onPressItem(automates[1], unit_id, type, isOwner)
+                    }
+                  />
+                )}
+              </>
+            )}
+            {(!automates?.length || automates.length === 1) &&
+              renderListFooterComponent(unit_id, automates)}
+          </View>
         </View>
       );
     },
@@ -210,7 +213,7 @@ const Automate = () => {
       /* istanbul ignore next */
       headerRight: () => (
         <TouchableOpacity style={styles.buttonAdd}>
-          <AntDesign name={'pluscircle'} size={28} color={Colors.Orange} />
+          <IconFill name={'plus-circle'} size={28} color={Colors.Orange} />
         </TouchableOpacity>
       ),
     });