@eohjsc/react-native-smart-city 0.5.9 → 0.6.0-rc2

package/src/screens/Automate/index.js

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { FlatList, Image, TouchableOpacity, View } from 'react-native';
-import { IconFill } from '@ant-design/icons-react-native/es';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import {
   useIsFocused,
   useNavigation,
@@ -197,7 +197,7 @@ const Automate = () => {
       /* istanbul ignore next */
       headerRight: () => (
         <TouchableOpacity style={styles.buttonAdd}>
-          <IconFill name={'plus-circle'} size={28} color={Colors.Orange} />
+          <AntDesign name={'plus-circle'} size={28} color={Colors.Orange} />
         </TouchableOpacity>
       ),
     });

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

@@ -13,20 +13,8 @@ import { ToastBottomHelper } from '../../../utils/Utils';
 import BottomButtonView from '../../../commons/BottomButtonView';
 
 const mock = new MockAdapter(api.axiosInstance);
-const mockGoBack = jest.fn();
 const mockSetDisplay = jest.fn();
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-
-    useNavigation: () => ({
-      goBack: mockGoBack,
-    }),
-  };
-});
-
 const wrapComponent = ({ ...rest }) => (
   <SCProvider initState={mockSCStore({})}>
     <ChangePosition {...rest} />
@@ -38,7 +26,6 @@ describe('Test ChangePosition', () => {
 
   beforeEach(() => {
     useRoute.mockClear();
-    mockGoBack.mockClear();
   });
 
   it('render ChangePosition', async () => {
@@ -70,7 +57,7 @@ describe('Test ChangePosition', () => {
     await act(async () => {
       bottomButtonView[0].props.onPressMain();
     });
-    expect(mockGoBack).toHaveBeenCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
     expect(mockFetchData).toHaveBeenCalled();
     expect(mockSetDisplay).toHaveBeenCalled();
     expect(spyToastSuccess).toBeCalledWith('Updated widget successfully');

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

@@ -18,18 +18,6 @@ const wrapComponent = (route, navigation) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-const mockGoBack = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-      goBack: mockGoBack,
-    }),
-  };
-});
-
 const mockSetState = jest.fn();
 jest.mock('react', () => {
   return {

package/src/screens/Device/EditDevice/__test__/EditDevice.test.js

@@ -23,17 +23,7 @@ const wrapComponent = (route) => (
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockPop = jest.fn();
 const mockSetSensorDetail = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      pop: mockPop,
-    }),
-  };
-});
 
 describe('Test EditDevice', () => {
   let tree;
@@ -135,7 +125,7 @@ describe('Test EditDevice', () => {
       await alertAction.props.rightButtonClick();
     });
     expect(alertAction.props.visible).toBeFalsy();
-    expect(mockPop).toHaveBeenCalled();
+    expect(global.mockedPop).toHaveBeenCalled();
   });
 
   it('test delete EditDevice failure', async () => {

package/src/screens/Device/EditDevice/index.js

@@ -2,7 +2,7 @@ import React, { memo, useState, useCallback } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { HeaderCustom } from '../../../commons/Header';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Colors } from '../../../configs';
 import Text from '../../../commons/Text';
 import { useRoute } from '@react-navigation/native';
@@ -92,7 +92,7 @@ const EditDevice = memo(() => {
             <Text type="Body" Reugular color={Colors.Grey7}>
               {sensorName}
             </Text>
-            <IconOutline
+            <AntDesign
               name="right"
               size={18}
               color={Colors.Gray7}

package/src/screens/Device/__test__/detail.test.js

@@ -11,7 +11,7 @@ import { AlertSent } from '../../../commons/EmergencyButton/AlertSent';
 import { AlertAction, ButtonPopup, MenuActionMore } from '../../../commons';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import Text from '../../../commons/Text';
-import { IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
 import { getTranslate } from '../../../utils/I18n';
 import { SCProvider } from '../../../context';
@@ -115,7 +115,7 @@ describe('test DeviceDetail', () => {
               command_prefer_over_googlehome: false,
               command_prefer_over_internet: true,
               googlehome_actions: [],
-              icon: 'caret-up',
+              icon: 'caretup',
               id: 9,
               key: '2b949045-8e03-4c07-a855-7794ade2e69c',
             },
@@ -137,13 +137,13 @@ describe('test DeviceDetail', () => {
               command_prefer_over_googlehome: false,
               command_prefer_over_internet: true,
               googlehome_actions: [],
-              icon: 'caret-down',
+              icon: 'caretdown',
               id: 10,
               key: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
             },
-            icon1: 'caret-up',
+            icon1: 'caretup',
             icon2: 'stop',
-            icon3: 'caret-down',
+            icon3: 'caretdown',
             text1: 'UP',
             text2: 'STOP/UNLOCK',
             text3: 'DOWN',
@@ -352,7 +352,7 @@ describe('test DeviceDetail', () => {
     const buttonPopupIcon = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.BUTTON_POPUP_RESOLVED_ICON && el.type === IconFill
+          AccessibilityLabel.BUTTON_POPUP_RESOLVED_ICON && el.type === AntDesign
     );
     expect(buttonPopupTitle.props.children).toEqual([
       'Unit name',
@@ -403,16 +403,16 @@ describe('test DeviceDetail', () => {
               action1: 'a',
               action2: 'b',
               action3: 'b',
-              icon1: 'caret-up',
+              icon1: 'caretup',
               icon2: 'stop',
-              icon3: 'caret-down',
+              icon3: 'caretdown',
               text1: 'A',
               text2: 'B',
               text3: 'C',
               action1_data: {
                 id: 9,
                 key: 'a',
-                icon: 'caret-up',
+                icon: 'caretup',
                 color: '#00979D',
                 googlehome_actions: [],
                 command_prefer_over_internet: false,
@@ -432,7 +432,7 @@ describe('test DeviceDetail', () => {
               action3_data: {
                 id: 10,
                 key: 'b',
-                icon: 'caret-down',
+                icon: 'caretdown',
                 color: '#00979D',
                 googlehome_actions: [],
                 command_prefer_over_internet: false,
@@ -728,7 +728,7 @@ describe('test DeviceDetail', () => {
     await act(async () => {
       await menu.props.onItemClick(gotoActivityLog);
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ActivityLog, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ActivityLog, {
       id: route.params.sensorData.id,
       type: 'action',
       share: route.params.unitData,

package/src/screens/Device/__test__/sensorDisplayItem.test.js

@@ -31,21 +31,9 @@ const wrapComponent = ({ ...rest }) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-    useFocusEffect: (func) => func(),
-  };
-});
-
 describe('Test SensorDisplayItem', () => {
   let tree;
-  it('render DetailHistoryChart', async () => {
+  it('render visualChart', async () => {
     const item = {
       id: 10452,
       order: 0,
@@ -74,8 +62,8 @@ describe('Test SensorDisplayItem', () => {
       tree = await renderer.create(wrapComponent({ item, sensor }));
     });
     const instance = tree.root;
-    const detailHistoryChart = instance.findAllByType(VisualChart);
-    expect(detailHistoryChart).toHaveLength(1);
+    const visualChart = instance.findAllByType(VisualChart);
+    expect(visualChart).toHaveLength(1);
   });
 
   it('render ActionGroup', async () => {

package/src/screens/Device/components/SensorDisplayItem.js

@@ -13,18 +13,19 @@ import ListQualityIndicator from '../../../commons/Device/WaterQualitySensor/Lis
 import Compass from '../../../commons/Device/WindDirection/Compass';
 import Anemometer from '../../../commons/Device/WindSpeed/Anemometer';
 import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
-import { AccessibilityLabel } from '../../../configs/Constants';
+import { AccessibilityLabel, WIDGET_TYPE } from '../../../configs/Constants';
 import { useSCContextSelector } from '../../../context';
 import { useRemoteControl } from '../../../hooks/IoT';
 import { useConfigGlobalState } from '../../../iot/states';
 import SmartIr from '../../../screens/SmartIr';
 import { useEvaluateValue } from '../hooks/useEvaluateValue';
 import styles from '../styles';
-import { DetailHistoryChart } from './DetailHistoryChart';
 import VisualChart from './VisualChart';
 import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { Device } from '../../../configs';
 import DonutCharts from './DonutChart';
+import IFrame from '../../../commons/Widgets/IFrame/IFrame';
+import IFrameWithConfig from '../../../commons/Widgets/IFrameWithConfig/IFrameWithConfig';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
@@ -176,10 +177,27 @@ export const SensorDisplayItem = ({
           isWidgetOrder={isWidgetOrder}
         />
       );
+    case WIDGET_TYPE.iframe:
+      return (
+        <IFrame
+          doAction={doAction}
+          sensor={sensor}
+          id={idTemplate}
+          item={item}
+          isWidgetOrder={isWidgetOrder}
+        />
+      );
+    case WIDGET_TYPE.iframeWithConfig:
+      return (
+        <IFrameWithConfig
+          doAction={doAction}
+          sensor={sensor}
+          id={idTemplate}
+          item={item}
+          isWidgetOrder={isWidgetOrder}
+        />
+      );
     case 'history':
-      if (configuration?.config === 'power_consumption') {
-        return <DetailHistoryChart item={item} sensor={sensor} />;
-      }
       return (
         <VisualChart
           item={item}

package/src/screens/Device/components/__test__/VisualChart.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import MockAdapter from 'axios-mock-adapter';
 import moment from 'moment';
-import { act, create } from 'react-test-renderer';
+import { act } from 'react-test-renderer';
 
 import VisualChart from '../VisualChart';
 import { API } from '../../../../configs';
@@ -11,14 +11,7 @@ import api from '../../../../utils/Apis/axios';
 import ChartAggregationOption from '../../../../commons/ChartAggregationOption';
 import DateTimeRangeChange from '../../../../commons/DateTimeRangeChange';
 import Highcharts from '../../../../commons/Highcharts';
-
-const render = async (component) => {
-  let tree;
-  await act(async () => {
-    tree = await create(component);
-  });
-  return tree;
-};
+import { render } from '../../../../../jest/render';
 
 const mockAxios = new MockAdapter(api.axiosInstance);
 

package/src/screens/Device/detail.js

@@ -8,8 +8,7 @@ import React, {
 } from 'react';
 import { View, TouchableOpacity, Platform } from 'react-native';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
-import { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import moment from 'moment';
 
 import { SCContext } from '../../context';
@@ -215,7 +214,7 @@ const DeviceDetail = ({ route }) => {
 
   useEffect(() => {
     if (
-      unit.remote_control_options &&
+      unit?.remote_control_options &&
       unit.remote_control_options.googlehome?.length &&
       isNetworkConnected
     ) {
@@ -685,9 +684,9 @@ const DeviceDetail = ({ route }) => {
         >
           <View style={styles.buttonStar}>
             {isFavorite ? (
-              <IconFill name="star" size={25} color={Colors.Yellow6} />
+              <AntDesign name="star" size={25} color={Colors.Yellow6} />
             ) : (
-              <IconOutline name="star" size={25} />
+              <AntDesign name="star" size={25} />
             )}
           </View>
         </TouchableOpacity>
@@ -695,7 +694,7 @@ const DeviceDetail = ({ route }) => {
         {isShowSetupEmergencyContact && (
           <TouchableOpacity onPress={onPressSetting}>
             <View style={styles.button}>
-              <Icon name="setting" size={25} color={Colors.Black} />
+              <AntDesign name="setting" size={25} color={Colors.Black} />
             </View>
           </TouchableOpacity>
         )}
@@ -706,7 +705,7 @@ const DeviceDetail = ({ route }) => {
           ref={refMenuAction}
           accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_MORE}
         >
-          <Icon name={'more'} size={27} color={Colors.Black} />
+          <AntDesign name={'more'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),
@@ -791,7 +790,9 @@ const DeviceDetail = ({ route }) => {
           canManageSubUnit && (
             <BottomButtonView
               style={styles.bottomButtonEmergencyContact}
-              mainIcon={<Icon name="plus" size={16} color={Colors.Primary} />}
+              mainIcon={
+                <AntDesign name="plus" size={16} color={Colors.Primary} />
+              }
               mainTitle={t('setup_my_emergency_contact')}
               onPressMain={onSetupContacts}
               typeMain="primaryBorder"
@@ -825,7 +826,7 @@ const DeviceDetail = ({ route }) => {
       {isShowEmergencyResolve && !isEmergencyPopupScreen && (
         <BottomButtonView
           style={styles.bottomButtonEmergencyResolve}
-          mainIcon={<IconFill name="tool" size={15} color={Colors.Gray6} />}
+          mainIcon={<AntDesign name="tool" size={15} color={Colors.Gray6} />}
           mainTitle={t('resolve_situation')}
           onPressMain={onPressResolveSituationConfirm}
           topComponent={
@@ -865,7 +866,7 @@ const DeviceDetail = ({ route }) => {
           >
             {unit?.name} - {sensor?.station?.name}
           </Text>
-          <IconFill
+          <AntDesign
             accessibilityLabel={AccessibilityLabel.BUTTON_POPUP_RESOLVED_ICON}
             name="check-circle"
             size={42}

package/src/screens/Drawer/Drawer.test.js

@@ -4,16 +4,7 @@ import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import { SCProvider } from '../../context';
 import { mockSCStore } from '../../context/mockStore';
 import Drawer, { Row } from './index';
-
-const mockDispatch = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      dispatch: mockDispatch,
-    }),
-  };
-});
+import { useNavigation } from '@react-navigation/native';
 
 const wrapComponent = (initState = mockSCStore({})) => (
   <SCProvider initState={initState}>
@@ -24,6 +15,7 @@ const wrapComponent = (initState = mockSCStore({})) => (
 describe('Drawer', () => {
   let tree;
   it('test render with user', async () => {
+    const { dispatch } = useNavigation();
     await act(async () => {
       tree = await renderer.create(wrapComponent());
     });
@@ -43,7 +35,7 @@ describe('Drawer', () => {
     await act(async () => {
       await rows[2].props.onPress();
     });
-    expect(mockDispatch).toBeCalledWith({
+    expect(dispatch).toBeCalledWith({
       payload: { index: 0, routes: [{ name: 'Main' }] },
       type: 'RESET',
     });

package/src/screens/Drawer/index.js

@@ -1,5 +1,4 @@
-import { IconOutline } from '@ant-design/icons-react-native';
-import { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import React, { useCallback, useContext } from 'react';
 import {
   Image,
@@ -60,7 +59,7 @@ const DrawerContainer = () => {
                 style={styles.avatar}
                 accessibilityLabel={AccessibilityLabel.SIDE_MENU_AVATAR_USER}
               >
-                <Icon name={'user'} size={27} />
+                <AntDesign name={'user'} size={27} />
               </View>
             )}
             <View style={styles.textContainer}>
@@ -117,7 +116,7 @@ export const Row = ({
       ]}
       accessibilityLabel={accessibilityLabel}
     >
-      <IconOutline name={image} size={24} />
+      <AntDesign name={image} size={24} />
 
       <View style={styles.wrapText}>
         <Text style={[styles.text]}>{name}</Text>

package/src/screens/EmergencyContacts/EmergencyContactsList.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { AlertAction, MenuActionList, Section } from '../../commons';
@@ -99,7 +99,7 @@ export const EmergencyContactsList = ({ route }) => {
                 : 'disable'
             }
             leftIcon={
-              <IconOutline name={'plus'} size={20} color={Colors.White} />
+              <AntDesign name={'plus'} size={20} color={Colors.White} />
             }
             text={t('add_new')}
             subtext={t('emergency_max_contacts', {
@@ -113,7 +113,7 @@ export const EmergencyContactsList = ({ route }) => {
                 key={contact.id}
                 index={index}
                 leftIcon={
-                  <IconOutline name={'user'} size={20} color={Colors.White} />
+                  <AntDesign name={'user'} size={20} color={Colors.White} />
                 }
                 text={contact.name}
                 subtext={contact.phone_number}
@@ -122,11 +122,7 @@ export const EmergencyContactsList = ({ route }) => {
                     style={styles.buttonRemove}
                     onPress={onPressRemoveContact(contact)}
                   >
-                    <IconOutline
-                      name={'minus'}
-                      size={20}
-                      color={Colors.Gray8}
-                    />
+                    <AntDesign name={'minus'} size={20} color={Colors.Gray8} />
                   </TouchableOpacity>
                 }
               />

package/src/screens/EmergencyContacts/EmergencyContactsSelectContacts.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Section, ViewButtonBottom } from '../../commons';
@@ -81,7 +81,7 @@ export const EmergencyContactsSelectContacts = ({ route }) => {
               }
               index={index}
               leftIcon={
-                <IconOutline name={'user'} size={20} color={Colors.White} />
+                <AntDesign name={'user'} size={20} color={Colors.White} />
               }
               text={contact.name}
               subtext={contact.phone_number}
@@ -91,7 +91,7 @@ export const EmergencyContactsSelectContacts = ({ route }) => {
                   {currentContacts.some(
                     (item) => item?.name === contact?.name
                   ) && (
-                    <IconOutline
+                    <AntDesign
                       name={'check-circle'}
                       size={20}
                       color={Colors.Primary}

package/src/screens/EmergencyContacts/__test__/EmergencyContactAddNew.test.js

@@ -20,19 +20,8 @@ const wrapComponent = (route) => (
 
 jest.mock('react-native-toast-message');
 
-const mockedGoBack = jest.fn();
-
 const mock = new MockAdapter(api.axiosInstance);
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      goBack: mockedGoBack,
-    }),
-  };
-});
-
 describe('test EmergencyContactAddNew', () => {
   let route;
   beforeEach(() => {
@@ -44,9 +33,7 @@ describe('test EmergencyContactAddNew', () => {
         },
       },
     };
-    mockedGoBack.mockClear();
-  });
-  afterEach(() => {
+    global.mockedGoBack.mockClear();
     Toast.show.mockClear();
   });
 
@@ -105,7 +92,7 @@ describe('test EmergencyContactAddNew', () => {
       viewButtonBottom.props.onLeftClick();
     });
 
-    expect(mockedGoBack).toHaveBeenCalledTimes(1);
+    expect(global.mockedGoBack).toHaveBeenCalledTimes(1);
   });
 
   it('onSave success', async () => {
@@ -129,7 +116,7 @@ describe('test EmergencyContactAddNew', () => {
       await viewButtonBottom.props.onRightClick();
     });
 
-    expect(mockedGoBack).toHaveBeenCalledTimes(1);
+    expect(global.mockedGoBack).toHaveBeenCalledTimes(1);
   });
 
   it('onSave failed', async () => {
@@ -159,7 +146,7 @@ describe('test EmergencyContactAddNew', () => {
       text1: getTranslate('en', 'create_contact_failed'),
       visibilityTime: 1000,
     });
-    expect(mockedGoBack).not.toHaveBeenCalled();
+    expect(global.mockedGoBack).not.toHaveBeenCalled();
   });
 
   it('invalid phone number', async () => {

package/src/screens/EmergencyContacts/__test__/EmergencyContactList.test.js

@@ -13,6 +13,7 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
 import { RowUser } from '../../../commons/RowUser';
+import { useNavigation } from '@react-navigation/native';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -22,18 +23,6 @@ const wrapComponent = (route) => (
   </SCProvider>
 );
 
-const mockedNavigate = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: () => true,
-  };
-});
-
 describe('test EmergencyContactList', () => {
   let route;
 
@@ -44,7 +33,6 @@ describe('test EmergencyContactList', () => {
         group: 1,
       },
     };
-    mockedNavigate.mockClear();
     mock.reset();
   });
   let tree;
@@ -137,6 +125,7 @@ describe('test EmergencyContactList', () => {
   });
 
   it('onItemAddClick select unit members', async () => {
+    const { navigate } = useNavigation();
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -159,7 +148,7 @@ describe('test EmergencyContactList', () => {
       buttonsMenuActionList[1].props.onPress();
     });
 
-    expect(mockedNavigate).toHaveBeenCalledWith(
+    expect(navigate).toHaveBeenCalledWith(
       Routes.EmergencyContactsSelectContacts,
       {
         unitId: route.params.unitId,

package/src/screens/EmergencyContacts/__test__/EmergencyContactsSelectContacts.test.js

@@ -14,16 +14,6 @@ import { getTranslate } from '../../../utils/I18n';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-  };
-});
-
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <EmergencyContactsSelectContacts route={route} />

package/src/screens/EmergencySetting/components/DropDownItem.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import { IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 import Text from '../../../commons/Text';
 import styles from '../styles/DropDownItem';
@@ -29,7 +29,7 @@ const DropDownItem = ({ label, data, onSelectItem, isOpen, onOpen, index }) => {
       <View style={styles.dropDownContainer}>
         <TouchableOpacity style={styles.dropDownStyle} onPress={handleOnOpen}>
           <Text>{selecteValue?.label}</Text>
-          <IconFill name="caret-down" size={18} color={Colors.Gray8} />
+          <AntDesign name="caretdown" size={18} color={Colors.Gray8} />
         </TouchableOpacity>
 
         {isOpen && (