@eohjsc/react-native-smart-city 0.7.3 → 0.7.5

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

@@ -1,17 +1,17 @@
-import React from 'react';
 import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
 import { act, create } from 'react-test-renderer';
 
 import { AccessibilityLabel } from '../../../configs/Constants';
 
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
-import SideMenuDetail from '../index';
-import { API } from '../../../configs';
 import { TouchableOpacity } from 'react-native';
 import { ModalCustom } from '../../../commons/Modal';
-import { ToastBottomHelper } from '../../../utils/Utils';
+import { API } from '../../../configs';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import SideMenuDetail from '../index';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -158,7 +158,7 @@ describe('Test SideMenuDetail', () => {
     const instance = tree.root;
     await chooseUser(instance);
     await onPressSubmitData(instance);
-    expect(spyToastError).toBeCalled();
+    expect(spyToastError).toHaveBeenCalled();
 
     await enterPasscode(instance);
     await onPressSubmitData(instance);
@@ -174,6 +174,6 @@ describe('Test SideMenuDetail', () => {
         },
       })
     );
-    expect(spyToastSuccess).toBeCalled();
+    expect(spyToastSuccess).toHaveBeenCalled();
   });
 });

package/src/screens/SmartAccount/Connecting/index.js

@@ -1,14 +1,14 @@
-import React, { useEffect, useCallback, useContext } from 'react';
-import { View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useContext, useEffect } from 'react';
+import { View } from 'react-native';
 import * as Progress from 'react-native-progress';
 
 import Text from '../../../commons/Text';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { Action } from '../../../context/actionType';
+import { API, Colors, Constants } from '../../../configs';
 import { SCContext, useSCContextSelector } from '../../../context';
+import { Action } from '../../../context/actionType';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { axiosPost } from '../../../utils/Apis/axios';
-import { API, Colors, Constants } from '../../../configs';
 import Routes from '../../../utils/Route';
 import styles from './style';
 

package/src/screens/SmartAccount/ListDevice/__test__/ListDevice.test.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import { act, create } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
 
-import ListDevice from '../index';
+import { useNavigation } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
+import Text from '../../../../commons/Text';
+import { API } from '../../../../configs';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import Text from '../../../../commons/Text';
 import api from '../../../../utils/Apis/axios';
-import { API } from '../../../../configs';
 import Routes from '../../../../utils/Route';
-import MockAdapter from 'axios-mock-adapter';
-import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
-import { useNavigation } from '@react-navigation/native';
+import ListDevice from '../index';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -78,7 +78,7 @@ describe('Test ListDeviceSmartAccount', () => {
       await touchs[touchs.length - 1].props.onPress();
     });
 
-    expect(navigate).toBeCalledWith(Routes.AddDeviceStack, {
+    expect(navigate).toHaveBeenCalledWith(Routes.AddDeviceStack, {
       screen: Routes.AddCommonSelectSubUnit,
       params: {
         addType: 'AddHassiDevice',

package/src/screens/SmartAccount/SuccessfullyConnected/__test__/SuccessfullyConnected.test.js

@@ -1,16 +1,16 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
-import SuccessfullyConnected from '../index';
+import _TextInput from '../../../../commons/Form/TextInput';
+import { API } from '../../../../configs';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
-import { API } from '../../../../configs';
-import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
 import Routes from '../../../../utils/Route';
-import _TextInput from '../../../../commons/Form/TextInput';
 import { flushPromises } from '../../../AllGateway/test-utils';
+import SuccessfullyConnected from '../index';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -100,7 +100,7 @@ describe('Test SuccessfullyConnected', () => {
     await act(async () => {
       handleContinue.props.onPress();
     });
-    expect(global.mockedNavigate).toBeCalledWith(
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
       Routes.ListDeviceSmartAccount,
       {
         smart_account_id: 1,
@@ -125,7 +125,7 @@ describe('Test SuccessfullyConnected', () => {
     await act(async () => {
       handleFinish.props.onPress();
     });
-    expect(global.mockedDispatch).toBeCalledWith({
+    expect(global.mockedDispatch).toHaveBeenCalledWith({
       payload: {
         index: 0,
         routes: [

package/src/screens/SmartAccount/SuccessfullyConnected/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 import { View, ScrollView, ActivityIndicator } from 'react-native';
 import { useNavigation, CommonActions } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import _TextInput from '../../../commons/Form/TextInput';
 import Text from '../../../commons/Text';
@@ -134,7 +134,7 @@ const SuccessfullyConnected = memo(({ route }) => {
       <View style={styles.wrap}>
         <ScrollView>
           <View style={styles.body}>
-            <AntDesign name="check-circle" size={28} color={Colors.Green6} />
+            <IconOutline name="check-circle" size={28} color={Colors.Green6} />
             <Text bold style={styles.connectingText}>
               {t('successfully_connected')}
             </Text>

package/src/screens/SmartAccount/__test__/Connecting.test.js

@@ -1,14 +1,14 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+import Text from '../../../commons/Text';
+import { API } from '../../../configs';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import SmartAccountConnecting from '../Connecting';
-import Text from '../../../commons/Text';
-import MockAdapter from 'axios-mock-adapter';
+import t from '../../../hooks/Common/useTranslations';
 import api from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
 import Routes from '../../../utils/Route';
-import t from '../../../hooks/Common/useTranslations';
+import SmartAccountConnecting from '../Connecting';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -53,7 +53,7 @@ describe('Test Connecting', () => {
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
-    expect(global.mockedNavigate).toBeCalledWith(Routes.SmartAccount, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.SmartAccount, {
       params: {},
     });
   });

package/src/screens/SmartAccount/__test__/SmartAccount.test.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
-import Toast from 'react-native-toast-message';
 import { ScrollView, TouchableOpacity } from 'react-native';
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
-import SmartAccount from '../index';
-import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import Toast from 'react-native-toast-message';
+import renderer, { act } from 'react-test-renderer';
 import TextInput from '../../../commons/Form/TextInput';
 import _TextInputPassword from '../../../commons/Form/TextInputPassword';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 import Routes from '../../../utils/Route';
+import SmartAccount from '../index';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -98,7 +98,7 @@ describe('Test SmartAccount', () => {
     await act(async () => {
       await touchableOpacity.props.onPress();
     });
-    expect(Toast.show).toBeCalledWith({
+    expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',
       text1: 'Please select a supplier',
@@ -152,7 +152,7 @@ describe('Test SmartAccount', () => {
     await act(async () => {
       await touchableOpacity.props.onPress();
     });
-    expect(global.mockedNavigate).toBeCalledWith(
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
       Routes.SmartAccountConnecting,
       {
         brand: 'google_home',
@@ -206,7 +206,7 @@ describe('Test SmartAccount', () => {
     await act(async () => {
       await touchableOpacity.props.onPress();
     });
-    expect(global.mockedNavigate).toBeCalledWith(Routes.AddDeviceStack, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.AddDeviceStack, {
       screen: 'AddCommonSelectUnit',
       params: {
         addType: 'AddHassioDevice',
@@ -236,7 +236,7 @@ describe('Test SmartAccount', () => {
       await touchSupplierItem[1].props.onPress();
     });
     expect(touchSupplierItem).toBeDefined();
-    expect(global.mockedNavigate).toBeCalledWith(Routes.Browser, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.Browser, {
       // eslint-disable-next-line max-len
       link: 'https://qt-vn.m.lgaccount.com/emp/v2/authorize?client_id=2b85aee334f046848341547894bb7c4e&redirect_uri=app://eoh/sync-lg-device&response_type=code&state=1',
     });

package/src/screens/SmartIr/__test__/GroupButtonByType.test.js

@@ -9,8 +9,9 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import TextInput from '../../../commons/Form/TextInput';
 import { ModalCustom } from '../../../commons/Modal';
 import { TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -133,7 +134,7 @@ describe('Test GroupButtonByType', () => {
     const icon = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.ICON_OUTLINE_TYPE_RELOAD && el.type === AntDesign
+          AccessibilityLabel.ICON_OUTLINE_TYPE_RELOAD && el.type === IconOutline
     );
     await act(async () => {
       await touch.props.onPress();

package/src/screens/SmartIr/components/GroupButtonByType/GroupButtonByType.js

@@ -5,7 +5,7 @@ import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import SmartTiviActionTemplate from '../../../../commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate';
 import Text from '../../../../commons/Text';
 import { ModalCustom } from '../../../../commons/Modal';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { Colors } from '../../../../configs';
 import TextInput from '../../../../commons/Form/TextInput';
@@ -58,7 +58,7 @@ const GroupButtonByType = memo(({ route }) => {
               style={[styles.headerButton]}
               accessibilityLabel={AccessibilityLabel.HEADER_BUTTON_TYPE_RELOAD}
             >
-              <AntDesign
+              <IconOutline
                 name={'reload1'}
                 size={27}
                 color={Colors.Black}

package/src/screens/SmartIr/components/SelectBrand.js

@@ -5,7 +5,7 @@ import { HeaderCustom } from '../../../commons/Header';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import Routes from '../../../utils/Route';
 import { RowItem } from '../../../commons/RowItem';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../../configs';
 
 import styles from './SelectBrandStyles';
@@ -47,7 +47,7 @@ const SelectDeviceType = memo(({ route }) => {
                   key={index.toString()}
                   isShowSubText={false}
                   rightComponent={
-                    <AntDesign name="right" size={20} color={Colors.Gray7} />
+                    <IconOutline name="right" size={20} color={Colors.Gray7} />
                   }
                 />
               );

package/src/screens/SubUnit/AddSubUnit.js

@@ -1,27 +1,28 @@
+import { useNavigation } from '@react-navigation/native';
 import React, {
-  useState,
   useCallback,
-  useMemo,
   useEffect,
+  useMemo,
   useRef,
+  useState,
 } from 'react';
-import { View, Image, Keyboard, TouchableWithoutFeedback } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { Image, Keyboard, TouchableWithoutFeedback, View } from 'react-native';
 
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import { API, Colors } from '../../configs';
-import { ViewButtonBottom, ImagePicker } from '../../commons';
-import Text from '../../commons/Text';
+import { ImagePicker, ViewButtonBottom } from '../../commons';
 import _TextInput from '../../commons/Form/TextInput';
-import Routes from '../../utils/Route';
-import { axiosPost, createFormData } from '../../utils/Apis/axios';
-import { ToastBottomHelper } from '../../utils/Utils';
+import Text from '../../commons/Text';
+import { API, Colors } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
-import styles from './AddSubUnitStyles';
+import { useSCContextSelector } from '../../context';
 import useKeyboardShow from '../../hooks/Common/useKeyboardShow';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { replace } from '../../navigations/utils';
+import { axiosPost, createFormData } from '../../utils/Apis/axios';
 import { useBackendPermission } from '../../utils/Permission/backend';
-import { useSCContextSelector } from '../../context';
+import Routes from '../../utils/Route';
+import { ToastBottomHelper } from '../../utils/Utils';
+import styles from './AddSubUnitStyles';
+import LocationPin from '../../../assets/images/Map/LocationPin.svg';
 
 const AddSubUnit = ({ route }) => {
   const t = useTranslations();
@@ -85,7 +86,6 @@ const AddSubUnit = ({ route }) => {
           cleanData();
         } else {
           awaitCreate.current = false;
-          ToastBottomHelper.error(t('text_create_unit_fail'));
         }
       }
     } else {
@@ -120,9 +120,7 @@ const AddSubUnit = ({ route }) => {
             routeName: Routes.DashboardStack,
           };
           if (isInsideUnit) {
-            navigate(Routes.UnitDetail, {
-              params: commonPrams,
-            });
+            navigate(Routes.UnitDetail, commonPrams);
           } else {
             dispatch(
               replace(Routes.UnitStack, {
@@ -228,15 +226,19 @@ const AddSubUnit = ({ route }) => {
                   }
                   onPress={onChooseLocation}
                 >
-                  <View style={styles.wrapGeolocation}>
-                    <Text style={styles.addWallpaper}>{t('geolocation')}</Text>
-                    <Text
-                      style={styles.textLocation}
-                      color={location.description && Colors.Primary}
-                    >
-                      {location.description ||
-                        t('text_explain_add_geolocation')}
-                    </Text>
+                  <View style={styles.wrapLocation}>
+                    <Text style={styles.addWallpaper}>{t('location')}</Text>
+                    <View style={styles.wrapTextLocation}>
+                      <LocationPin />
+                      <Text
+                        style={styles.textLocation}
+                        color={
+                          location.description ? Colors.Primary : Colors.Gray7
+                        }
+                      >
+                        {location.description || t('text_explain_add_location')}
+                      </Text>
+                    </View>
                   </View>
                 </TouchableWithoutFeedback>
               )}

package/src/screens/SubUnit/AddSubUnitStyles.js

@@ -63,14 +63,20 @@ export default StyleSheet.create({
     marginRight: 8,
     backgroundColor: Colors.Pink1,
   },
-  wrapGeolocation: {
+  wrapLocation: {
     marginTop: 6,
     borderBottomWidth: 1,
+    paddingBottom: 10,
     borderColor: Colors.Gray4,
   },
+  wrapTextLocation: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   textLocation: {
-    fontSize: 16,
-    lineHeight: 24,
-    paddingBottom: 14,
+    fontSize: 12,
+    lineHeight: 20,
+    width: 320,
+    marginLeft: 6,
   },
 });

package/src/screens/SubUnit/EditSubUnit.js

@@ -1,27 +1,27 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { View, TouchableOpacity, Image } from 'react-native';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { Colors, API } from '../../configs';
-import { ToastBottomHelper } from '../../utils/Utils';
+import { API, Colors } from '../../configs';
+import useBoolean from '../../hooks/Common/useBoolean';
 import {
-  axiosPatch,
   axiosDelete,
+  axiosPatch,
   createFormData,
 } from '../../utils/Apis/axios';
 import Routes from '../../utils/Route';
-import useBoolean from '../../hooks/Common/useBoolean';
+import { ToastBottomHelper } from '../../utils/Utils';
 
+import { IconOutline } from '@ant-design/icons-react-native';
 import { ImagePicker, Section } from '../../commons';
 import AlertAction from '../../commons/AlertAction';
 import _TextInput from '../../commons/Form/TextInput';
 import Text from '../../commons/Text';
 import { AccessibilityLabel } from '../../configs/Constants';
-import AntDesign from 'react-native-vector-icons/AntDesign';
-import { useEmeragencyContacts } from './hooks/useEmergencyContacts';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 import styles from './EditSubUnitStyles';
+import { useEmeragencyContacts } from './hooks/useEmergencyContacts';
 
 const EditSubUnit = ({ route }) => {
   const { unit, station } = route?.params || {};
@@ -52,7 +52,7 @@ const EditSubUnit = ({ route }) => {
   }, [getListContacts, group, isFocused]);
 
   const onBack = useCallback(() => {
-    const { routes } = navigation.dangerouslyGetState();
+    const { routes } = navigation.getState();
     const calledByRoute = routes[routes.length - 3].name;
 
     switch (calledByRoute) {
@@ -63,9 +63,10 @@ const EditSubUnit = ({ route }) => {
         navigation.navigate(Routes.UnitDetail, {
           isEditSubUnit: true,
           isAddSubUnit: false,
+          unitId: unit?.id,
         });
     }
-  }, [navigation]);
+  }, [navigation, unit?.id]);
 
   const updateSubUnit = useCallback(
     async (params, headers) => {
@@ -207,7 +208,7 @@ const EditSubUnit = ({ route }) => {
                 <Text type={'H4'} color={Colors.Gray9}>
                   {t('emergency_contacts')}
                 </Text>
-                <AntDesign name={'right'} size={20} color={Colors.Gray8} />
+                <IconOutline name={'right'} size={20} color={Colors.Gray8} />
               </TouchableOpacity>
               <Text
                 type={'Body'}

package/src/screens/SubUnit/ManageSubUnit.js

@@ -14,7 +14,7 @@ import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import Text from '../../commons/Text';
 
 import styles from './ManageSubUnitStyles';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Routes from '../../utils/Route';
 import { RowItem } from '../../commons/RowItem';
@@ -54,7 +54,7 @@ const ManageSubUnit = ({ route }) => {
           onPress={addSubUnit}
           style={styles.headerButton}
         >
-          <AntDesign name={'plus'} size={27} color={Colors.Black} />
+          <IconOutline name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
         <TouchableOpacity
           // onPress={handleShowMenuAction}
@@ -112,7 +112,7 @@ const ManageSubUnit = ({ route }) => {
                       }  devices`}
                       onPress={() => goToEditSubUnit(item, unit)}
                       rightComponent={
-                        <AntDesign
+                        <IconOutline
                           name="right"
                           size={20}
                           color={Colors.Gray6}

package/src/screens/SubUnit/__test__/AddSubUnit.test.js

@@ -212,7 +212,9 @@ describe('Test AddSubUnit', () => {
       },
       isAddUnit: true,
     };
-    mock.onPost(API.UNIT.CREATE_UNIT()).reply(400);
+    mock.onPost(API.UNIT.CREATE_UNIT()).reply(400, {
+      non_field_errors: 'You have reached max units',
+    });
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -224,7 +226,7 @@ describe('Test AddSubUnit', () => {
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',
-      text1: getTranslate('en', 'text_create_unit_fail'),
+      text1: 'You have reached max units',
       visibilityTime: 1000,
     });
   });
@@ -244,19 +246,17 @@ describe('Test AddSubUnit', () => {
       await viewButtonBottom.props.onRightClick();
     });
     expect(global.mockedNavigate).toHaveBeenCalledWith('UnitDetail', {
-      params: {
-        isAddSubUnit: true,
-        routeName: 'DashboardStack',
-        stationId: undefined,
-        unitData: {
-          id: 1,
-          name: 'Unit name',
-          location: {
-            description: 'location',
-          },
+      isAddSubUnit: true,
+      routeName: 'DashboardStack',
+      stationId: undefined,
+      unitData: {
+        id: 1,
+        name: 'Unit name',
+        location: {
+          description: 'location',
         },
-        unitId: 1,
       },
+      unitId: 1,
     });
   });
 

package/src/screens/SubUnit/__test__/EditSubUnit.test.js

@@ -70,7 +70,7 @@ describe('Test EditSubUnit', () => {
   it('alertAction rightButtonClick success, previous screen Routes.UnitDetail', async () => {
     mock.onDelete(API.SUB_UNIT.REMOVE_SUB_UNIT(1, 2)).reply(200);
 
-    global.mockedDangerouslyGetState.mockImplementation(() => ({
+    global.mockedGetState.mockImplementation(() => ({
       routes: [
         { name: Routes.UnitDetail },
         { name: 'route 2' },
@@ -98,7 +98,7 @@ describe('Test EditSubUnit', () => {
 
   it('alertAction rightButtonClick success', async () => {
     mock.onDelete(API.SUB_UNIT.REMOVE_SUB_UNIT(1, 2)).reply(200);
-    global.mockedDangerouslyGetState.mockImplementation(() => ({
+    global.mockedGetState.mockImplementation(() => ({
       routes: [
         { name: 'UnitDetail' },
         { name: 'route 2' },
@@ -122,7 +122,7 @@ describe('Test EditSubUnit', () => {
       .onDelete('https://backend.eoh.io/api/property_manager/1/sub_units/2/')
       .reply(400);
 
-    global.mockedDangerouslyGetState.mockImplementation(() => ({
+    global.mockedGetState.mockImplementation(() => ({
       routes: [{ name: 'route 1' }, { name: 'route 2' }, { name: 'route 3' }],
     }));
 

package/src/screens/Template/EditTemplate.js

@@ -9,6 +9,7 @@ import React, {
 import { Image, TouchableOpacity, View } from 'react-native';
 import DraggableFlatList from 'react-native-draggable-flatlist';
 
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { EmptyComponent } from '../../commons/DevMode';
 import { HeaderCustom } from '../../commons/Header';
 import Text from '../../commons/Text';
@@ -16,9 +17,9 @@ import { Images } from '../../configs';
 import { SCContext } from '../../context';
 import { Action } from '../../context/actionType';
 import t from '../../hooks/Common/useTranslations';
+import { notImplemented } from '../../utils/Utils';
 import { SensorDisplayItem } from '../Device/components/SensorDisplayItem';
 import styles from './Styles/EditTemplateStyle';
-import { notImplemented } from '../../utils/Utils';
 
 const EditTemplate = () => {
   const { setAction } = useContext(SCContext);
@@ -100,7 +101,7 @@ const EditTemplate = () => {
       {!actionsList?.length ? (
         renderEmpty
       ) : (
-        <>
+        <GestureHandlerRootView>
           <View style={styles.wrapDescription}>
             <Text style={styles.description}>
               {t('hold_and_hover_description')}
@@ -109,7 +110,8 @@ const EditTemplate = () => {
           <DraggableFlatList
             showsVerticalScrollIndicator={false}
             data={actionsList}
-            renderItem={({ item, index, drag }) => {
+            renderItem={({ item, getIndex, drag }) => {
+              const index = getIndex();
               return (
                 <TouchableOpacity
                   onLongPress={onDrag(item, drag)}
@@ -153,7 +155,7 @@ const EditTemplate = () => {
               <Text style={styles.save}>{t('save')}</Text>
             </TouchableOpacity>
           </View>
-        </>
+        </GestureHandlerRootView>
       )}
     </View>
   );