@eohjsc/react-native-smart-city 0.7.3-rc9 → 0.7.4

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

@@ -8,7 +8,6 @@ import MockAdapter from 'axios-mock-adapter';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import ScriptDetail from '../index';
-import MenuActionMore from '../../../../commons/MenuActionMore';
 import AlertAction from '../../../../commons/AlertAction';
 import _TextInput from '../../../../commons/Form/TextInput';
 import {
@@ -18,12 +17,12 @@ import {
 import { API } from '../../../../configs';
 import Routes from '../../../../utils/Route';
 import WrapHeaderScrollable from '../../../../commons/Sharing/WrapHeaderScrollable';
-import ItemAutomate from '../../../../commons/Automate/ItemAutomate';
 import api from '../../../../utils/Apis/axios';
 import Text from '../../../../commons/Text';
 import { ToastBottomHelper } from '../../../../utils/Utils';
 import { getTranslate } from '../../../../utils/I18n';
 import AddActionScript from '../Components/AddActionScript';
+import ItemConditionScriptDetail from '../../../../commons/Automate/ItemConditionScriptDetail';
 
 const wrapComponent = (route, storeData = {}) => (
   <SCProvider initState={mockSCStore(storeData)}>
@@ -101,7 +100,10 @@ describe('Test ScriptDetail', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const menu = instance.findByType(MenuActionMore);
+    const menu = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.MENU_POPPER_MORE
+    );
     const alertAction = instance.findAllByType(AlertAction)[0];
     const rename = menu.props.listMenuItem[0];
 
@@ -127,7 +129,10 @@ describe('Test ScriptDetail', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const menu = instance.findByType(MenuActionMore);
+    const menu = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.MENU_POPPER_MORE
+    );
     const alertAction = instance.findAllByType(AlertAction)[0];
     const rename = menu.props.listMenuItem[0];
 
@@ -153,9 +158,9 @@ describe('Test ScriptDetail', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const menu = instance.findByProps({
-      accessibilityLabel: AccessibilityLabel.ICON_MORE,
-    });
+    const menu = instance.find(
+      (el) => el.props.accessibilityLabel === AccessibilityLabel.ICON_MORE
+    );
 
     await act(async () => {
       await menu.props.onPress();
@@ -173,7 +178,7 @@ describe('Test ScriptDetail', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const itemAutomate = instance.findByType(ItemAutomate);
+    const itemAutomate = instance.findByType(ItemConditionScriptDetail);
 
     await act(async () => {
       await itemAutomate.props.onPress();
@@ -188,7 +193,10 @@ describe('Test ScriptDetail', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const menu = instance.findByType(MenuActionMore);
+    const menu = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.MENU_POPPER_MORE
+    );
     const alertAction = instance.findAllByType(AlertAction)[1];
     const deleteItem = menu.props.listMenuItem[2];
 
@@ -222,7 +230,10 @@ describe('Test ScriptDetail', () => {
     await act(async () => {
       await buttonStar.props.onPress();
     });
-    const menu = instance.findByType(MenuActionMore);
+    const menu = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.MENU_POPPER_MORE
+    );
     const addFavorite = menu.props.listMenuItem[1];
     mock.onPost(API.AUTOMATE.STAR_SCRIPT(1)).reply(200);
     await act(async () => {
@@ -308,6 +319,8 @@ describe('Test ScriptDetail', () => {
         unitId: route.params.preAutomate.unit,
         automateId: route.params.preAutomate.id,
         numberActionCanAdd: 2,
+        closeScreen: undefined,
+        routeName: null,
       }
     );
     mockedNavigate.mockClear();
@@ -344,7 +357,7 @@ describe('Test ScriptDetail', () => {
     const instance = tree.root;
     const switchButton = instance.findByType(Switch);
     await act(async () => {
-      await switchButton.props.onChange(false);
+      await switchButton.props.onValueChange(false);
     });
     const buttonAddScript = instance.findAll(
       (el) =>
@@ -442,7 +455,10 @@ describe('Test ScriptDetail', () => {
         tree = await create(wrapComponent(route));
       });
       const instance = tree.root;
-      const menu = instance.findByType(MenuActionMore);
+      const menu = instance.find(
+        (el) =>
+          el.props.accessibilityLabel === AccessibilityLabel.MENU_POPPER_MORE
+      );
       const gotoActivityLog = menu.props.listMenuItem[1];
 
       await act(async () => {
@@ -490,7 +506,7 @@ describe('Test ScriptDetail', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const itemAutomate = instance.findByType(ItemAutomate);
+    const itemAutomate = instance.findByType(ItemConditionScriptDetail);
     expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
       'Light Value higher than 3'
     );
@@ -498,6 +514,15 @@ describe('Test ScriptDetail', () => {
     await act(async () => {
       itemAutomate.findByType(TouchableOpacity).props.onPress();
     });
+    const menuActionMore = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.MENU_ACTION_LIST_TOUCHABLE
+    );
+    await act(async () => {
+      menuActionMore.props.onItemClick({ doAction: jest.fn() });
+      menuActionMore.props.listMenuItem[0].doAction();
+    });
     expect(global.mockedNavigate).toBeCalled();
   });
 
@@ -513,7 +538,7 @@ describe('Test ScriptDetail', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const itemAutomate = instance.findByType(ItemAutomate);
+    const itemAutomate = instance.findByType(ItemConditionScriptDetail);
     expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
       'Light Value equal 3'
     );
@@ -535,7 +560,7 @@ describe('Test ScriptDetail', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const itemAutomate = instance.findByType(ItemAutomate);
+    const itemAutomate = instance.findByType(ItemConditionScriptDetail);
     expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
       'Light Value lower than 3'
     );
@@ -557,7 +582,7 @@ describe('Test ScriptDetail', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const itemAutomate = instance.findByType(ItemAutomate);
+    const itemAutomate = instance.findByType(ItemConditionScriptDetail);
     expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
       'Every day at 19:00'
     );
@@ -580,7 +605,7 @@ describe('Test ScriptDetail', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const itemAutomate = instance.findByType(ItemAutomate);
+    const itemAutomate = instance.findByType(ItemConditionScriptDetail);
     expect(itemAutomate.findAllByType(Text)[1].props.children).toEqual(
       'Mon, Tue, Thu, Sat at 19:00'
     );

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

@@ -7,14 +7,13 @@ 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';
 import Add from '../../../../assets/images/Add.svg';
 import Delay from '../../../../assets/images/Delay.svg';
 import Notify from '../../../../assets/images/Notify.svg';
-import ItemAutomate from '../../../commons/Automate/ItemAutomate';
 import IconComponent from '../../../commons/IconComponent';
 import MenuActionMore from '../../../commons/MenuActionMore';
 import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
@@ -34,6 +33,7 @@ import DeleteScript from './Components/DeleteScript';
 import RenameScript from './Components/RenameScript';
 import { useStarredScript } from './hooks/useStarredScript';
 import styles from './Styles/indexStyles';
+import ItemConditionScriptDetail from '../../../commons/Automate/ItemConditionScriptDetail';
 
 const PreventDoubleTouch = withPreventDoubleClick(TouchableOpacity);
 
@@ -45,11 +45,10 @@ const ScriptDetail = ({ route }) => {
     usePopover();
   const t = useTranslations();
   const {
-    id,
     saveAt,
     preAutomate = {}, // pre-loaded automate data
-    newAutomate, // updated automate data
     newActionsList, // updated actions list
+    closeScreen,
   } = params;
   const [automate, setAutomate] = useState(preAutomate);
   const isFocused = useIsFocused();
@@ -63,7 +62,7 @@ const ScriptDetail = ({ route }) => {
   const [enableScript, setEnableScript] = useState(enable);
   const onShowActivityLog = useCallback(() => {
     navigate(Routes.ActivityLog, {
-      id: id,
+      id: automateId,
       type:
         type === AUTOMATE_TYPE.ONE_TAP
           ? `automate.${AUTOMATE_TYPE.ONE_TAP}`
@@ -74,7 +73,7 @@ const ScriptDetail = ({ route }) => {
         user: Boolean(unit),
       },
     });
-  }, [navigate, id, type, unit]);
+  }, [navigate, automateId, type, unit]);
 
   const listMenuItem = useMemo(
     () => [
@@ -107,39 +106,41 @@ const ScriptDetail = ({ route }) => {
 
   const fetchAutomateActions = useCallback(async () => {
     const { success, data: automateData } = await axiosGet(
-      API.AUTOMATE.SCRIPT_ITEMS(id)
+      API.AUTOMATE.SCRIPT_ITEMS(automateId)
     );
     if (success) {
       setData(automateData.script_items || []);
     }
-  }, [id]);
+  }, [automateId]);
 
   const fetchAutomate = useCallback(async () => {
     const { success, data: automateData } = await axiosGet(
-      API.AUTOMATE.FETCH_AUTOMATE(id)
+      API.AUTOMATE.FETCH_AUTOMATE(automateId)
     );
     if (success) {
       setAutomate(automateData);
       setEnableScript(automateData.script.enable);
     }
-  }, [id]);
+  }, [automateId]);
 
   const onPressEdit = useCallback(() => {
     navigate(Routes.EditActionsList, {
       data,
-      id,
+      id: automateId,
       unitId: automate.unit,
     });
-  }, [navigate, data, id, automate.unit]);
+  }, [navigate, data, automateId, automate.unit]);
 
   const handleScriptAction = useCallback(async () => {
-    const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
+    const { success } = await axiosPost(
+      API.AUTOMATE.ACTION_ONE_TAP(automateId)
+    );
     if (success) {
       ToastBottomHelper.success(t('activated_successfully'));
     } else {
       ToastBottomHelper.error(t('activation_failed'));
     }
-  }, [id, t]);
+  }, [automateId, t]);
 
   const handleUpdateAutomate = useCallback(async () => {
     if (!can_edit) {
@@ -158,6 +159,19 @@ const ScriptDetail = ({ route }) => {
     });
   }, [automate, can_edit, enableScript, navigate, route.name, t]);
 
+  const handleGoBack = useCallback(async () => {
+    if (closeScreen === Routes.UnitDetail) {
+      navigate(closeScreen, { unitId: unit });
+    } else if (
+      closeScreen === Routes.MultiUnits ||
+      closeScreen === Routes.Automate
+    ) {
+      navigate(closeScreen, {});
+    } else {
+      goBack();
+    }
+  }, [closeScreen, goBack, navigate, unit]);
+
   const onChangeSwitch = useCallback(
     async (checked) => {
       setEnableScript(checked);
@@ -210,17 +224,13 @@ const ScriptDetail = ({ route }) => {
     saveAt && fetchAutomateActions();
   }, [saveAt, fetchAutomateActions]);
 
-  useEffect(() => {
-    newAutomate && setAutomate(newAutomate);
-  }, [newAutomate]);
-
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable
         title={name}
         headerAniStyle={styles.headerAniStyle}
         rightComponent={rightComponent}
-        onGoBack={goBack}
+        onGoBack={handleGoBack}
       >
         <View style={styles.wrapContent}>
           {!!can_edit && (
@@ -234,7 +244,7 @@ const ScriptDetail = ({ route }) => {
           <Text type="H3" semibold>
             {t('how_to_start')}
           </Text>
-          <ItemAutomate
+          <ItemConditionScriptDetail
             automate={automate}
             enableScript={enableScript}
             onPress={handleUpdateAutomate}
@@ -296,6 +306,7 @@ const ScriptDetail = ({ route }) => {
         mode={
           Platform.OS === 'ios' ? PopoverMode.JS_MODAL : PopoverMode.RN_MODAL
         }
+        accessibilityLabel={AccessibilityLabel.MENU_POPPER_MORE}
       />
       <AddActionScript
         automate={automate}
@@ -479,9 +490,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/SetSchedule/__test__/index.test.js

@@ -1,4 +1,4 @@
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import moment from 'moment';
 import React from 'react';
 import { act, create } from 'react-test-renderer';
@@ -16,19 +16,22 @@ import RowItem from '../components/RowItem';
 import SelectWeekday from '../components/SelectWeekday';
 import SetSchedule from '../index';
 
-const wrapComponent = (route) => (
-  <SCProvider initState={mockSCStore({})}>
-    <SetSchedule route={route} />
-  </SCProvider>
-);
+const wrapComponent = (route) => {
+  useRoute.mockReturnValue(route);
+  return (
+    <SCProvider initState={mockSCStore({})}>
+      <SetSchedule route={route} />
+    </SCProvider>
+  );
+};
 
 describe('Test SetSchedule', () => {
   let tree;
   let route = {
     params: {
-      type: 'schedule',
-      unit: { id: 1 },
-      isAutomateTab: true,
+      automate: { type: 'schedule', unit: 1 },
+      unitId: 1,
+      closeScreen: 'UnitDetail',
     },
   };
 
@@ -70,7 +73,11 @@ describe('Test SetSchedule', () => {
     await act(async () => {
       await header.props.onPress();
     });
-    expect(global.mockedNavigate).toHaveBeenCalledWith(undefined);
+    expect(global.mockedNavigate).toHaveBeenCalledWith('UnitDetail', {
+      automate: { type: 'schedule', unit: 1 },
+      closeScreen: 'UnitDetail',
+      unitId: 1,
+    });
   });
 
   it('test repeat options popup', async () => {
@@ -137,7 +144,11 @@ describe('Test SetSchedule', () => {
         repeat: 'once',
         time_repeat: '12:00:00',
         weekday_repeat: [],
+        type: 'schedule',
+        unit: 1,
       },
+      closeScreen: 'UnitDetail',
+      unitId: 1,
     });
   });
 });

package/src/screens/Automate/SetSchedule/components/RowItem.js

@@ -1,9 +1,9 @@
+import { IconOutline } from '@ant-design/icons-react-native';
 import React from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { TouchableOpacity, View } from 'react-native';
 import Text from '../../../../commons/Text';
-import styles from '../styles/RowItemStyles';
 import { Colors } from '../../../../configs';
+import styles from '../styles/RowItemStyles';
 
 const RowItem = ({ title, value, icon = null, arrow = false, onPress }) => {
   return (
@@ -17,8 +17,8 @@ const RowItem = ({ title, value, icon = null, arrow = false, onPress }) => {
         </Text>
       </View>
       <View style={[styles.itemRight, arrow && styles.center]}>
-        {arrow && <AntDesign name="right" color={Colors.Gray7} />}
-        {icon && <AntDesign name={icon} size={17} color={Colors.Black} />}
+        {arrow && <IconOutline name="right" color={Colors.Gray7} />}
+        {icon && <IconOutline name={icon} size={17} color={Colors.Black} />}
       </View>
     </TouchableOpacity>
   );

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

@@ -1,19 +1,19 @@
-import React, { memo, useCallback, useState } from 'react';
-import { ScrollView } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import moment from 'moment';
-import WheelDateTimePicker from '../../../commons/WheelDateTimePicker';
+import React, { memo, useCallback, useState } from 'react';
+import { ScrollView } from 'react-native';
 import Calendar from '../../../commons/Calendar';
+import WheelDateTimePicker from '../../../commons/WheelDateTimePicker';
+import { useBoolean } from '../../../hooks/Common';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Routes from '../../../utils/Route';
+import NewActionWrapper from '../AddNewAction/NewActionWrapper';
 import RepeatOptionsPopup, {
   REPEAT_OPTIONS,
 } from './components/RepeatOptionsPopup';
 import RowItem from './components/RowItem';
 import SelectWeekday from './components/SelectWeekday';
-import { useBoolean } from '../../../hooks/Common';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
 import styles from './styles/indexStyles';
-import Routes from '../../../utils/Route';
-import NewActionWrapper from '../AddNewAction/NewActionWrapper';
 
 const SetSchedule = ({ route }) => {
   const t = useTranslations();
@@ -54,6 +54,7 @@ const SetSchedule = ({ route }) => {
         date_repeat: date.format('YYYY-MM-DD'),
         weekday_repeat: weekday,
       },
+      unitId: automate.unit,
     });
   }, [navigate, closeScreen, automate, repeat, time, date, weekday]);
 

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/__test__/MultiUnits.test.js

@@ -76,7 +76,6 @@ describe('Test MultiUnits', () => {
       params: {
         isMultiUnits: true,
         unitName: null,
-        unit: null,
       },
     });
     await act(async () => {
@@ -111,7 +110,6 @@ describe('Test MultiUnits', () => {
     expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
       screen: Routes.ScriptDetail,
       params: {
-        id: response[1].id,
         preAutomate: response[1],
       },
     });
@@ -120,7 +118,7 @@ describe('Test MultiUnits', () => {
       ItemAddNews[0].props.onAddNew();
     });
     expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
-      screen: Routes.AddUnknownTypeSmart,
+      screen: Routes.AddAutomationTypeSmart,
       params: {
         automate: { unit: undefined },
         closeScreen: undefined,
@@ -264,7 +262,6 @@ describe('Test MultiUnits', () => {
       params: {
         isMultiUnits: true,
         unitName: null,
-        unit: null,
       },
     });
     await act(async () => {

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

@@ -173,7 +173,6 @@ describe('Test Automate', () => {
       params: {
         preAutomate: response.data[0].automates[0],
         closeScreen: undefined,
-        id: 1,
       },
     });
   });

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();
@@ -75,7 +75,6 @@ const Automate = () => {
       navigate(Routes.UnitStack, {
         screen: Routes.ScriptDetail,
         params: {
-          id: item?.id,
           closeScreen: currentRouteName,
           preAutomate: item, // pre-loaded automate data
         },
@@ -164,29 +163,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 +212,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>
       ),
     });

package/src/screens/ChangePosition/index.js

@@ -49,7 +49,8 @@ const ChangePosition = () => {
     }
   };
 
-  const renderItem = ({ item, index, drag, isActive }) => {
+  const renderItem = ({ item, getIndex, drag, isActive }) => {
+    const index = getIndex();
     return (
       <View style={styles.widgetItem}>
         <View style={[styles.itemOrder, isActive ? styles.isDragging : {}]}>