@eohjsc/react-native-smart-city 0.3.30 → 0.3.33

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
 import SmartIr from '../index';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { TouchableWithoutFeedback } from 'react-native';
 
 const wrapComponent = (item) => (
   <SCProvider initState={mockSCStore({})}>
@@ -36,8 +37,13 @@ describe('Test SmartIr', () => {
       tree = renderer.create(wrapComponent(item));
     });
     const instance = tree.root;
-    const itemAddNew = instance.findAllByType(TouchableOpacity);
-    expect(itemAddNew).toHaveLength(2);
+    const itemAddNewList = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.SUB_UNIT_ADD_DEVICE &&
+        el.type === TouchableWithoutFeedback
+    );
+    expect(itemAddNewList).toHaveLength(1);
   });
 
   test('render SmartIr on AddNew', () => {
@@ -52,10 +58,12 @@ describe('Test SmartIr', () => {
       tree = renderer.create(wrapComponent(item));
     });
     const instance = tree.root;
-    const itemAddNew = instance.findAllByType(TouchableOpacity);
-    expect(itemAddNew).toHaveLength(2);
+    const itemAddNew = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.SUB_UNIT_ADD_DEVICE
+    );
     act(() => {
-      itemAddNew[0].props.onPress();
+      itemAddNew.props.onPress();
     });
     expect(mockNavigate).toHaveBeenCalled();
   });

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

@@ -13,7 +13,7 @@ import { ButtonsBottom } from './ButtonsBottom';
 import { Remote, SmartIr, Union } from '../../../../Images/SmartIr';
 
 import styles from './GroupButtonByTypeStyles';
-import { TESTID } from '../../../../configs/Constants';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import { notImplemented } from '../../../../utils/Utils';
 
 const GroupButtonByType = memo(({ route }) => {
@@ -143,7 +143,9 @@ const GroupButtonByType = memo(({ route }) => {
             selectionColor={Colors.Primary}
           />
           <ButtonsBottom
-            testID={TESTID.GROUP_BUTTON_TYPE.BUTTON_BOTTOM}
+            accessibilityLabel={
+              AccessibilityLabel.GROUP_BUTTON_TYPE.BUTTON_BOTTOM
+            }
             onPressLeft={cancelButton}
             onPressRight={ApplyButton}
             textLeft={t('cancel')}

package/src/screens/SmartIr/components/{SelectDeviceType.js → SelectIrDeviceType.js}

@@ -9,7 +9,7 @@ import Routes from '../../../utils/Route';
 
 import styles from './SelectDeviceTypeStyles';
 
-const SelectDeviceType = memo(() => {
+const SelectIrDeviceType = memo(() => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const tempDeviceType = [
@@ -93,4 +93,4 @@ const SelectDeviceType = memo(() => {
   );
 });
 
-export default SelectDeviceType;
+export default SelectIrDeviceType;

package/src/screens/SmartIr/index.js

@@ -11,7 +11,7 @@ const SmartIr = memo(({ item }) => {
   const { navigate } = useNavigation();
   const AddRemoteControl = useCallback(() => {
     navigate(Routes.SmartIrStack, {
-      screen: Routes.SelectDeviceType,
+      screen: Routes.SelectIrDeviceType,
     });
   }, [navigate]);
   return (

package/src/screens/SubUnit/AddSubUnit.js

@@ -22,7 +22,7 @@ import _TextInput from '../../commons/Form/TextInput';
 import Routes from '../../utils/Route';
 import { axiosPost, createFormData } from '../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../utils/Utils';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import styles from './AddSubUnitStyles';
 import useKeyboardShow from '../../hooks/Common/useKeyboardShow';
 import { replace } from '../../navigations/utils';
@@ -190,7 +190,9 @@ const AddSubUnit = ({ route }) => {
 
               {isAddUnit && (
                 <TouchableWithoutFeedback
-                  testID={TESTID.ADD_SUB_UNIT_BUTTON_CHOOSE_LOCATION}
+                  accessibilityLabel={
+                    AccessibilityLabel.ADD_SUB_UNIT_BUTTON_CHOOSE_LOCATION
+                  }
                   onPress={onChooseLocation}
                 >
                   <View style={styles.wrapGeolocation}>
@@ -206,7 +208,9 @@ const AddSubUnit = ({ route }) => {
               )}
 
               <TouchableWithoutFeedback
-                testID={TESTID.ADD_SUB_UNIT_BUTTON_CHOOSE_PHOTO}
+                accessibilityLabel={
+                  AccessibilityLabel.ADD_SUB_UNIT_BUTTON_CHOOSE_PHOTO
+                }
                 onPress={onChoosePhoto}
               >
                 <View style={styles.wrapWallpaper}>

package/src/screens/SubUnit/Detail.js

@@ -16,7 +16,7 @@ import styles from './DetailStyles';
 
 const SubUnitDetail = ({ route }) => {
   const t = useTranslations();
-  const { unit, station } = route.params;
+  const { unit, station } = route?.params || {};
   const language = useSCContextSelector((state) => state.language);
   const navigation = useNavigation();
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
@@ -73,12 +73,12 @@ const SubUnitDetail = ({ route }) => {
   );
 
   const onAdd = useCallback(() => {
-    navigation.navigate(Routes.AddDeviceStack, {
-      screen: Routes.ScanSensorQR,
+    navigation.navigate(Routes.AddGatewayStack, {
+      screen: Routes.FirstWarning,
       params: {
-        station_id: station.id,
-        unit_id: unit.id,
-        unit_name: unit.name,
+        stationId: station.id,
+        unitId: unit.id,
+        unitName: unit.name,
       },
     });
   }, [navigation, station, unit]);

package/src/screens/SubUnit/EditSubUnit.js

@@ -19,7 +19,7 @@ import AlertAction from '../../commons/AlertAction';
 import _TextInput from '../../commons/Form/TextInput';
 import ViewButtonBottom from '../../commons/ViewButtonBottom';
 import Text from '../../commons/Text';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useEmeragencyContacts } from './hooks/useEmergencyContacts';
 import Animated from 'react-native-reanimated';
@@ -28,7 +28,7 @@ import styles from './EditSubUnitStyles';
 import { ModalCustom } from '../../commons/Modal';
 
 const EditSubUnit = ({ route }) => {
-  const { unit, station } = route.params;
+  const { unit, station } = route?.params || {};
   const t = useTranslations();
   const navigation = useNavigation();
   const isFocused = useIsFocused();
@@ -181,14 +181,16 @@ const EditSubUnit = ({ route }) => {
           <View style={styles.subUnitData}>
             <TouchableOpacity onPress={setshowEdit}>
               <Text
-                testID={TESTID.MANAGE_SUB_UNIT_NAME}
+                accessibilityLabel={AccessibilityLabel.MANAGE_SUB_UNIT_NAME}
                 style={[styles.textWraper, styles.subUnitName]}
               >
                 {newName}
               </Text>
             </TouchableOpacity>
             <TouchableOpacity
-              testID={TESTID.MANAGE_SUB_UNIT_SELECT_FILE_BUTTON}
+              accessibilityLabel={
+                AccessibilityLabel.MANAGE_SUB_UNIT_SELECT_FILE_BUTTON
+              }
               onPress={selectFile}
               style={[styles.backgroundContainer]}
             >
@@ -233,7 +235,9 @@ const EditSubUnit = ({ route }) => {
           />
           {!showEdit && (
             <TouchableOpacity
-              testID={TESTID.MANAGE_SUB_UNIT_REMOVE_BUTTON}
+              accessibilityLabel={
+                AccessibilityLabel.MANAGE_SUB_UNIT_REMOVE_BUTTON
+              }
               onPress={onPressRemove}
               style={styles.removeButton}
             >
@@ -250,7 +254,7 @@ const EditSubUnit = ({ route }) => {
         </View>
       </View>
       <ModalCustom
-        testID={TESTID.MANAGE_SUB_UNIT_MODAL}
+        accessibilityLabel={AccessibilityLabel.MANAGE_SUB_UNIT_MODAL}
         isVisible={showEdit}
         onBackButtonPress={setHideEdit}
         onBackdropPress={setHideEdit}

package/src/screens/SubUnit/ManageSubUnit.js

@@ -20,7 +20,7 @@ import Routes from '../../utils/Route';
 import { RowItem } from '../../commons/RowItem';
 import NoSubUnitImage from '../../../assets/images/Illustrations.svg';
 import useManageSubUnit from './hooks/useManageSubUnit';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const ManageSubUnit = memo((props) => {
   const t = useTranslations();
@@ -50,7 +50,7 @@ const ManageSubUnit = memo((props) => {
     () => (
       <View style={styles.rightComponent}>
         <TouchableOpacity
-          testID={TESTID.ADD_SUB_UNIT}
+          accessibilityLabel={AccessibilityLabel.ADD_SUB_UNIT}
           onPress={addSubUnit}
           style={styles.headerButton}
         >

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

@@ -6,7 +6,7 @@ import { ImagePicker, ViewButtonBottom } from '../../../commons';
 import { act, create } from 'react-test-renderer';
 import Toast from 'react-native-toast-message';
 import Routes from '../../../utils/Route';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import _TextInput from '../../../commons/Form/TextInput';
 import AddSubUnit from '../AddSubUnit';
 import { getTranslate } from '../../../utils/I18n';
@@ -82,7 +82,8 @@ describe('Test AddSubUnit', () => {
     const instance = tree.root;
     const buttonChoosePhoto = instance.find(
       (el) =>
-        el.props.testID === TESTID.ADD_SUB_UNIT_BUTTON_CHOOSE_PHOTO &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ADD_SUB_UNIT_BUTTON_CHOOSE_PHOTO &&
         el.type === TouchableWithoutFeedback
     );
     const imagePicker = instance.findByType(ImagePicker);
@@ -218,7 +219,9 @@ describe('Test AddSubUnit', () => {
 
     const instance = tree.root;
     const buttonChooseLocation = instance.find(
-      (el) => el.props.testID === TESTID.ADD_SUB_UNIT_BUTTON_CHOOSE_LOCATION
+      (el) =>
+        el.props.accessibilityLabel ===
+        AccessibilityLabel.ADD_SUB_UNIT_BUTTON_CHOOSE_LOCATION
     );
     act(() => {
       buttonChooseLocation.props.onPress();

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

@@ -9,7 +9,7 @@ import Routes from '../../../utils/Route';
 import WrapParallaxScrollView from '../../../commons/WrapParallaxScrollView';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { TouchableOpacity } from 'react-native';
 
 const mockedNavigate = jest.fn();
@@ -153,7 +153,8 @@ describe('Test SubUnitDetail', () => {
     const instance = tree.root;
     const button = instance.find(
       (el) =>
-        el.props.testID === TESTID.HEADER_UNIT_BUTTON_BACK &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.HEADER_UNIT_BUTTON_BACK &&
         el.type === TouchableOpacity
     );
     act(() => {
@@ -161,7 +162,8 @@ describe('Test SubUnitDetail', () => {
     });
     const buttonOnActionPress = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.HEADER_UNIT_BUTTON_MORE &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.HEADER_UNIT_BUTTON_MORE &&
         el.type === TouchableOpacity
     );
     expect(buttonOnActionPress).toHaveLength(1);

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

@@ -10,7 +10,7 @@ import Toast from 'react-native-toast-message';
 
 import Routes from '../../../utils/Route';
 import EditSubUnit from '../EditSubUnit';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import Text from '../../../commons/Text';
 import _TextInput from '../../../commons/Form/TextInput';
 import { SCProvider } from '../../../context';
@@ -209,7 +209,8 @@ describe('Test EditSubUnit', () => {
     });
     const instance = tree.root;
     const modal = instance.find(
-      (el) => el.props.testID === TESTID.MANAGE_SUB_UNIT_MODAL
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.MANAGE_SUB_UNIT_MODAL
     );
     const viewBottomButtons = instance.findAllByType(ViewButtonBottom);
     const viewBottomButton = viewBottomButtons[0];
@@ -239,7 +240,8 @@ describe('Test EditSubUnit', () => {
     const instance = tree.root;
     const text = instance.find(
       (el) =>
-        el.props.testID === TESTID.MANAGE_SUB_UNIT_NAME && el.type === Text
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.MANAGE_SUB_UNIT_NAME && el.type === Text
     );
     const viewBottomButtons = instance.findAllByType(ViewButtonBottom);
     const viewBottomButton = viewBottomButtons[0];
@@ -273,7 +275,8 @@ describe('Test EditSubUnit', () => {
     const instance = tree.root;
     const button = instance.find(
       (el) =>
-        el.props.testID === TESTID.MANAGE_SUB_UNIT_REMOVE_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.MANAGE_SUB_UNIT_REMOVE_BUTTON &&
         el.type === TouchableOpacity
     );
     const alertAction = instance.findByType(AlertAction);
@@ -305,7 +308,8 @@ describe('Test EditSubUnit', () => {
     const instance = tree.root;
     const button = instance.find(
       (el) =>
-        el.props.testID === TESTID.MANAGE_SUB_UNIT_SELECT_FILE_BUTTON &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.MANAGE_SUB_UNIT_SELECT_FILE_BUTTON &&
         el.type === TouchableOpacity
     );
     const imagePicker = instance.findByType(ImagePicker);

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

@@ -7,7 +7,7 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { RowItem } from '../../../commons/RowItem';
 import Routes from '../../../utils/Route';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 const mockSetState = jest.fn();
 
@@ -87,7 +87,8 @@ describe('Test ManageSubUnit', () => {
     const instance = tree.root;
     const buttonAddSubUnit = instance.find(
       (el) =>
-        el.props.testID === TESTID.ADD_SUB_UNIT && el.type === TouchableOpacity
+        el.props.accessibilityLabel === AccessibilityLabel.ADD_SUB_UNIT &&
+        el.type === TouchableOpacity
     );
     act(() => {
       buttonAddSubUnit.props.onPress();

package/src/screens/SyncLGDevice/AddLGDevice.js

@@ -10,13 +10,13 @@ import Text from '../../commons/Text';
 import GroupCheckBox from '../../commons/GroupCheckBox';
 import { axiosGet, axiosPost } from '../../utils/Apis/axios';
 import Routes from '../../utils/Route';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { ToastBottomHelper } from '../../utils/Utils';
 import { SCConfig } from '../../configs';
 
 const AddLGDevice = memo(({ route }) => {
   const t = useTranslations();
-  const { unit_id, code, backend_url } = route.params;
+  const { unit_id, code, backend_url } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [unit, setUnit] = useState({ stations: [] });
   const [stationId, setStationId] = useState(0);
@@ -79,7 +79,7 @@ const AddLGDevice = memo(({ route }) => {
   return (
     <SafeAreaView style={styles.wrap}>
       <Text
-        testID={TESTID.ADD_NEW_DEVICE_LG_ADD}
+        accessibilityLabel={AccessibilityLabel.ADD_NEW_DEVICE_LG_ADD}
         semibold
         size={20}
         color={Colors.Black}
@@ -88,7 +88,7 @@ const AddLGDevice = memo(({ route }) => {
         {t('add_new_device')}
       </Text>
       <Text
-        testID={TESTID.ADD_NEW_DEVICE_LG_THEN_SELECT}
+        accessibilityLabel={AccessibilityLabel.ADD_NEW_DEVICE_LG_THEN_SELECT}
         size={14}
         color={Colors.Gray8}
         style={styles.txtNote}

package/src/screens/SyncLGDevice/__test__/AddLGDevice.test.js

@@ -4,7 +4,7 @@ import MockAdapter from 'axios-mock-adapter';
 import AddLGDevice from '../AddLGDevice';
 import API from '../../../configs/API';
 import GroupCheckBox from '../../../commons/GroupCheckBox';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { getTranslate } from '../../../utils/I18n';
 import { ViewButtonBottom } from '../../../commons';
 import { ToastBottomHelper } from '../../../utils/Utils';
@@ -57,7 +57,7 @@ describe('Test Add LG Device', () => {
   });
 
   const getText = (instance, id) => {
-    return instance.find((el) => el.props.testID === id);
+    return instance.find((el) => el.props.accessibilityLabel === id);
   };
 
   test('render', async () => {
@@ -65,8 +65,11 @@ describe('Test Add LG Device', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const textAdd = getText(instance, TESTID.ADD_NEW_DEVICE_LG_ADD);
-    const textThen = getText(instance, TESTID.ADD_NEW_DEVICE_LG_THEN_SELECT);
+    const textAdd = getText(instance, AccessibilityLabel.ADD_NEW_DEVICE_LG_ADD);
+    const textThen = getText(
+      instance,
+      AccessibilityLabel.ADD_NEW_DEVICE_LG_THEN_SELECT
+    );
     expect(textAdd.props.children).toEqual(
       getTranslate('en', 'add_new_device')
     );

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { create, act } from 'react-test-renderer';
 import { Text } from 'react-native';
 
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 import TDSGuide from '../index';
 import { SCProvider } from '../../../context';
@@ -34,7 +34,9 @@ describe('Test TDS Guide', () => {
 
     const instance = tree.root;
     const buttonOnActionPress = instance.find(
-      (el) => el.props.testID === TESTID.TDS_GUIDE_TITLE && el.type === Text
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.TDS_GUIDE_TITLE &&
+        el.type === Text
     );
     expect(buttonOnActionPress).not.toBeUndefined();
   });

package/src/screens/TDSGuide/index.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { StyleSheet, View, ScrollView } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 import { Theme } from '../../configs';
 import Text from '../../commons/Text';
@@ -21,7 +21,7 @@ const TDSGuide = memo(() => {
           type="H3"
           semibold
           style={styles.titlePadding}
-          testID={TESTID.TDS_GUIDE_TITLE}
+          accessibilityLabel={AccessibilityLabel.TDS_GUIDE_TITLE}
         >
           {t('what_is_tds_title')}
         </Text>

package/src/screens/Template/EditTemplate.js

@@ -0,0 +1,152 @@
+import { useNavigation, useRoute } from '@react-navigation/native';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
+import DraggableFlatList from 'react-native-draggable-flatlist';
+
+import { EmptyComponent } from '../../commons/DevMode';
+import { HeaderCustom } from '../../commons/Header';
+import Text from '../../commons/Text';
+import { Images } from '../../configs';
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
+import t from '../../hooks/Common/useTranslations';
+import { SensorDisplayItem } from '../Device/components/SensorDisplayItem';
+import styles from './Styles/EditTemplateStyle';
+import { notImplemented } from '../../utils/Utils';
+
+const EditTemplate = () => {
+  const { setAction } = useContext(SCContext);
+  const { params = {} } = useRoute();
+  const { data = [], setData } = params;
+  const { goBack } = useNavigation();
+  const [actionsList, setActionList] = useState(
+    [...data].map((item) => {
+      return {
+        ...item,
+        key: `item-${item?.id}`,
+      };
+    })
+  );
+
+  const AddWidget = useCallback(() => {
+    return (
+      <TouchableOpacity style={styles.addWidgetButton}>
+        <View style={styles.wrapIconAdd}>
+          <Image source={Images.plus} />
+        </View>
+        <Text style={styles.addWidget}>{t('add_widget')}</Text>
+      </TouchableOpacity>
+    );
+  }, []);
+
+  const onDrag = useCallback(
+    (item, drag) => () => {
+      drag && drag();
+      setAction(Action.SET_WIDGET_DRAGGING, item?.id);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onDragEnd = useCallback(({ data: dragData }) => {
+    setActionList(dragData);
+    setAction(Action.SET_WIDGET_DRAGGING);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onPressSave = useCallback(() => {
+    setData && setData(actionsList);
+    goBack();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actionsList]);
+
+  const onDelete = useCallback(() => {
+    notImplemented(t);
+  }, []);
+
+  const renderEmpty = useMemo(() => {
+    return (
+      <View style={styles.empty}>
+        <EmptyComponent text1={t('no_widgets')} text2={t('add_your_widget')} />
+        <AddWidget />
+      </View>
+    );
+  }, []);
+
+  useEffect(() => {
+    setAction(Action.SET_IS_IN_EDIT_TEMPLATE_SCREEN, true);
+    return () => setAction(Action.SET_IS_IN_EDIT_TEMPLATE_SCREEN);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom
+        title={t('edit_template')}
+        wrapTitleStyle={styles.wrapTitleStyle}
+        iconLeft={Images.close}
+        iconBackStyle={styles.iconBackStyle}
+        titleStyles={styles.titleStyles}
+      />
+      {!actionsList?.length ? (
+        renderEmpty
+      ) : (
+        <>
+          <View style={styles.wrapDescription}>
+            <Text style={styles.description}>
+              {t('hold_and_hover_description')}
+            </Text>
+          </View>
+          <DraggableFlatList
+            showsVerticalScrollIndicator={false}
+            data={actionsList}
+            renderItem={({ item, index, drag }) => {
+              return (
+                <TouchableOpacity onLongPress={onDrag(item, drag)}>
+                  <SensorDisplayItem
+                    item={item}
+                    getData={() => {}}
+                    offsetTitle={'offsetTitle'}
+                    setOffsetTitle={'setOffsetTitle'}
+                    maxValue={100}
+                  />
+                  <TouchableOpacity
+                    style={styles.deleteButton}
+                    onPress={onDelete}
+                  >
+                    <Image
+                      source={Images.removeCircle}
+                      style={styles.deleteIcon}
+                    />
+                  </TouchableOpacity>
+                </TouchableOpacity>
+              );
+            }}
+            keyExtractor={(item) => `draggable-item-${item.key}`}
+            onDragEnd={onDragEnd}
+            extraData={actionsList}
+            containerStyle={styles.containerStyle}
+            ListFooterComponent={
+              <View style={styles.wrapListFooterComponent}>
+                <AddWidget />
+              </View>
+            }
+          />
+          <View style={styles.wrapBottom}>
+            <TouchableOpacity style={styles.saveButton} onPress={onPressSave}>
+              <Text style={styles.save}>{t('save')}</Text>
+            </TouchableOpacity>
+          </View>
+        </>
+      )}
+    </View>
+  );
+};
+
+export default EditTemplate;

package/src/screens/Template/GatewayList.js

@@ -0,0 +1,51 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback, useState } from 'react';
+import { View } from 'react-native';
+import { Search } from '../../commons/DevMode';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import Text from '../../commons/Text';
+import t from '../../hooks/Common/useTranslations';
+import styles from './Styles/GatewayStyles';
+
+const GatewayList = () => {
+  const { goBack } = useNavigation();
+  const [data] = useState([
+    {
+      id: 1,
+      name: 'Gateway name',
+      templateName: 'Template name',
+      status: 'ACTIVE',
+    },
+  ]);
+
+  const GatewayItem = useCallback(({ item }) => {
+    return (
+      <View style={styles.wrapItem}>
+        <Text style={styles.gateWayName}>{item?.name}</Text>
+        <View>
+          <Text style={styles.templateName}>{item?.templateName}</Text>
+          <View style={styles.wrapStatus}>
+            <Text style={styles.status}>{item?.status}</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }, []);
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={t('gateway_list')}
+        headerAniStyle={styles.headerAniStyle}
+        onGoBack={goBack}
+      >
+        <View style={styles.wrapContent}>
+          <Search />
+          {!!data.length && data.map((item) => <GatewayItem item={item} />)}
+        </View>
+      </WrapHeaderScrollable>
+    </View>
+  );
+};
+
+export default GatewayList;