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

package/src/screens/Notification/components/NotificationItem.js

@@ -3,6 +3,7 @@ import moment from 'moment';
 import React, { memo, useCallback, useState } from 'react';
 import { Image, TouchableOpacity, View } from 'react-native';
 
+import Notify from '../../../../assets/images/Notify.svg';
 import IconComponent from '../../../commons/IconComponent';
 import Text from '../../../commons/Text';
 import { API, Colors, SCConfig } from '../../../configs';
@@ -16,7 +17,6 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { axiosPost } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
 import styles from '../styles/NotificationItemStyles';
-import Notify from '../../../../assets/images/Notify.svg';
 
 const NotificationItem = memo(({ item }) => {
   const t = useTranslations();
@@ -72,7 +72,7 @@ const NotificationItem = memo(({ item }) => {
           },
           iconContent: (
             <IconComponent
-              icon={'addusergroup'}
+              icon="usergroup-add"
               style={styles.backgroundSummer}
             />
           ),
@@ -438,7 +438,7 @@ const NotificationItem = memo(({ item }) => {
             navigation.navigate(Routes.UnitStack, {
               screen: Routes.ScriptDetail,
               params: {
-                id: automate_id,
+                preAutomate: { id: automate_id },
               },
             });
           },

package/src/screens/Notification/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useFocusEffect } from '@react-navigation/native';
 
 import styles from './styles/indexStyles';
@@ -33,7 +33,7 @@ const Notification = memo(() => {
             notImplemented(t);
           }}
         >
-          <AntDesign name={'plus'} size={27} color={Colors.Black} />
+          <IconOutline name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
 
         <TouchableOpacity
@@ -41,7 +41,7 @@ const Notification = memo(() => {
             notImplemented(t);
           }}
         >
-          <AntDesign name={'search1'} size={27} color={Colors.Black} />
+          <IconOutline name={'search'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),

package/src/screens/ScanChipQR/components/QRScan/index.js

@@ -7,7 +7,7 @@ import {
   Dimensions,
   TouchableOpacity,
 } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { RNCamera } from 'react-native-camera';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
@@ -36,7 +36,7 @@ const VerifyingQRCode = memo(() => {
     <View style={styles.maskOuter}>
       <TouchableOpacity style={[styles.viewVerifying, styles.buttonShadow]}>
         <Loading
-          icon={<AntDesign name={'sync'} color={Colors.Green6} size={16} />}
+          icon={<IconOutline name={'sync'} color={Colors.Green6} size={16} />}
         />
         <Text type={'Body'} style={styles.text}>
           {t('verify_qr_code')}
@@ -117,7 +117,7 @@ const QRScan = ({ isScanReady = true, onScan }) => {
               borderColor={Colors.Gray4}
               style={styles.buttonClose}
             >
-              <AntDesign name={'close'} size={24} co />
+              <IconOutline name={'close'} size={24} co />
             </CircleButton>
             {loading && <VerifyingQRCode />}
           </View>

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

@@ -158,7 +158,7 @@ describe('Test Select unit screen', () => {
       await iconClose[0].props.onPress();
     });
     expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
-      id: 1,
+      automate: { id: 1 },
       havePermission: true,
       isMultiUnits: undefined,
       name: '1',

package/src/screens/SelectUnit/index.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity, FlatList } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import { API, Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -50,7 +50,7 @@ const SelectUnit = () => {
   const handleOnGoBackAndClose = useCallback(() => {
     if (automateId) {
       navigate(Routes.ScriptDetail, {
-        id: automateId,
+        automate: { id: automateId },
         name: scriptName,
         type: oldType,
         havePermission: true,
@@ -76,7 +76,7 @@ const SelectUnit = () => {
         isAutomateTab,
         isMultiUnits,
         routeName,
-        unit: selectedItem,
+        multiUnit: selectedItem,
         automateId,
         scriptName,
         oldType,
@@ -132,7 +132,7 @@ const SelectUnit = () => {
         accessibilityLabel={AccessibilityLabel.ICON_CLOSE}
       >
         <View style={styles.buttonClose}>
-          <AntDesign name={'close'} size={24} color={Colors.Black} />
+          <IconOutline name={'close'} size={24} color={Colors.Black} />
         </View>
       </TouchableOpacity>
     ),

package/src/screens/SharedUnit/TabHeader.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import Text from '../../commons/Text';
@@ -54,7 +54,7 @@ const TabHeader = ({ current, getCurrentTab, showModal, textFilter }) => {
           <Text style={styles.sortBy}>
             {t('sort_by') + ': '} {textFilter}
           </Text>
-          <AntDesign name="arrowdown" size={10} />
+          <IconOutline name="arrowdown" size={10} />
         </TouchableOpacity>
       </View>
     </View>

package/src/screens/Sharing/Components/EndDevice.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo, useState } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../../configs';
 import styles from './Styles/DeviceItemStyles';
 import { AccessibilityLabel } from '../../../configs/Constants';
@@ -71,11 +71,11 @@ const EndDevice = ({
             {name}
           </Text>
           {checked && (
-            <AntDesign name={'check'} color={Colors.Primary} size={20} />
+            <IconOutline name={'check'} color={Colors.Primary} size={20} />
           )}
 
           {dataConfig.length > 0 && (
-            <AntDesign
+            <IconOutline
               onPress={() => toggleExpandEndDevice()}
               name={isItemExpanded ? 'up' : 'down'}
               size={20}

package/src/screens/Sharing/UnitMemberList.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
@@ -83,7 +83,7 @@ const UnitMemberList = ({ route }) => {
       style={styles.rightHeader}
     >
       {isOwner ? (
-        <AntDesign name={'plus'} size={27} color={Colors.Black} />
+        <IconOutline name={'plus'} size={27} color={Colors.Black} />
       ) : (
         <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
       )}

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/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();
@@ -64,7 +65,7 @@ const AddSubUnit = ({ route }) => {
           lat: location.latitude,
           lng: location.longitude,
         };
-        const formData = createFormData(dataObj, ['background', 'lat', 'lng']);
+        const formData = createFormData(dataObj, ['background']);
         const { success, data } = await axiosPost(
           API.UNIT.CREATE_UNIT(),
           formData,
@@ -85,7 +86,6 @@ const AddSubUnit = ({ route }) => {
           cleanData();
         } else {
           awaitCreate.current = false;
-          ToastBottomHelper.error(t('text_create_unit_fail'));
         }
       }
     } else {
@@ -226,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>
   );

package/src/screens/UVIndexGuide/index.js

@@ -2,16 +2,14 @@ import React, { memo, useMemo } from 'react';
 import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import { Colors, Theme } from '../../configs';
 import Text from '../../commons/Text';
+import { Colors, Theme } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
-import useTitleHeader from '../../hooks/Common/useTitleHeader';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const UVIndexGuide = memo(() => {
   const t = useTranslations();
-  useTitleHeader(t('UV Index Guide'));
   const language = useSCContextSelector((state) => state.language);
 
   const data = useMemo(

package/src/screens/Unit/SelectAddToFavorites.js

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import { View, ScrollView, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { HeaderCustom } from '../../commons/Header';
 import Text from '../../commons/Text';
 import NavBar from '../../commons/NavBar';
@@ -142,7 +142,7 @@ const SelectAddToFavorites = memo(({ route }) => {
         style={styles.buttonClose}
         onPress={goBack}
       >
-        <AntDesign name={'close'} size={24} color={Colors.Black} />
+        <IconOutline name={'close'} size={24} color={Colors.Black} />
       </TouchableOpacity>
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps