@eohjsc/react-native-smart-city 0.6.2 → 0.7.3-rc1

package/src/screens/SubUnit/hooks/__test__/useManageSubUnit.test.js

@@ -4,20 +4,8 @@ import useManageSubUnit from '../useManageSubUnit';
 import API from '../../../../configs/API';
 import api from '../../../../utils/Apis/axios';
 
-const mockRoute = jest.fn();
 const mock = new MockAdapter(api.axiosInstance);
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: () => mockRoute,
-    useNavigation: () => ({
-      goBack: jest.fn(),
-    }),
-    useIsFocused: jest.fn(),
-  };
-});
-
 describe('Test Manage Access', () => {
   const unit = { id: 1, name: 'unit name' };
 

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

@@ -17,19 +17,6 @@ import { SCConfig } from '../../../configs';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedNavigate = jest.fn();
-const mockedGoBack = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-      goBack: mockedGoBack,
-    }),
-    useIsFocused: jest.fn(),
-  };
-});
-
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <AddLGDevice route={route} />
@@ -137,7 +124,7 @@ describe('Test Add LG Device', () => {
     await act(async () => {
       viewButtonBottom.props.onLeftClick();
     });
-    expect(mockedGoBack).toHaveBeenCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
   });
 
   it('ViewButtonBottom onRightClick without select stationId', async () => {
@@ -149,7 +136,7 @@ describe('Test Add LG Device', () => {
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).toHaveBeenCalled();
+    expect(global.mockedNavigate).toHaveBeenCalled();
   });
 
   it('ViewButtonBottom onRightClick with stationId', async () => {
@@ -201,7 +188,7 @@ describe('Test Add LG Device', () => {
       text1: getTranslate('en', 'lg_sync_success'),
       visibilityTime: 1000,
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
   });
 
   it('ViewButtonBottom onRightClick with case sync device fail', async () => {
@@ -253,7 +240,7 @@ describe('Test Add LG Device', () => {
       text1: getTranslate('en', 'lg_sync_failed'),
       visibilityTime: 1000,
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
   });
 
   it('ViewButtonBottom onRightClick with stationId but sync failed', async () => {
@@ -299,7 +286,7 @@ describe('Test Add LG Device', () => {
       text1: getTranslate('en', 'lg_sync_failed'),
       visibilityTime: 1000,
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
   });
 
   it('ViewButtonBottom onRightClick with stationId but get token failed, wrong data', async () => {
@@ -342,7 +329,7 @@ describe('Test Add LG Device', () => {
 
     expect(spyToastSuccess).not.toBeCalled();
     expect(spyToastError).toBeCalled();
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
 
     spyToastSuccess.mockReset();
     spyToastSuccess.mockRestore();
@@ -378,7 +365,7 @@ describe('Test Add LG Device', () => {
 
     expect(spyToastSuccess).not.toBeCalled();
     expect(spyToastError).toBeCalled();
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.Dashboard);
 
     spyToastSuccess.mockReset();
     spyToastSuccess.mockRestore();

package/src/screens/Template/__test__/EditTemplate.test.js

@@ -16,17 +16,7 @@ const wrapComponent = () => (
   </SCProvider>
 );
 
-const mockGoBack = jest.fn();
 const mockSetData = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      goBack: mockGoBack,
-    }),
-    useRoute: jest.fn(),
-  };
-});
 
 describe('Test EditTemplate', () => {
   let tree;
@@ -67,19 +57,18 @@ describe('Test EditTemplate', () => {
     const DraggableFlatLists = instance.findAllByType(DraggableFlatList);
     expect(DraggableFlatLists).toHaveLength(1);
 
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
 
     await act(async () => {
-      await TouchableOpacities[0].props.onPress();
+      await touchableOpacities[0].props.onPress();
     });
     await act(async () => {
       const firstItem = instance.findByProps({ accessibilityLabel: 'item-0' });
       await firstItem.props.onLongPress();
     });
 
-    expect(mockGoBack).toBeCalled();
+    expect(global.mockedGoBack).toBeCalled();
 
-    mockGoBack.mockReset();
     await act(async () => {
       await DraggableFlatLists[0].props.onDragEnd({
         data,
@@ -90,6 +79,6 @@ describe('Test EditTemplate', () => {
         .findByProps({ accessibilityLabel: 'Save' })
         .props.onPress();
     });
-    expect(mockGoBack).toBeCalled();
+    expect(global.mockedGoBack).toBeCalled();
   });
 });

package/src/screens/Template/__test__/GatewayList.test.js

@@ -3,15 +3,6 @@ import { View } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import GatewayList from '../GatewayList';
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      goBack: jest.fn(),
-    }),
-  };
-});
-
 describe('Test GatewayList', () => {
   let tree;
 

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

@@ -22,12 +22,12 @@ const wrapComponent = () => (
 
 describe('Test Detail', () => {
   const mockGoBack = useNavigation().goBack;
-  const mockNavigate = useNavigation().navigate;
+  const mockedNavigate = useNavigation().navigate;
   let tree;
 
   beforeEach(() => {
     mockGoBack.mockReset();
-    mockNavigate.mockReset();
+    mockedNavigate.mockReset();
     useRoute.mockReturnValue({
       params: {
         item: {
@@ -57,9 +57,9 @@ describe('Test Detail', () => {
     });
 
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    await TouchableOpacities[0].props.onPress();
-    expect(mockGoBack).toBeCalled();
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    await touchableOpacities[0].props.onPress();
+    expect(global.mockedGoBack).toBeCalled();
   });
 
   it('Test render onClick more header onPress delete', async () => {
@@ -82,9 +82,9 @@ describe('Test Detail', () => {
     });
 
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
     await act(async () => {
-      await TouchableOpacities[1].props.onPress();
+      await touchableOpacities[1].props.onPress();
     });
     const menuActionMore = instance.findByType(MenuActionMore);
     const mockDoAction = jest.fn();
@@ -101,7 +101,7 @@ describe('Test Detail', () => {
     await act(async () => {
       await menuActionMore.props.listMenuItem[0].doAction();
     });
-    expect(mockNavigate).toHaveBeenCalled();
+    expect(global.mockedNavigate).toHaveBeenCalled();
     await act(async () => {
       await menuActionMore.props.listMenuItem[3].doAction();
     });

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

@@ -9,17 +9,6 @@ import api from '../../../utils/Apis/axios';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-    useIsFocused: () => true,
-  };
-});
-
 describe('Test Template screen', () => {
   let tree;
   it('Test render', async () => {
@@ -36,9 +25,9 @@ describe('Test Template screen', () => {
     const instance = tree.root;
     const FlatLists = instance.findAllByType(FlatList);
     expect(FlatLists).toHaveLength(1);
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    await TouchableOpacities[0].props.onPress();
-    expect(mockNavigate).toBeCalled();
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    await touchableOpacities[0].props.onPress();
+    expect(global.mockedNavigate).toBeCalled();
   });
 
   it('Test onSearch', async () => {

package/src/screens/Template/detail.js

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import { Icon } from '@ant-design/react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
@@ -163,7 +163,7 @@ const TemplateDetail = () => {
           ref={refMenuAction}
           style={styles.headerButton}
         >
-          <Icon name={'more'} size={27} color={Colors.Black} />
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     );

package/src/screens/Unit/Detail.js

@@ -1,17 +1,15 @@
 import React, {
   useCallback,
-  useEffect,
-  useState,
   useContext,
+  useEffect,
   useMemo,
+  useState,
 } from 'react';
-import { RefreshControl, View, Platform } from 'react-native';
-import { useIsFocused } from '@react-navigation/native';
+import { Platform, View } from 'react-native';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './styles';
-import AddMenu from './AddMenu';
-import MoreMenu from './MoreMenu';
 import Summaries from './Summaries';
 
 import Text from '../../commons/Text';
@@ -20,7 +18,6 @@ import {
   useBlockBackAndroid,
   useBoolean,
   useIsOwnerOfUnit,
-  usePopover,
 } from '../../hooks/Common';
 import { useFavorites } from './hook/useFavorites';
 import { useUnitConnectRemoteDevices } from './hook/useUnitConnectRemoteDevices';
@@ -32,20 +29,19 @@ import WrapParallaxScrollView from '../../commons/WrapParallaxScrollView';
 import { SCContext, useSCContextSelector } from '../../context';
 import { Action } from '../../context/actionType';
 import CameraDevice from '../../commons/CameraDevice';
-import { useNavigation } from '@react-navigation/native';
 import Routes from '../../utils/Route';
 import SubUnitAutomate from '../../commons/SubUnit/OneTap';
 import SubUnitFavorites from '../../commons/SubUnit/Favorites';
 import {
+  AccessibilityLabel,
+  AUTOMATE_TABS,
   AUTOMATE_TYPE,
   Constants,
   NOTIFICATION_TYPES,
-  AccessibilityLabel,
-  AUTOMATE_TABS,
 } from '../../configs/Constants';
 import {
-  watchNotificationData,
   unwatchNotificationData,
+  watchNotificationData,
 } from '../../utils/Monitor';
 import PreventAccess from '../../commons/PreventAccess';
 import MediaPlayerDetail from '../../commons/MediaPlayerDetail';
@@ -197,7 +193,6 @@ const UnitDetail = ({ route }) => {
   const {
     unitId,
     unitData,
-    routeName,
     isOneTap,
     stationId,
     isAddSubUnit,
@@ -218,19 +213,16 @@ const UnitDetail = ({ route }) => {
     isSuccessfullyConnected ? RouterHardware(Routes.Dashboard) : goBack
   );
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
-  const { isLavidaSource, isFirstOpenCamera, appState } = useSCContextSelector(
+  const { isFirstOpenCamera, appState } = useSCContextSelector(
     (state) => state.app
   );
 
   const [unit, setUnit] = useState(unitData || { id: unitId });
   const [listAutomate, setListAutomate] = useState([]);
-  const [showAdd, setShowAdd, setHideAdd] = useBoolean();
+
   const [showPreventAccess, setShowPreventAccess, setHidePreventAccess] =
     useBoolean(false);
 
-  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
-    usePopover();
-
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
 
   const prepareData = useCallback(
@@ -317,14 +309,6 @@ const UnitDetail = ({ route }) => {
     }
   }, [fetchDetails, isFocused]);
 
-  const onBack = useCallback(() => {
-    navigate(isLavidaSource ? Routes.SmartHomeDashboard : routeName);
-  }, [navigate, routeName, isLavidaSource]);
-
-  const Dashboard = useCallback(() => {
-    navigate(isLavidaSource ? Routes.SmartHomeDashboard : Routes.Dashboard);
-  }, [isLavidaSource, navigate]);
-
   useEffect(() => {
     watchNotificationData(user, onRefresh);
     return () => unwatchNotificationData(user);
@@ -341,21 +325,7 @@ const UnitDetail = ({ route }) => {
   }, [isFirstOpenCamera, isIOS]);
 
   return (
-    <WrapParallaxScrollView
-      uriImg={unit.background}
-      title={t('Welcome {name}', {
-        name: unit.name ? unit.name : '',
-      })}
-      refreshControl={
-        <RefreshControl refreshing={false} onRefresh={onRefresh} />
-      }
-      onAdd={setShowAdd}
-      onMore={showPopoverWithRef}
-      hideRightPlus={!isOwner}
-      onBack={(isSuccessfullyConnected && Dashboard) || (routeName && onBack)}
-      accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_PARALLAX_SCROLLVIEW}
-      idButtonMore={AccessibilityLabel.UNIT_DETAIL_PARALLAX_BUTTON_MORE}
-    >
+    <WrapParallaxScrollView unit={unit} onRefresh={onRefresh}>
       {isFirstOpenCamera && isIOS && (
         <MediaPlayerDetail
           uri={Constants.URL_STREAM_CAMERA_DEMO}
@@ -375,21 +345,6 @@ const UnitDetail = ({ route }) => {
         isAddSubUnit={isAddSubUnit}
         isEditSubUnit={isEditSubUnit}
       />
-      <AddMenu
-        unit={unit}
-        afterItemClick={hidePopover}
-        showAdd={showAdd}
-        setHideAdd={setHideAdd}
-      />
-      <MoreMenu
-        unit={unit}
-        hidePopover={hidePopover}
-        isOwner={isOwner}
-        childRef={childRef}
-        showingPopover={showingPopover}
-        idLabelPopover={AccessibilityLabel.UNIT_DETAIL_POPUP_MORE}
-        idLabelItem={AccessibilityLabel.UNIT_DETAIL_POPUP_MORE_ITEM}
-      />
       <PreventAccess
         visible={showPreventAccess}
         hidePreventAccess={setHidePreventAccess}

package/src/screens/Unit/MoreMenu.js

@@ -14,6 +14,7 @@ const MoreMenu = ({
   idLabelScrollView,
   idLabelItem,
 }) => {
+  const { id } = unit;
   const t = useTranslations();
   const navigation = useNavigation();
 
@@ -30,25 +31,25 @@ const MoreMenu = ({
       id: 'mange-unit',
       route: Routes.ManageUnit,
       text: t('manage_unit'),
-      data: { unitId: unit?.id, unit },
+      data: { unitId: id, unit },
     };
     const RouteUnitMemberList = {
       id: 'unit-member',
       route: Routes.UnitMemberList,
       text: t('members'),
-      data: { unitId: unit?.id, unit },
+      data: { unitId: id, unit },
     };
     const ListSmartAccount = {
       id: 'smart-account',
       route: Routes.ListSmartAccount,
       text: t('smart_account'),
-      data: { unitId: unit?.id, unit },
+      data: { unitId: id, unit },
     };
     const RouteAllGateway = {
       id: 'all-gateway',
       route: Routes.AllGateway,
       text: t('all_gateway'),
-      data: { unitId: unit?.id, unit },
+      data: { unitId: id, unit },
     };
     return isOwner
       ? [
@@ -58,7 +59,7 @@ const MoreMenu = ({
           RouteAllGateway,
         ]
       : [RouteUnitMemberList];
-  }, [t, unit, isOwner]);
+  }, [t, id, unit, isOwner]);
 
   return (
     <MenuActionMore

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 { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 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}
       >
-        <Icon name={'close'} size={24} color={Colors.Black} />
+        <AntDesign name={'close'} size={24} color={Colors.Black} />
       </TouchableOpacity>
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/screens/Unit/SelectAddress.js

@@ -2,7 +2,8 @@ import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { TouchableOpacity, View, ScrollView } from 'react-native';
 import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
 import { useNavigation } from '@react-navigation/native';
-import { IconOutline, IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { check, RESULTS } from 'react-native-permissions';
 import { openPromptEnableLocation } from '../../utils/Setting/Location';
 
@@ -194,7 +195,11 @@ const SelectAddress = memo(({ route }) => {
               style={styles.button}
               accessibilityLabel={AccessibilityLabel.BUTTON_YOUR_LOCATION}
             >
-              <IconOutline name="aim" size={27} color={Colors.Primary} />
+              <MaterialIcons
+                name="my-location"
+                size={27}
+                color={Colors.Primary}
+              />
               <Text type="Body" color={Colors.Gray9} style={styles.text} bold>
                 {t('your_location')}
               </Text>
@@ -205,7 +210,7 @@ const SelectAddress = memo(({ route }) => {
               style={styles.button}
               accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
             >
-              <IconFill name="environment" size={27} color={Colors.Primary} />
+              <AntDesign name="enviroment" size={27} color={Colors.Primary} />
               <Text type="Body" color={Colors.Gray9} style={styles.text} bold>
                 {t('choose_on_map')}
               </Text>
@@ -243,7 +248,7 @@ const SelectAddress = memo(({ route }) => {
               }}
               tracksViewChanges={false}
             >
-              <IconFill name="environment" size={27} color={Colors.Blue10} />
+              <AntDesign name="enviroment" size={27} color={Colors.Blue10} />
             </Marker>
           </>
         )}

package/src/screens/Unit/SmartAccountItem.js

@@ -4,7 +4,7 @@ import React, { memo, useRef } from 'react';
 import styles from './SmartAccountStyles';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-import { Icon } from '@ant-design/react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { AccessibilityLabel } from '../../configs/Constants';
 
 export const SmartAccountItem = memo(
@@ -44,7 +44,7 @@ export const SmartAccountItem = memo(
           onPress={onPressMore}
           ref={buttonMoreRef}
         >
-          <Icon name={'more'} size={27} color={Colors.Black} />
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     );

package/src/screens/Unit/Station/__test__/index.test.js

@@ -50,8 +50,8 @@ describe('Test Station', () => {
         zoomScale: 1,
       },
     });
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    await TouchableOpacities[0].props.onPress();
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    await touchableOpacities[0].props.onPress();
     expect(mockOnSnapToItem).toBeCalled();
   });
 });

package/src/screens/Unit/Summaries.js

@@ -10,6 +10,7 @@ import { AccessibilityLabel } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
 
 const Summaries = memo(({ unit }) => {
+  const { id } = unit;
   const [unitSummaries, setUnitSummaries] = useState([]);
   const isFocused = useIsFocused();
   const navigation = useNavigation();
@@ -17,31 +18,32 @@ const Summaries = memo(({ unit }) => {
   const timeoutId = useRef(null);
 
   const fetchUnitSummary = useCallback(async () => {
-    if (!unit.id) {
+    if (!id) {
       return false;
     }
 
     const { success, data } = await axiosGet(
-      API.UNIT.UNIT_SUMMARY(unit.id),
+      API.UNIT.UNIT_SUMMARY(id),
       {},
       true
     );
-    if (success && data.length) {
+    if (success && data?.length) {
       setUnitSummaries(data);
+      return true;
     }
-    return success && data.length > 0;
-  }, [unit.id]);
+    return false;
+  }, [id]);
 
   const goToSummary = useCallback(
     (summary) => {
       navigation.navigate(Routes.UnitSummary, {
         summaryId: summary.id,
-        unitId: unit.id,
+        unitId: id,
         summaryData: summary,
         unitData: unit,
       });
     },
-    [navigation, unit]
+    [navigation, unit, id]
   );
 
   const continuousFetchSummary = useCallback(async () => {
@@ -79,32 +81,25 @@ const Summaries = memo(({ unit }) => {
   const { dataNotification } = useReceiveNotifications();
 
   useEffect(() => {
-    if (dataNotification) {
-      const { summary_id } = dataNotification.params || {};
-      if (summary_id) {
-        fetchUnitSummary();
-      }
+    if (dataNotification?.params?.summary_id) {
+      fetchUnitSummary();
     }
   }, [dataNotification, fetchUnitSummary]);
 
+  if (unitSummaries.length === 0) {
+    return null;
+  }
+
   return (
-    <>
-      {unitSummaries.length > 0 && (
-        <ScrollView
-          horizontal
-          scrollIndicatorInsets={{ right: 1 }}
-          accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_VIEW}
-        >
-          {unitSummaries.map((item, index) => (
-            <SummaryItem
-              key={(item?.id || index).toString()}
-              item={item}
-              goToSummary={goToSummary}
-            />
-          ))}
-        </ScrollView>
-      )}
-    </>
+    <ScrollView
+      horizontal
+      scrollIndicatorInsets={{ right: 1 }}
+      accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_VIEW}
+    >
+      {unitSummaries.map((item) => (
+        <SummaryItem key={item.id} item={item} goToSummary={goToSummary} />
+      ))}
+    </ScrollView>
   );
 });
 

package/src/screens/Unit/__test__/AddMenu.test.js

@@ -77,7 +77,10 @@ describe('Test AddMenu Unit', () => {
 
     expect(menuActionAddnew.props.visible).toBe(true);
     expect(mockedAfterItemClick).toHaveBeenCalled();
-    expect(mockedNavigate).toHaveBeenCalledWith('route test', 'data test');
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
+      'route test',
+      'data test'
+    );
   });
 
   it('add new device but have no permission', async () => {
@@ -201,7 +204,7 @@ describe('Test AddMenu Unit', () => {
     await act(async () => {
       menuActionAddnew.props.onItemClick(menuActionAddnew.props.dataActions[3]);
     });
-    expect(mockedNavigate).toBeCalledWith(Routes.SmartAccountStack, {
+    expect(global.mockedNavigate).toBeCalledWith(Routes.SmartAccountStack, {
       params: { unitId: 1, unitName: 'Unit 1' },
       screen: 'SmartAccount',
     });