@eohjsc/react-native-smart-city 0.7.24 → 0.7.26

package/index.js

@@ -14,6 +14,7 @@ import { initSCConfig } from './src/configs';
 import AutomateStack from './src/navigations/AutomateStack';
 import NotificationStack from './src/navigations/NotificationStack';
 import MyPinnedSharedUnit from './src/commons/Dashboard/MyPinnedSharedUnit';
+import MyDashboardDevice from './src/commons/Dashboard/MyDashboardDevice';
 import MyUnit from './src/commons/Dashboard/MyUnit';
 import SharedUnit from './src/commons/Unit/SharedUnit';
 import { Action } from './src/context/actionType';
@@ -41,6 +42,7 @@ export {
   NotificationStack,
   MyPinnedSharedUnit,
   SharedUnit,
+  MyDashboardDevice,
   MyUnit,
   SCWrapper,
   Action,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.24",
+  "version": "0.7.26",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/Images/Common/search-menu.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><g><path fill="#000000" d="M14.4,58.3L14.4,58.3h96.3h0.6v0c2.1,0.3,3.7,2.2,3.7,4.4c0,2.3-1.6,4.1-3.7,4.4v0H111l-0.4,0l-0.4,0H14.7l-0.4,0c-2.4,0-4.3-2-4.3-4.5C10,60.3,12,58.3,14.4,58.3z M14.4,106.9L14.4,106.9h96.3h0.6v0c2.1,0.3,3.7,2.2,3.7,4.4c0,2.3-1.6,4.1-3.7,4.4v0H111l-0.4,0l-0.4,0H14.7l-0.4,0c-2.4,0-4.3-2-4.3-4.5C10,108.9,12,106.9,14.4,106.9z M14.4,155.6L14.4,155.6l153.7,0h3.4h0.6v0c2.1,0.3,3.7,2.2,3.7,4.4c0,2.2-1.6,4.1-3.7,4.4v0h-0.3l-0.4,0l-0.4,0h-2.8l-153.6,0l-0.4,0c-2.4,0-4.3-2-4.3-4.5C10,157.6,12,155.6,14.4,155.6z M14.4,204.2L14.4,204.2l153.7,0h3.4h0.6v0c2.1,0.3,3.7,2.2,3.7,4.4s-1.6,4.1-3.7,4.4v0h-0.3l-0.4,0l-0.4,0h-2.8l-153.6,0l-0.4,0c-2.4,0-4.3-2-4.3-4.5C10,206.2,12,204.2,14.4,204.2z M176.2,42.9c14,0,26.8,5.7,35.9,14.9C221.3,67,227,79.7,227,93.7c0,14-5.7,26.8-14.9,35.9c-1.8,1.8-3.7,3.5-5.8,5l39,67.5c1.4,2.4,0.6,5.4-1.8,6.7c-2.4,1.4-5.4,0.6-6.7-1.8l-38.9-67.4c-6.6,3.1-13.9,4.8-21.7,4.8c-14,0-26.8-5.7-35.9-14.9c-9.2-9.2-14.9-21.9-14.9-35.9c0-14,5.7-26.8,14.9-35.9C149.4,48.6,162.1,42.9,176.2,42.9L176.2,42.9z M205.1,64.8c-7.4-7.4-17.7-12-28.9-12c-11.3,0-21.5,4.6-28.9,12c-7.4,7.4-12,17.6-12,28.9c0,11.3,4.6,21.5,12,28.9c7.4,7.4,17.6,12,28.9,12c11.3,0,21.5-4.6,28.9-12c7.4-7.4,12-17.6,12-28.9C217.1,82.4,212.5,72.2,205.1,64.8z"/></g></g>
+</svg>

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplateStyle.js

@@ -6,7 +6,8 @@ export default StyleSheet.create({
     width: 'auto',
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 20,
+    paddingHorizontal: 20,
+    paddingBottom: 20,
   },
   bigCircle: {
     backgroundColor: Colors.Gray2,

package/src/commons/ActionGroup/OneBigButtonTemplateStyle.js

@@ -6,9 +6,8 @@ export default StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     paddingHorizontal: 8,
-    paddingVertical: 16,
+    paddingBottom: 16,
     marginHorizontal: 16,
-    marginTop: 20,
   },
   bigCircle: {
     backgroundColor: Colors.Gray2,

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -3,7 +3,6 @@ import { Slider } from '@miblanchard/react-native-slider';
 
 import { View } from 'react-native';
 import styles from './SliderRangeTemplateStyles';
-import Text from '../Text';
 import { Colors } from '../../configs';
 import { useConfigGlobalState } from '../../iot/states';
 import { DEVICE_TYPE } from '../../configs/Constants';
@@ -11,7 +10,7 @@ import _TextInput from '../Form/TextInput';
 
 const SliderRangeTemplate = memo(
   ({ item, doAction, sensor, isWidgetOrder }) => {
-    const { configuration, label = 'Slider range' } = item;
+    const { configuration } = item;
     const [configValues] = useConfigGlobalState('configValues');
     const { config, min_value, max_value, action_data } = configuration;
     const [value, setValue] = useState();
@@ -84,7 +83,6 @@ const SliderRangeTemplate = memo(
       <View
         style={(isWidgetOrder && styles.wrapOrderItem) || styles.viewBrightness}
       >
-        <Text type="H4">{label}</Text>
         <View style={styles.wrap}>
           <Slider
             step={1}

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -47,7 +47,7 @@ const useNewMessage = (
 };
 
 const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
-  const { label, configuration } = item;
+  const { configuration } = item;
   const { action_data, from_config, to_config } = configuration;
   const [configValues] = useConfigGlobalState('configValues');
   const [value, setValue] = useState();
@@ -140,9 +140,6 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
   );
   return (
     <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
-      <View>
-        <Text type="H4">{label}</Text>
-      </View>
       <ScrollView
         ref={scrollViewRef}
         onContentSizeChange={() =>

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -15,7 +15,7 @@ import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
   const t = useTranslations();
   const transY = useKeyboardAnimated();
-  const { label, configuration } = item;
+  const { configuration } = item;
   const { action_data, config } = configuration;
   const [configValues] = useConfigGlobalState('configValues');
   const [value, setValue] = useState();
@@ -35,10 +35,6 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
 
   return (
     <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
-      <View>
-        <Text type="H4">{label}</Text>
-      </View>
-
       <View style={styles.iconAndText}>
         <Text style={styles.textValue} type="H4">
           {valueText}

package/src/commons/ActionGroup/ThreeButtonTemplate/components/ThreeButtonDefaultStyles.js

@@ -6,7 +6,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
     padding: 16,
-    margin: 20,
+    marginHorizontal: 20,
     borderWidth: 1,
     borderColor: Colors.Gray4,
     borderRadius: 10,

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

@@ -7,6 +7,7 @@ import {
 } from 'react-native';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import renderer, { act } from 'react-test-renderer';
+import WebView from 'react-native-webview';
 
 import { Slider } from '@miblanchard/react-native-slider';
 import ActionGroup from '..';
@@ -606,4 +607,54 @@ describe('Test ActionGroup', () => {
     const elements = instance.findAllByType(SwitchButtonTemplate);
     expect(elements).toHaveLength(1);
   });
+
+  it('test render IframeWithConfig', async () => {
+    const actionItem = {
+      id: 1,
+      template: 'IFrameWithConfig',
+      label: 'LED',
+      configuration: {
+        url: 'http://localhost:3000/',
+        actions: [
+          {
+            action: 'action1-83cd1cf5d8f2',
+            name: 'Action 1',
+            action_data: {
+              id: 2,
+              name: 'Action 1',
+            },
+          },
+        ],
+      },
+    };
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = renderer.create(
+        wrapComponent(actionItem, mockDoAction, sensor)
+      );
+    });
+    const instance = wrapper.root;
+    const webview = instance.findByType(WebView);
+
+    await act(async () => {
+      webview.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({
+            type: 'triggerAction',
+            eraWidgetId: 1,
+            source: 'eraIframeWidget',
+            data: { actionKey: 'action1-83cd1cf5d8f2' },
+          }),
+          origin: 'http://localhost',
+        },
+      });
+    });
+    expect(mockDoAction).toHaveBeenCalledTimes(1);
+    expect(mockDoAction).toHaveBeenCalledWith(
+      actionItem.configuration.actions[0].action_data,
+      undefined,
+      false,
+      undefined
+    );
+  });
 });

package/src/commons/ActionGroup/index.js

@@ -15,6 +15,8 @@ import TwoButtonTemplate from './TwoButtonTemplate';
 import SwitchButtonTemplate from './OnOffTemplate/SwitchButtonTemplate';
 import TextBoxTemplate from './TextBoxTemplate';
 import TerminalBoxTemplate from './TerminalBoxTemplate';
+import IFrameWithConfig from '../Widgets/IFrameWithConfig/IFrameWithConfig';
+import { WIDGET_TYPE } from '../../configs/Constants';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -52,6 +54,8 @@ export const getActionComponent = (template) => {
       return TextBoxTemplate;
     case 'TerminalBoxTemplate':
       return TerminalBoxTemplate;
+    case WIDGET_TYPE.iframeWithConfig:
+      return IFrameWithConfig;
     default:
       return null;
   }

package/src/commons/Dashboard/MyDashboardDevice/__test__/index.test.js

@@ -0,0 +1,171 @@
+import MockAdapter from 'axios-mock-adapter';
+import React, { useContext } from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import { Action } from '../../../../context/actionType';
+import { API } from '../../../../configs';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { Section } from '../../../Section';
+import ItemDevice from '../../../Device/ItemDevice';
+import { DeviceTemplate } from '../../../SubUnit/DeviceTemplate/DeviceTemplate';
+import api from '../../../../utils/Apis/axios';
+import Routes from '../../../../utils/Route';
+import MyDashboardDevice from '..';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <MyDashboardDevice refreshing={true} />
+  </SCProvider>
+);
+
+describe('Test MyDashboardDevice', () => {
+  let tree;
+  const data = [
+    {
+      id: 1,
+      name: 'EoH',
+      devices: [
+        {
+          id: 1,
+          name: 'LED',
+          is_managed_by_backend: true,
+          device_type: '',
+          station: {
+            id: 1,
+            name: 'Phòng họp',
+          },
+          quick_action: {
+            config_id: 1,
+          },
+        },
+        {
+          id: 2,
+          name: 'Presence',
+          is_managed_by_backend: true,
+          device_type: '',
+          station: {
+            id: 1,
+            name: 'Phòng họp',
+          },
+          station_items: [
+            {
+              configuration: {
+                config: 2,
+              },
+            },
+          ],
+        },
+        {
+          id: 3,
+          name: 'Switch',
+          is_managed_by_backend: false,
+          device_type: 'GOOGLE_HOME',
+          station: {
+            id: 1,
+            name: 'Phòng họp',
+          },
+        },
+      ],
+    },
+  ];
+  const mockSetAction = jest.fn();
+
+  beforeEach(async () => {
+    mock.reset();
+    useContext.mockReturnValue({
+      stateData: mockSCStore({
+        app: { isNeedUpdateCache: false },
+      }),
+      setAction: mockSetAction,
+    });
+    mockSetAction.mockClear();
+  });
+
+  it('Test dashboard no device', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const sectors = instance.findAllByType(Section);
+    expect(sectors).toHaveLength(0);
+    expect(mockSetAction).not.toHaveBeenCalled();
+  });
+
+  it('Test dashboard with devices and go to unit', async () => {
+    mock.onGet(API.UNIT.MY_DASHBOARD_DEVICES()).reply(200, data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const devices = instance.findAllByType(ItemDevice);
+    expect(devices).toHaveLength(2);
+    const deviceTemplates = instance.findAllByType(DeviceTemplate);
+    expect(deviceTemplates).toHaveLength(1);
+
+    const goToUnit = instance.findByProps({
+      accessibilityLabel: `${AccessibilityLabel.UNIT_GO_TO_DETAIL}-0`,
+    });
+    await act(async () => {
+      await goToUnit.props.onPress();
+    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+      params: {
+        unitId: 1,
+      },
+      screen: Routes.UnitDetail,
+    });
+    expect(mockSetAction).toHaveBeenCalledWith(
+      Action.SET_DEVICES_STATUS,
+      data[0].devices
+    );
+  });
+
+  it('Test dashboard with devices and go to device', async () => {
+    useContext.mockReturnValue({
+      stateData: mockSCStore({
+        app: { isNeedUpdateCache: true },
+      }),
+      setAction: mockSetAction,
+    });
+    mock.onGet(API.UNIT.MY_DASHBOARD_DEVICES()).reply(200, data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const devices = instance.findAllByType(ItemDevice);
+    expect(devices).toHaveLength(2);
+    const deviceTemplates = instance.findAllByType(DeviceTemplate);
+    expect(deviceTemplates).toHaveLength(1);
+
+    await act(async () => {
+      await devices[0].props.goToDetail();
+    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+      params: {
+        sensorId: 1,
+        station: {
+          id: 1,
+          name: 'Phòng họp',
+        },
+        title: 'LED',
+        unitId: 1,
+      },
+      screen: Routes.DeviceDetail,
+    });
+    expect(mockSetAction).toHaveBeenCalledTimes(2);
+    expect(mockSetAction).toHaveBeenNthCalledWith(
+      1,
+      Action.IS_CHECK_CLEAR_CACHE_UNITS,
+      false
+    );
+    expect(mockSetAction).toHaveBeenNthCalledWith(
+      2,
+      Action.SET_DEVICES_STATUS,
+      data[0].devices
+    );
+  });
+});

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

@@ -0,0 +1,218 @@
+import { API, Colors, Images } from '../../../configs';
+import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
+import { Image, FlatList, TouchableOpacity, View } from 'react-native';
+import React, {
+  memo,
+  useCallback,
+  useContext,
+  useMemo,
+  useEffect,
+  useState,
+} from 'react';
+import { SCContext, useSCContextSelector } from '../../../context';
+import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
+import { useWatchConfigs } from '../../../hooks/IoT';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+
+import { Action } from '../../../context/actionType';
+import Routes from '../../../utils/Route';
+import { Section } from '../../Section';
+import Text from '../../Text';
+import { keyExtractor } from '../../../utils/Utils';
+import ItemDevice from '../../Device/ItemDevice';
+import { DeviceTemplate } from '../../SubUnit/DeviceTemplate/DeviceTemplate';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import styles from './styles';
+
+const MyDashboardDevice = ({ refreshing }) => {
+  const t = useTranslations();
+  const isFocused = useIsFocused();
+  const navigation = useNavigation();
+  const { setAction } = useContext(SCContext);
+  const isNeedUpdateCache = useSCContextSelector(
+    (state) => state.app.isNeedUpdateCache
+  );
+  const [myDashboardDevices, setMyDashboardDevices] = useState([]);
+
+  const configsNeedWatching = useMemo(() => {
+    const configIds = [];
+
+    myDashboardDevices.forEach(({ devices }) => {
+      devices
+        .filter((device) => device.device_type !== DEVICE_TYPE.GOOGLE_HOME)
+        .forEach((device) => {
+          const quickActionId = device.quick_action?.config_id;
+          quickActionId && configIds.push(quickActionId);
+
+          device.station_items?.forEach((item) => {
+            const stationConfigId = item.configuration?.config;
+            stationConfigId && configIds.push(stationConfigId);
+          });
+        });
+    });
+
+    return configIds;
+  }, [myDashboardDevices]);
+
+  useWatchConfigs(configsNeedWatching);
+
+  const fetchMyDashboardDevices = useCallback(async () => {
+    if (isNeedUpdateCache) {
+      setAction(Action.IS_CHECK_CLEAR_CACHE_UNITS, false);
+      const { success, data } = await axiosGet(
+        API.UNIT.MY_DASHBOARD_DEVICES(),
+        {},
+        true
+      );
+      if (success) {
+        setMyDashboardDevices(data);
+        data.forEach((dashboard) => {
+          setAction(Action.SET_DEVICES_STATUS, dashboard.devices);
+        });
+      }
+    } else {
+      await fetchWithCache(API.UNIT.MY_DASHBOARD_DEVICES(), {}, (response) => {
+        const { success, data } = response;
+        if (success) {
+          setMyDashboardDevices(data);
+          data.forEach((dashboard) => {
+            setAction(Action.SET_DEVICES_STATUS, dashboard.devices);
+          });
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const goToUnitDetail = useCallback(
+    (unit) => () => {
+      navigation.navigate(Routes.UnitStack, {
+        screen: Routes.UnitDetail,
+        params: {
+          unitId: unit.id,
+        },
+      });
+    },
+    [navigation]
+  );
+
+  const goToDeviceDetail = useCallback(
+    (unitId, device) => () => {
+      navigation.navigate(Routes.UnitStack, {
+        screen: Routes.DeviceDetail,
+        params: {
+          unitId: unitId,
+          station: device.station,
+          sensorId: device.id,
+          title: device.name,
+        },
+      });
+    },
+    [navigation]
+  );
+
+  const renderStationItem = useCallback(
+    (device, unitId, stationItem) => {
+      return (
+        <DeviceTemplate
+          device={device}
+          stationItem={stationItem}
+          unit={{ id: unitId }}
+          station={device.station}
+          goToDetail={goToDeviceDetail(unitId, device)}
+          key={`device-template-${stationItem.id}`}
+        />
+      );
+    },
+    [goToDeviceDetail]
+  );
+
+  const renderDisplayItem = useCallback(
+    (device, unitId) => {
+      let displays = [];
+      if (!device.station_items?.length || device.quick_action) {
+        displays.push(
+          <ItemDevice
+            description={device.value}
+            title={device.name}
+            sensor={device}
+            unit={{ id: unitId }}
+            station={device.station}
+            goToDetail={goToDeviceDetail(unitId, device)}
+            key={`device-${device.id}`}
+          />
+        );
+      }
+      if (device.station_items?.length) {
+        displays.push(
+          ...device.station_items.map((item) =>
+            renderStationItem(device, unitId, item)
+          )
+        );
+      }
+      return displays;
+    },
+    [goToDeviceDetail, renderStationItem]
+  );
+
+  const renderItem = useCallback(
+    ({ item, index }) => {
+      return (
+        <View style={styles.wrapItem}>
+          <View style={styles.titleItem}>
+            <Text type="H3" semibold>
+              {item.name}
+            </Text>
+            <TouchableOpacity
+              onPress={goToUnitDetail(item)}
+              style={styles.arrowRightButton}
+              accessibilityLabel={`${AccessibilityLabel.UNIT_GO_TO_DETAIL}-${index}`}
+            >
+              <Image source={Images.arrowBack} style={styles.arrowRight} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.wrapperDevices}>
+            {item.devices.map((device) => {
+              return renderDisplayItem(device, item.id);
+            })}
+          </View>
+        </View>
+      );
+    },
+    [goToUnitDetail, renderDisplayItem]
+  );
+
+  useEffect(() => {
+    if (isFocused || refreshing) {
+      fetchMyDashboardDevices();
+    }
+  }, [fetchMyDashboardDevices, isFocused, refreshing]);
+
+  return (
+    <>
+      {!!myDashboardDevices.length && (
+        <Section style={styles.wrapperDashboardDevice}>
+          <Text
+            style={styles.dashboardDevicesTitle}
+            type="H5"
+            color={Colors.Gray8}
+          >
+            {t('dashboard_devices')}
+          </Text>
+          <View style={styles.container}>
+            <FlatList
+              keyExtractor={keyExtractor}
+              data={myDashboardDevices}
+              extraData={myDashboardDevices}
+              renderItem={renderItem}
+              contentContainerStyle={styles.contentContainerStyle}
+              refreshing={false}
+            />
+          </View>
+        </Section>
+      )}
+    </>
+  );
+};
+
+export default memo(MyDashboardDevice);

package/src/commons/Dashboard/MyDashboardDevice/styles.js

@@ -0,0 +1,60 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+const styles = StyleSheet.create({
+  contentContainerStyle: {
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  wrapperDashboardDevice: {
+    padding: 0,
+    paddingBottom: 10,
+    backgroundColor: Colors.White,
+  },
+  dashboardDevicesTitle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+    paddingTop: 16,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  wrapperDevices: {
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 10,
+    borderBottomColor: Colors.Gray4,
+    borderBottomWidth: 1,
+  },
+  arrowRightButton: {
+    width: 20,
+    height: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  arrowRight: {
+    transform: [
+      {
+        rotate: '180deg',
+      },
+    ],
+    tintColor: Colors.Gray7,
+    width: 8,
+    height: 12,
+  },
+  wrapItem: {
+    marginBottom: 16,
+  },
+  titleItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default styles;

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

@@ -17,8 +17,6 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import SharedUnit from '../../Unit/SharedUnit';
 import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
-import { preloadImagesFromUnits } from '../../../utils/Functions/preloadImages';
-import { STORAGE_KEY } from '../../../utils/Storage';
 import { SCContext, useSCContextSelector } from '../../../context';
 import { Action } from '../../../context/actionType';
 
@@ -63,14 +61,6 @@ const MyPinnedSharedUnit = ({ refreshing }) => {
     }
   }, [fetchSharedUnitDashboard, isFocused, refreshing]);
 
-  useEffect(() => {
-    sharedUnits?.length &&
-      preloadImagesFromUnits(
-        sharedUnits,
-        STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_SHARE_UNIT
-      );
-  }, [sharedUnits]);
-
   return (
     <>
       <Section>