@eohjsc/react-native-smart-city 0.6.2-rc9 → 0.7.0

package/src/commons/ActionGroup/__test__/index.test.js

@@ -7,7 +7,6 @@ import {
 } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
-import moment from 'moment';
 
 import ActionGroup from '..';
 import Text from '../../Text';
@@ -25,13 +24,6 @@ const wrapComponent = (item, mockDoAction, sensor) => (
   </SCProvider>
 );
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useFocusEffect: jest.fn(),
-  };
-});
-
 describe('Test ActionGroup', () => {
   const configurationWithNoneActionOnOff = {
     action1: '2b949045-8e03-4c07-a855-7794ade2e69c',
@@ -41,7 +33,7 @@ describe('Test ActionGroup', () => {
       command_prefer_over_googlehome: false,
       command_prefer_over_internet: false,
       googlehome_actions: [],
-      icon: 'caret-up',
+      icon: 'caretup',
       id: 9,
       key: '2b949045-8e03-4c07-a855-7794ade2e69c',
     },
@@ -63,13 +55,13 @@ describe('Test ActionGroup', () => {
       command_prefer_over_googlehome: false,
       command_prefer_over_internet: false,
       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',
     text_door_lock: 'Door lock',
     text1: 'UP',
     text2: 'STOP',
@@ -82,7 +74,7 @@ describe('Test ActionGroup', () => {
     command_prefer_over_googlehome: false,
     command_prefer_over_internet: false,
     googlehome_actions: [],
-    icon: 'caret-up',
+    icon: 'caretup',
     id: 20,
     key: '5ed1d4dc-a905-47cd-b0c9-f979644bd21a',
   };
@@ -104,7 +96,7 @@ describe('Test ActionGroup', () => {
           command_prefer_over_googlehome: false,
           command_prefer_over_internet: false,
           googlehome_actions: [],
-          icon: 'caret-up',
+          icon: 'caretup',
           id: 9,
           key: '2b949045-8e03-4c07-a855-7794ade2e69c',
         },
@@ -126,7 +118,7 @@ describe('Test ActionGroup', () => {
           command_prefer_over_googlehome: false,
           command_prefer_over_internet: false,
           googlehome_actions: [],
-          icon: 'caret-down',
+          icon: 'caretdown',
           id: 10,
           key: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
         },
@@ -152,9 +144,9 @@ describe('Test ActionGroup', () => {
           id: 12,
           key: '09bc3472-e1e7-4bba-ac5a-d0d140a919d9',
         },
-        icon1: 'caret-up',
+        icon1: 'caretup',
         icon2: 'stop',
-        icon3: 'caret-down',
+        icon3: 'caretdown',
         text_door_lock: 'Door lock',
         text1: 'UP',
         text2: 'STOP',
@@ -300,7 +292,7 @@ describe('Test ActionGroup', () => {
       configuration: {
         action: '5ed1d4dc-a905-47cd-b0c9-f979644bd21a',
         action_data: actionData,
-        icon: 'caret-up',
+        icon: 'caretup',
         text: 'UP',
       },
     };
@@ -326,9 +318,9 @@ describe('Test ActionGroup', () => {
       configuration: {
         action_on_data: '5ed1d4dc-a905-47cd-b0c9-f979644bd21a',
         action_off_data: '5ed1d4dc-a905-47cd-b0c9-f979644bd21b',
-        icon_on: 'caret-up',
+        icon_on: 'caretup',
         text_on: 'ON',
-        icon_off: 'caret-up',
+        icon_off: 'caretup',
         text_off: 'OFF',
       },
       title: 'Power',
@@ -354,9 +346,9 @@ describe('Test ActionGroup', () => {
       configuration: {
         action_on_data: 'action_on_data',
         action_off_data: 'action_off_data',
-        icon_on: 'caret-up',
+        icon_on: 'caretup',
         text_on: 'ON',
-        icon_off: 'caret-up',
+        icon_off: 'caretup',
         text_off: 'OFF',
         button_type: BUTTON_TYPE.PUSH_BUTTON,
       },
@@ -477,7 +469,7 @@ describe('Test ActionGroup', () => {
     const dateTimePicker = instance.findByType(DateTimePickerModal);
     expect(dateTimePicker.props.isVisible).toBeFalsy();
     expect(dateTimePicker.props.date).toEqual(
-      moment('2021-09-09T10:00:00.000Z').valueOf()
+      new Date('2021-09-09T10:00:00.000Z')
     );
   });
 

package/src/commons/ActionTemplate/__test__/index.test.js

@@ -9,6 +9,7 @@ import Modal from 'react-native-modal';
 import ThreeButtonAction from '../ThreeButtonAction';
 import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import Text from '../../Text';
+import { showAllCards } from './utils';
 
 const mockOnSelectAction = jest.fn();
 
@@ -92,6 +93,7 @@ describe('Test ActionTemplate', () => {
       tree = await renderer.create(wrapComponent(switchTemplate));
     });
     const instance = tree.root;
+    await showAllCards(instance);
     const textTitle = instance.findAll(
       (el) =>
         el.props.accessibilityLabel ===

package/src/commons/ActionTemplate/__test__/utils.js

@@ -0,0 +1,21 @@
+import { act } from 'react-test-renderer';
+import SelectActionCard from '../../SelectActionCard';
+import GridItem from '../../Grid/GridItem';
+
+export const showAllCards = async (instance) => {
+  const items = instance.findAllByType(SelectActionCard);
+  for (let i = 0; i < items.length; i++) {
+    await act(async () => {
+      items[i].props.onPress();
+    });
+  }
+};
+
+export const showAllGridItems = async (instance) => {
+  const items = instance.findAllByType(GridItem);
+  for (let i = 0; i < items.length; i++) {
+    await act(async () => {
+      items[i].props.onPress();
+    });
+  }
+};

package/src/commons/ActionTemplate/index.js

@@ -18,7 +18,6 @@ const ActionTemplate = memo(({ device, item, onSelectAction }) => {
   const t = useTranslations();
   const [visible, setVisible] = useState(false);
   const onClose = () => setVisible(false);
-  const onPress = () => setVisible(true);
   const [actionName, setActionName] = useState();
 
   const onPressSelectAction = useCallback(
@@ -72,7 +71,7 @@ const ActionTemplate = memo(({ device, item, onSelectAction }) => {
   return (
     <>
       <SelectActionCard
-        onPress={onPress}
+        onPress={() => setVisible(true)}
         action={actionName}
         title={t(item?.title === 'Power' ? 'power' : 'action')}
       />

package/src/commons/BackDefault/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { AccessibilityLabel } from '../../configs/Constants';
 
 const BackDefault = memo(({ goBack, color, fixedHeight }) => {
@@ -10,7 +10,7 @@ const BackDefault = memo(({ goBack, color, fixedHeight }) => {
       onPress={goBack}
       style={[styles.wrap, fixedHeight && styles.noPaddingVertical]}
     >
-      <IconOutline name="left" size={27} color={color} />
+      <AntDesign name="left" size={27} color={color} />
     </TouchableOpacity>
   );
 });

package/src/commons/ButtonPopup/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 import { Colors, Device } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
@@ -42,7 +42,7 @@ const ButtonPopup = ({
       <View style={styles.popoverStyle}>
         <View style={styles.modalWrapper}>
           {!hideClose && (
-            <Icon
+            <AntDesign
               name={'close'}
               color={Colors.Gray8}
               style={styles.close}

package/src/commons/Calendar/__test__/Calendar.test.js

@@ -5,13 +5,6 @@ import { Calendar } from 'react-native-calendars';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 
-const mockSetState = jest.fn();
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    useState: jest.fn((init) => [init, mockSetState]),
-  };
-});
 const wrapComponent = ({ route, isVisible, navigation }) => (
   <SCProvider initState={mockSCStore({})}>
     <CalendarComponent route={route} isVisible={isVisible} />

package/src/commons/CircleButton/__test__/CircleButton.test.js

@@ -10,7 +10,7 @@ describe('Test circle button', () => {
       tree = await renderer.create(<CircleButton size={5} />);
     });
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities).toHaveLength(1);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities).toHaveLength(1);
   });
 });

package/src/commons/Dashboard/MyPinnedSharedUnit/__test__/MyPinnedSharedUnit.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
 
@@ -16,31 +16,8 @@ import { Action } from '../../../../context/actionType';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedNavigate = jest.fn();
 const mockSetAction = jest.fn();
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: () => true,
-  };
-});
-
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    useContext: () => ({
-      stateData: mockSCStore({
-        app: { isNeedUpdateCache: true },
-      }),
-      setAction: mockSetAction,
-    }),
-  };
-});
-
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <MyPinnedSharedUnit />
@@ -50,6 +27,15 @@ const wrapComponent = (route) => (
 describe('Test MyPinnedSharedUnit', () => {
   let tree;
 
+  beforeEach(() => {
+    useContext.mockReturnValue({
+      stateData: mockSCStore({
+        app: { isNeedUpdateCache: true },
+      }),
+      setAction: mockSetAction,
+    });
+  });
+
   it('create', async () => {
     mock.onGet(API.UNIT.SHARED_UNITS()).reply(200, [{ id: 1 }]);
 
@@ -74,7 +60,7 @@ describe('Test MyPinnedSharedUnit', () => {
     await act(async () => {
       goToAllSharedUnits.props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalled();
+    expect(global.mockedNavigate).toHaveBeenCalled();
     expect(mockSetAction).toBeCalledWith(
       Action.IS_CHECK_CLEAR_CACHE_UNITS,
       false

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -10,22 +10,12 @@ import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
 import { API } from '../../../../configs';
 import Routes from '../../../../utils/Route';
+import { flushPromises } from '../../../../screens/AllGateway/test-utils';
+import FastImage from 'react-native-fast-image';
+import { removeMultiple, STORAGE_KEY } from '../../../../utils/Storage';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedNavigate = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: () => true,
-    useFocusEffect: jest.fn(),
-  };
-});
-
 const wrapComponent = (data = {}) => (
   <SCProvider initState={mockSCStore(data)}>
     <MyUnit refreshing={true} />
@@ -34,7 +24,7 @@ const wrapComponent = (data = {}) => (
 
 describe('Test MyUnit', () => {
   let tree;
-  let storeData = {
+  let stateData = {
     app: { isDeleteUnitSuccessFully: true, isNeedUpdateCache: true },
   };
   let data = [
@@ -69,9 +59,10 @@ describe('Test MyUnit', () => {
     },
   ];
 
-  beforeEach(() => {
+  beforeEach(async () => {
     mock.resetHistory();
-    mockedNavigate.mockClear();
+    FastImage.preload.mockClear();
+    await removeMultiple([STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS]);
   });
 
   const getElement = (instance) => {
@@ -89,7 +80,7 @@ describe('Test MyUnit', () => {
 
   it('MyUnit no Unit', async () => {
     await act(async () => {
-      tree = await renderer.create(wrapComponent(storeData));
+      tree = await renderer.create(wrapComponent(stateData));
     });
     const instance = tree.root;
     const { textNoUnit } = getElement(instance);
@@ -99,8 +90,9 @@ describe('Test MyUnit', () => {
   it('MyUnit with unit', async () => {
     mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, data);
     await act(async () => {
-      tree = await renderer.create(wrapComponent(storeData));
+      tree = await renderer.create(wrapComponent(stateData));
     });
+    await flushPromises();
     const instance = tree.root;
     const devices = instance.findAllByType(MyUnitDevice);
     expect(devices).toHaveLength(2);
@@ -111,7 +103,7 @@ describe('Test MyUnit', () => {
     await act(async () => {
       await button.props.onPress(data[0]);
     });
-    expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
+    expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
       params: { unitId: 1 },
       screen: Routes.UnitDetail,
     });
@@ -131,9 +123,24 @@ describe('Test MyUnit', () => {
     await act(async () => {
       await button.props.onPress(data[1]);
     });
-    expect(mockedNavigate).toBeCalledWith('UnitStack', {
+    expect(global.mockedNavigate).toBeCalledWith('UnitStack', {
       params: { unitId: 2 },
       screen: 'UnitDetail',
     });
   });
+
+  it('Test preload image', async () => {
+    mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, [data[1]]);
+    mock.onGet(API.UNIT.UNIT_DETAIL(2)).replyOnce(200, {
+      stations: [{ background: 'background' }],
+    });
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ app: { isNeedUpdateCache: false } })
+      );
+    });
+    expect(FastImage.preload).toHaveBeenCalledWith([
+      { uri: 'background', priority: FastImage.priority.high },
+    ]);
+  });
 });

package/src/commons/Dashboard/MyUnit/index.js

@@ -208,7 +208,6 @@ const MyUnit = ({ refreshing }) => {
         <View style={styles.container}>
           {myUnits.length ? (
             <Carousel
-              ref={carouselRef}
               layout={'default'}
               data={myUnits}
               sliderWidth={screenWidth}

package/src/commons/DateTimeRangeChange/DateTimeButton.js

@@ -1,13 +1,13 @@
 import React, { memo } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Colors } from '../../configs';
 
 const DateTimeButton = memo(({ onPress, style, children }) => {
   return (
     <TouchableOpacity style={[styles.dateSelect, style]} onPress={onPress}>
       {children}
-      <IconOutline style={styles.iconDateTime} name={'calendar'} />
+      <AntDesign style={styles.iconDateTime} name={'calendar'} />
     </TouchableOpacity>
   );
 });

package/src/commons/DateTimeRangeChange/__test__/DateTimeButton.test.js

@@ -15,8 +15,8 @@ describe('Test DateTimeButton', () => {
       );
     });
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities).toHaveLength(1);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities).toHaveLength(1);
   });
 
   it('render DateTimeButton formatType is undefined', async () => {
@@ -26,7 +26,7 @@ describe('Test DateTimeButton', () => {
       );
     });
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities).toHaveLength(1);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities).toHaveLength(1);
   });
 });

package/src/commons/DateTimeRangeChange/index.js

@@ -119,7 +119,7 @@ const DateTimeRangeChange = memo(
         </View>
         <DateTimePickerModal
           isVisible={eventPicker.showModalStart}
-          date={startDate.valueOf()}
+          date={new Date(startDate.valueOf())}
           mode={mode}
           onConfirm={onConfirmStart}
           onCancel={onCancel}
@@ -132,7 +132,7 @@ const DateTimeRangeChange = memo(
         />
         <DateTimePickerModal
           isVisible={eventPicker.showModalEnd}
-          date={endDate.valueOf()}
+          date={new Date(endDate.valueOf())}
           mode={mode}
           onConfirm={onConfirmEnd}
           onCancel={onCancel}

package/src/commons/Device/ConnectedViewHeader.js

@@ -1,6 +1,6 @@
 import React, { memo } 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 { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -30,7 +30,7 @@ const ConnectedViewHeader = memo(
     return (
       <View style={styles.statusContainer}>
         <View style={styles.connectStatus}>
-          <IconOutline name={'wifi'} color={Colors.Green6} size={16} />
+          <AntDesign name={'wifi'} color={Colors.Green6} size={16} />
           <DisplayTextConnected type={type} />
         </View>
         {isDisplayTime && (

package/src/commons/Device/DisconnectedView.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -57,7 +57,7 @@ const DisconnectedView = memo(({ sensor, type, isDeviceHasBle }) => {
       </View>
       <View style={styles.disconnectSuggestionContainer} testID={'suggestions'}>
         <View style={styles.row}>
-          <IconOutline name={'alert'} size={16} />
+          <MaterialCommunityIcons name={'alert-circle-outline'} size={16} />
           <Text bold style={styles.boldText}>
             {t('suggestions')}:
           </Text>

package/src/commons/Device/Emergency/EmergencyDetail.js

@@ -6,7 +6,7 @@ import MediaPlayer from '../../MediaPlayer';
 import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { Colors, Device } from '../../../configs';
 import { RowUser } from '../../RowUser';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useEmeragencyContacts } from '../../../screens/EmergencyContacts/hook';
 import { useIsFocused } from '@react-navigation/native';
 
@@ -49,12 +49,12 @@ const EmergencyDetail = memo(({ item }) => {
               key={contact.id.toString()}
               index={index}
               leftIcon={
-                <IconOutline name={'user'} size={20} color={Colors.White} />
+                <AntDesign name={'user'} size={20} color={Colors.White} />
               }
               text={contact.name}
               rightComponent={
                 <View style={styles.rightComponent}>
-                  <IconFill
+                  <AntDesign
                     name={'phone'}
                     size={20}
                     color={Colors.Gray9}

package/src/commons/Device/Emergency/__test__/EmergencyDetail.test.js

@@ -12,11 +12,11 @@ const wrapComponent = (item) => (
   </SCProvider>
 );
 
-const mockUseIsFocused = jest.fn();
+const mockedUseIsFocused = jest.fn();
 jest.mock('@react-navigation/core', () => {
   return {
     ...jest.requireActual('@react-navigation/core'),
-    useIsFocused: mockUseIsFocused,
+    useIsFocused: mockedUseIsFocused,
   };
 });
 

package/src/commons/Device/FlatListItems.js

@@ -5,7 +5,7 @@ import AlertStatusMachine from './WaterPurifierStatus/AlertStatusMachine';
 import { useBoolean } from '../../hooks/Common';
 import Text from '../Text';
 import Routes from '../../utils/Route';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Colors, Constants } from '../../configs';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { AccessibilityLabel } from '../../configs/Constants';
@@ -75,7 +75,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
             style={styles.iconInfo}
             accessibilityLabel={AccessibilityLabel.TOUCH_INFO_FLAT_LIST_ITEM}
           >
-            <IconOutline name={'info-circle'} size={16} color={Colors.Gray8} />
+            <AntDesign name={'info-circle'} size={16} color={Colors.Gray8} />
           </TouchableOpacity>
         )}
       </View>
@@ -97,7 +97,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
           onPress={() => setViewFull(true)}
         >
           <Text style={styles.textSeeMore}>{t('see_more')}</Text>
-          <IconFill name={'caret-down'} color={Colors.Gray8} size={16} />
+          <AntDesign name={'caretdown'} color={Colors.Gray8} size={16} />
         </TouchableOpacity>
       )}
 

package/src/commons/Device/Hanet/ItemHanetDevice.js

@@ -5,7 +5,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useNavigation } from '@react-navigation/native';
 
 import Text from '../../Text';
@@ -35,7 +35,7 @@ const ItemHanetDevice = memo(
       return iconKit ? (
         <FImage source={{ uri: iconKit }} style={styles.iconSensor} />
       ) : (
-        <IconFill name={svgMain} size={32} color={Colors.Red6} />
+        <AntDesign name={svgMain} size={32} color={Colors.Red6} />
       );
     };
 
@@ -58,7 +58,7 @@ const ItemHanetDevice = memo(
               {title}
             </Text>
             <View style={styles.row}>
-              <IconOutline name="right" size={12} />
+              <AntDesign name="right" size={12} />
             </View>
           </TouchableOpacity>
         </View>

package/src/commons/Device/Hanet/ItemHanetDevice.test.js

@@ -4,6 +4,7 @@ import renderer, { act } from 'react-test-renderer';
 import ItemHanetDevice from './ItemHanetDevice';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
@@ -11,18 +12,9 @@ const wrapComponent = (props) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
 describe('Test ItemHanetDevice', () => {
   let tree, props;
+  const { navigate } = useNavigation();
 
   beforeEach(() => {
     props = {
@@ -43,7 +35,7 @@ describe('Test ItemHanetDevice', () => {
     await act(async () => {
       tree = touches[0].props.onPress();
     });
-    expect(mockNavigate).toBeCalled();
+    expect(navigate).toBeCalled();
   });
 
   it('render ItemHanetDevice sensor has icon', async () => {

package/src/commons/Device/ItemAddNew/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import Text from '../../Text';
 
 import { Colors } from '../../../configs';
@@ -16,7 +16,7 @@ const ItemAddNew = memo(({ title, onAddNew, wrapStyle }) => {
       <View style={[styles.container, wrapStyle]}>
         <View style={styles.boxIcon}>
           <View style={styles.buttonPlus}>
-            <IconOutline name="plus" size={22} color={Colors.Gray8} />
+            <AntDesign name="plus" size={22} color={Colors.Gray8} />
           </View>
         </View>
         <View>