@eohjsc/react-native-smart-city 0.7.3-rc1 → 0.7.3-rc11

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

@@ -1,17 +1,17 @@
 import React, { useMemo, useState } from 'react';
-import { View, TouchableOpacity, FlatList } from 'react-native';
+import { View } from 'react-native';
 
-import styles from './Styles/SetupSensorStyles';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-import Text from '../../../commons/Text';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import NewActionWrapper from './NewActionWrapper';
+import { Button } from '../../../commons';
+import TextInput from '../../../commons/Form/TextInput';
 import GridItem from '../../../commons/Grid/GridItem';
-import Routes from '../../../utils/Route';
 import ModalCustom from '../../../commons/Modal/ModalCustom';
+import Text from '../../../commons/Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import Routes from '../../../utils/Route';
 import { ToastBottomHelper } from '../../../utils/Utils';
-import CheckBox from '@react-native-community/checkbox';
-import TextInput from '../../../commons/Form/TextInput';
+import NewActionWrapper from './NewActionWrapper';
+import styles from './Styles/SetupSensorStyles';
 
 const valueEvaluationToOptions = (valueEvaluation) => {
   if (valueEvaluation.template === 'range') {
@@ -54,7 +54,7 @@ const SetupConfigCondition = () => {
         value: '<',
       },
       {
-        label: `${t('is')} (=)`,
+        label: `${t('is_equal')} (=)`,
         value: '=',
       },
       {
@@ -132,41 +132,44 @@ const SetupConfigCondition = () => {
         style={styles.modal}
       >
         <View style={styles.modalContent}>
-          <Text type="Body">
+          <Text type="Body" bold style={styles.titleCondition}>
             {t('when_value_is', { config_name: config.name })}
           </Text>
-          <FlatList
-            renderHeader={t('condition')}
-            data={normalConditions}
-            renderItem={({ item }) => {
+          <View style={styles.flatListCondition}>
+            {normalConditions.map((item) => {
               return (
-                <View>
-                  <Text>{item.label}</Text>
-                  <CheckBox
-                    onChange={() => {
-                      automate.condition = item.value;
-                      setCustomCondition(item.value);
-                    }}
-                    value={item.value === customCondition}
-                  />
-                </View>
+                <GridItem
+                  onPress={() => {
+                    automate.condition = item.value;
+                    setCustomCondition(item.value);
+                  }}
+                  selected={item.value === customCondition}
+                  style={styles.gridItem}
+                >
+                  <Text type="Body">{item.label}</Text>
+                </GridItem>
               );
-            }}
-          />
+            })}
+          </View>
+
           <View style={styles.inputValue}>
-            <Text>{t('value')}</Text>
             <TextInput
               keyboardType="decimal-pad"
               type="number"
               maxLength={10}
+              placeholder={t('value')}
               onChange={(value) => {
                 const floatValue = parseFloat(value.replace(',', '.'));
                 automate.value = floatValue;
               }}
-              style={styles.numberInput}
+              textInputStyle={styles.numberInput}
+              wrapStyle={styles.wrapTextInput}
             />
           </View>
-          <TouchableOpacity
+
+          <Button
+            type="primary"
+            title={t('continue')}
             testID={'continue_button'}
             onPress={() => {
               if (
@@ -179,9 +182,9 @@ const SetupConfigCondition = () => {
               setIsShowModal(false);
               navigate(Routes.ValueChangeName, { automate, closeScreen });
             }}
-          >
-            <Text>{t('continue')}</Text>
-          </TouchableOpacity>
+            style={styles.buttonContinue}
+            textSemiBold={false}
+          />
         </View>
       </ModalCustom>
     </NewActionWrapper>

package/src/screens/Automate/AddNewAction/Styles/SetupSensorStyles.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Theme, Colors } from '../../../../configs';
+import { Colors, Theme } from '../../../../configs';
 
 export default StyleSheet.create({
   ...Theme,
@@ -11,10 +11,9 @@ export default StyleSheet.create({
   },
   inputValue: { marginBottom: 10 },
   numberInput: {
-    borderRadius: 5,
+    borderRadius: 8,
     borderWidth: 1,
-    height: 38,
-    marginTop: 10,
+    height: 50,
   },
   boxDevices: {
     flexWrap: 'wrap',
@@ -43,4 +42,21 @@ export default StyleSheet.create({
     width: '100%',
     borderRadius: 10,
   },
+  titleCondition: {
+    marginBottom: 16,
+  },
+  wrapTextInput: {
+    marginTop: 0,
+  },
+  flatListCondition: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  gridItem: {
+    width: 'fit-content',
+  },
+  buttonContinue: {
+    flex: 0,
+  },
 });

package/src/screens/Automate/AddNewAction/__test__/ChooseAction.test.js

@@ -1,19 +1,19 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import ChooseAction from '../ChooseAction';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
+import { TouchableOpacity } from 'react-native';
 import BottomButtonView from '../../../../commons/BottomButtonView';
+import SelectActionCard from '../../../../commons/SelectActionCard';
+import { API } from '../../../../configs';
 import { AccessibilityLabel, DEVICE_TYPE } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
-import { API } from '../../../../configs';
-import { TouchableOpacity } from 'react-native';
-import SelectActionCard from '../../../../commons/SelectActionCard';
-import { useNavigation } from '@react-navigation/native';
-import { ToastBottomHelper } from '../../../../utils/Utils';
 import { getTranslate } from '../../../../utils/I18n';
+import { ToastBottomHelper } from '../../../../utils/Utils';
+import ChooseAction from '../ChooseAction';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -391,7 +391,7 @@ describe('Test ChooseAction', () => {
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
-    expect(spyToastError).toBeCalledWith(
+    expect(spyToastError).toHaveBeenCalledWith(
       getTranslate('en', 'template_not_supported', {
         template: response[0].template,
       }),
@@ -459,7 +459,7 @@ describe('Test ChooseAction', () => {
       await buttonSave.props.onPress();
     });
 
-    expect(spyToastError).toBeCalledWith(
+    expect(spyToastError).toHaveBeenCalledWith(
       'You can only add more 0 action',
       null,
       3000
@@ -617,7 +617,7 @@ describe('Test ChooseAction', () => {
       await buttonSave.props.onPress();
     });
 
-    expect(spyToastError).toBeCalledWith(
+    expect(spyToastError).toHaveBeenCalledWith(
       'You can only add more 2 actions',
       null,
       3000

package/src/screens/Automate/AddNewAction/__test__/SelectControlDevices.test.js

@@ -1,17 +1,17 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
+import { TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
-import Device from '../Device';
 import NavBar from '../../../../commons/NavBar';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
-import { TouchableOpacity } from 'react-native';
-import Routes from '../../../../utils/Route';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
+import Routes from '../../../../utils/Route';
+import Device from '../Device';
 import SelectControlDevices from '../SelectControlDevices';
-import { useNavigation, useRoute } from '@react-navigation/native';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -108,6 +108,12 @@ describe('Test SelectMonitorDevices', () => {
     await act(async () => {
       iconClose[0].props.onPress();
     });
-    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail);
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
+      automate: { sensor_id: 1 },
+      automateId: 1,
+      closeScreen: 'ScriptDetail',
+      scriptName: 'scriptName test',
+      unitId: 1,
+    });
   });
 });

package/src/screens/Automate/AddNewAction/__test__/SelectMonitorDevices.test.js

@@ -1,15 +1,15 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import SelectMonitorDevices from '../SelectMonitorDevices';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
+import { useRoute } from '@react-navigation/native';
+import { TouchableOpacity } from 'react-native';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
-import { TouchableOpacity } from 'react-native';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
-import { useRoute } from '@react-navigation/native';
+import SelectMonitorDevices from '../SelectMonitorDevices';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -70,6 +70,12 @@ describe('Test SelectMonitorDevices', () => {
     await act(async () => {
       iconClose[0].props.onPress();
     });
-    expect(global.mockedNavigate).toHaveBeenCalledWith('closeScreen');
+    expect(global.mockedNavigate).toHaveBeenCalledWith('closeScreen', {
+      automate: { sensor_id: 1 },
+      automateId: null,
+      closeScreen: 'closeScreen',
+      scriptName: 'scriptName test',
+      unit: { id: 1, name: 'Unit test' },
+    });
   });
 });

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

@@ -1,18 +1,17 @@
+import { useRoute } from '@react-navigation/native';
 import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
 import { act, create } from 'react-test-renderer';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
-import SetupConfigCondition from '../SetupConfigCondition';
-import { useRoute } from '@react-navigation/native';
-import { ToastBottomHelper } from '../../../../utils/Utils';
 import { Text } from '../../../../commons';
-import GridItem from '../../../../commons/Grid/GridItem';
-import { TouchableWithoutFeedback } from 'react-native';
-import Routes from '../../../../utils/Route';
-import { ModalCustom } from '../../../../commons/Modal';
 import { showAllGridItems } from '../../../../commons/ActionTemplate/__test__/utils';
 import TextInput from '../../../../commons/Form/TextInput';
-import CheckBox from '@react-native-community/checkbox';
+import GridItem from '../../../../commons/Grid/GridItem';
+import { ModalCustom } from '../../../../commons/Modal';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import Routes from '../../../../utils/Route';
+import { ToastBottomHelper } from '../../../../utils/Utils';
+import SetupConfigCondition from '../SetupConfigCondition';
 
 jest.mock('react', () => {
   return {
@@ -214,8 +213,10 @@ describe('Test SetupConfigCondition', () => {
     });
     expect(modal.props.isVisible).toBeFalsy();
 
+    const modalGridItems = instance.findAllByType(GridItem);
+
     await act(async () => {
-      instance.findAllByType(CheckBox)[0].props.onChange();
+      modalGridItems[1].findByType(TouchableWithoutFeedback).props.onPress();
     });
 
     const input = instance.findByType(TextInput);

package/src/screens/Automate/AddNewAction/__test__/SetupScriptDelay.test.js

@@ -1,17 +1,17 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
+import BottomButtonView from '../../../../commons/BottomButtonView';
+import _TextInput from '../../../../commons/Form/TextInput';
+import API from '../../../../configs/API';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import API from '../../../../configs/API';
-import Routes from '../../../../utils/Route';
 import api from '../../../../utils/Apis/axios';
-import { useNavigation, useRoute } from '@react-navigation/native';
-import _TextInput from '../../../../commons/Form/TextInput';
-import BottomButtonView from '../../../../commons/BottomButtonView';
+import Routes from '../../../../utils/Route';
 import { ToastBottomHelper } from '../../../../utils/Utils';
 import SetupScriptDelay from '../SetupScriptDelay';
-import { TouchableWithoutFeedback } from 'react-native';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -75,7 +75,7 @@ describe('Test SetupScriptDelay', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
   });
 
   it('SetupScriptDelay onPress create script notify error', async () => {
@@ -95,6 +95,6 @@ describe('Test SetupScriptDelay', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
   });
 });

package/src/screens/Automate/AddNewAction/__test__/SetupScriptNotify.test.js

@@ -1,17 +1,17 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
+import BottomButtonView from '../../../../commons/BottomButtonView';
+import _TextInput from '../../../../commons/Form/TextInput';
+import API from '../../../../configs/API';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import API from '../../../../configs/API';
-import Routes from '../../../../utils/Route';
 import api from '../../../../utils/Apis/axios';
-import { useNavigation, useRoute } from '@react-navigation/native';
-import SetupScriptNotify from '../SetupScriptNotify';
-import _TextInput from '../../../../commons/Form/TextInput';
-import BottomButtonView from '../../../../commons/BottomButtonView';
+import Routes from '../../../../utils/Route';
 import { ToastBottomHelper } from '../../../../utils/Utils';
-import { TouchableWithoutFeedback } from 'react-native';
+import SetupScriptNotify from '../SetupScriptNotify';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -66,7 +66,7 @@ describe('Test SetupScriptNotify', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
   });
 
   it('SetupScriptNotify onPress create script notify error', async () => {
@@ -87,6 +87,6 @@ describe('Test SetupScriptNotify', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
   });
 });

package/src/screens/Automate/AddNewAutoSmart/AddTypeSmart.js

@@ -1,12 +1,12 @@
+import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useState } from 'react';
 import { View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import ItemAutomate from '../../../commons/Automate/ItemAutomate';
 import { HeaderCustom } from '../../../commons/Header';
-import styles from './styles/AddNewAutoSmartStyles';
 import Text from '../../../commons/Text';
-import ItemAutomate from '../../../commons/Automate/ItemAutomate';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Routes from '../../../utils/Route';
+import styles from './styles/AddNewAutoSmartStyles';
 
 const AddTypeSmart = ({ smartTypes, route }) => {
   const t = useTranslations();
@@ -27,6 +27,7 @@ const AddTypeSmart = ({ smartTypes, route }) => {
           ...automate,
           type: dataAutomate?.type,
         },
+        unitId: automate?.unit,
         closeScreen: closeScreen,
       };
 

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

@@ -1,12 +1,12 @@
+import { useNavigation } from '@react-navigation/native';
 import React from 'react';
+import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
-import AddUnknownTypeSmart from '../AddUnknownTypeSmart';
+import ItemAutomate from '../../../../commons/Automate/ItemAutomate';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import ItemAutomate from '../../../../commons/Automate/ItemAutomate';
 import Routes from '../../../../utils/Route';
-import { TouchableOpacity } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import AddUnknownTypeSmart from '../AddUnknownTypeSmart';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -41,10 +41,14 @@ describe('test AddNewAutoSmart', () => {
       await touchItem.props.onPress();
     });
 
-    expect(global.mockedNavigate).toBeCalledWith(Routes.SelectMonitorDevices, {
-      automate: { unit: 1, type: 'value_change' },
-      closeScreen: undefined,
-    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
+      Routes.SelectMonitorDevices,
+      {
+        automate: { unit: 1, type: 'value_change' },
+        closeScreen: undefined,
+        unitId: 1,
+      }
+    );
   });
 
   it('test choose Schedule', async () => {
@@ -62,6 +66,7 @@ describe('test AddNewAutoSmart', () => {
     expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.SetSchedule, {
       automate: { type: 'schedule', unit: 1 },
       closeScreen: undefined,
+      unitId: 1,
     });
   });
 });

package/src/screens/Automate/EditActionsList/__tests__/UpdateActionScript.test.js

@@ -1,19 +1,19 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 
+import { useRoute } from '@react-navigation/native';
+import { TouchableOpacity } from 'react-native';
+import { showAllCards } from '../../../../commons/ActionTemplate/__test__/utils';
 import api from '../../../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../../../utils/Utils';
-import UpdateActionScript from '../UpdateActionScript';
-import { TouchableOpacity } from 'react-native';
-import { useRoute } from '@react-navigation/native';
 import RenderActionItem from '../../AddNewAction/RenderActionItem';
-import { showAllCards } from '../../../../commons/ActionTemplate/__test__/utils';
+import UpdateActionScript from '../UpdateActionScript';
 
 const mock = new MockAdapter(api.axiosInstance);
 const mockedPermission = jest.fn();
@@ -152,6 +152,6 @@ describe('Test UpdateActionScript', () => {
     await selectActionOne(instance);
     await pressSaveButton(instance);
 
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
   });
 });

package/src/screens/Automate/EditActionsList/__tests__/UpdateDelayScript.test.js

@@ -1,15 +1,15 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 
-import api from '../../../../utils/Apis/axios';
-import _TextInput from '../../../../commons/Form/TextInput';
 import BottomButtonView from '../../../../commons/BottomButtonView';
+import _TextInput from '../../../../commons/Form/TextInput';
+import api from '../../../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../../../utils/Utils';
 import UpdateDelayScript from '../UpdateDelayScript';
 
@@ -80,7 +80,7 @@ describe('Test UpdateDelayScript', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
   });
   it('test can not update title and message', async () => {
     await act(async () => {

package/src/screens/Automate/EditActionsList/__tests__/UpdateNotifyScript.test.js

@@ -1,17 +1,17 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
 import API from '../../../../configs/API';
 import { AccessibilityLabel } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 
-import api from '../../../../utils/Apis/axios';
-import UpdateNotifyScript from '../UpdateNotifyScript';
-import _TextInput from '../../../../commons/Form/TextInput';
 import BottomButtonView from '../../../../commons/BottomButtonView';
+import _TextInput from '../../../../commons/Form/TextInput';
+import api from '../../../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../../../utils/Utils';
+import UpdateNotifyScript from '../UpdateNotifyScript';
 
 const mock = new MockAdapter(api.axiosInstance);
 const mockerOnClosePopup = jest.fn();
@@ -89,7 +89,7 @@ describe('Test UpdateNotifyScript', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toBeCalled();
+    expect(spyToast).toHaveBeenCalled();
     // expect(global.mockedNavigate).toHaveBeenCalledWith('closeScreen');
   });
   it('test can not update title and message', async () => {

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

@@ -1,27 +1,28 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import DraggableFlatList from 'react-native-draggable-flatlist';
 import { useNavigation, useRoute } from '@react-navigation/native';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import DraggableFlatList from 'react-native-draggable-flatlist';
 import ParsedText from 'react-native-parsed-text';
 
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import Close from '../../../../assets/images/Close.svg';
+import Delay from '../../../../assets/images/Delay.svg';
+import Notify from '../../../../assets/images/Notify.svg';
+import Rearrange from '../../../../assets/images/Rearrange.svg';
+import { FullLoading } from '../../../commons';
+import FImage from '../../../commons/FImage';
 import { HeaderCustom } from '../../../commons/Header';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { ModalBottom, ModalCustom } from '../../../commons/Modal';
 import Text from '../../../commons/Text';
-import styles from './Styles/indexStyles';
 import { API, Colors } from '../../../configs';
-import FImage from '../../../commons/FImage';
-import Rearrange from '../../../../assets/images/Rearrange.svg';
-import Notify from '../../../../assets/images/Notify.svg';
-import Delay from '../../../../assets/images/Delay.svg';
-import Close from '../../../../assets/images/Close.svg';
-import { axiosDelete, axiosPut } from '../../../utils/Apis/axios';
-import { ModalBottom, ModalCustom } from '../../../commons/Modal';
-import { ToastBottomHelper } from '../../../utils/Utils';
 import { AccessibilityLabel } from '../../../configs/Constants';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { axiosDelete, axiosPut } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import styles from './Styles/indexStyles';
 import UpdateDelayScript from './UpdateDelayScript';
 import UpdateNotifyScript from './UpdateNotifyScript';
-import { FullLoading } from '../../../commons';
 
 const EditActionsList = () => {
   const t = useTranslations();
@@ -134,7 +135,8 @@ const EditActionsList = () => {
     </View>
   );
   const renderItem = useCallback(
-    ({ item, index, drag, isActive }) => {
+    ({ item, getIndex, drag, isActive }) => {
+      const index = getIndex();
       const paddedIndex = (index + 1).toString().padStart(2, '0');
       const { action_script, notify_script, delay_script } = item;
       if (action_script) {
@@ -354,7 +356,7 @@ const EditActionsList = () => {
   }, [itemRemove, t]);
 
   return (
-    <View style={styles.wrap}>
+    <GestureHandlerRootView style={styles.wrap}>
       <HeaderCustom title={t('edit_actions_list')} onGoBack={onCancel} />
       <View style={styles.wrapContent}>
         <Text type="Body" color={Colors.Gray8}>
@@ -393,7 +395,7 @@ const EditActionsList = () => {
           <View style={styles.modalHeader}>{renderAction}</View>
         </View>
       </ModalCustom>
-    </View>
+    </GestureHandlerRootView>
   );
 };