@eohjsc/react-native-smart-city 0.3.1 → 0.3.4

package/src/configs/API.js

@@ -41,6 +41,10 @@ const API = {
   CHIP: {
     CHECK_FINALIZED: () => '/property_manager/stations/check_chip_finalized/',
     GET_CHIPS_FROM_UNIT: (id) => `/property_manager/get_chips/?unit_id=${id}`,
+    CHIP_DETAIL: (id) => `/chip_manager/chips/${id}/`,
+  },
+  SENSOR: {
+    SENSOR_DETAIL: (id) => `/chip_manager/sensors/${id}/`,
   },
   DEVICE: {
     SENSOR_DETAIL: (id) => `/property_manager/sensors/${id}/`,

package/src/configs/Constants.js

@@ -288,6 +288,8 @@ export const TESTID = {
   SUB_UNIT_TEXT_DROPDOWN: 'SUB_UNIT_TEXT_DROPDOWN',
   SUB_UNIT_GO_DETAIL: 'SUB_UNIT_GO_DETAIL',
   VIEW_SUB_UNIT_AUTOMATE: 'VIEW_SUB_UNIT_AUTOMATE',
+  SUB_UNIT_NAME: 'SUB_UNIT_NAME',
+  ANIMATED_SCROLL: 'ANIMATED_SCROLL',
   ADD_SUB_UNIT: 'ADD_SUB_UNIT',
 
   // NavBar
@@ -392,6 +394,7 @@ export const TESTID = {
   ITEM_TEXT_ERROR: 'ITEM_TEXT_ERROR',
   SEARCH_BAR_INPUT: 'SEARCH_BAR_INPUT',
   GO_DETAIL: 'GO_DETAIL',
+  NAV_LIST: 'NAV_LIST',
 
   // Automate
   AUTOMATE_SCRIPT_ACTION: 'AUTOMATE_SCRIPT_ACTION',
@@ -447,8 +450,13 @@ export const TESTID = {
   ITEM_QUICK_ACTION_PRESS: 'ITEM_QUICK_ACTION_PRESS',
   TIME_COUNT_DOWN_TEXT: 'TIME_COUNT_DOWN_TEXT',
   ACTION_ITEM: 'ACTION_ITEM',
+
   // Sensor Item
   TEXT_SENSOR_ITEM: 'TEXT_SENSOR_ITEM',
+  SENSOR_NAME: 'SENSOR_NAME',
+  ON_OFF_BUTTON: 'ON_OFF_BUTTON',
+  SENSOR_STATUS: 'SENSOR_STATUS',
+  ICON_BACK: 'ICON_BACK',
 
   // DeviceInfo
   DEVICE_INFO_BATTERY: 'DEVICE_INFO_BATTERY',
@@ -564,6 +572,7 @@ export const TESTID = {
   ICON_ADD_STAR_SHARED_UNIT: 'ICON_ADD_STAR_SHARED_UNIT',
   TOUCH_SHARED_UNIT: 'TOUCH_SHARED_UNIT',
   SHARED_UNIT_OWN_BY: 'SHARED_UNIT_OWN_BY',
+  ICON_UNIT: 'ICON_UNIT',
 
   // Select subunit
 
@@ -809,3 +818,13 @@ export const SENSOR_TYPE = {
   SOS: 'sos',
   FILTER_WATER: 'filter_water',
 };
+
+export const PROBLEM_CODE = {
+  CLIENT_ERROR: 'CLIENT_ERROR',
+  SERVER_ERROR: 'SERVER_ERROR',
+  TIMEOUT_ERROR: 'TIMEOUT_ERROR',
+  CONNECTION_ERROR: 'CONNECTION_ERROR',
+  NETWORK_ERROR: 'NETWORK_ERROR',
+  UNKNOWN_ERROR: 'UNKNOWN_ERROR',
+  CANCEL_ERROR: 'CANCEL_ERROR',
+};

package/src/configs/SCConfig.js

@@ -107,11 +107,13 @@ export class SCConfig {
   static VCONNEX_REDIRECT_URI_APP = SCDefaultConfig.VCONNEX_REDIRECT_URI_APP;
   static pusherAppKey = SCDefaultConfig.pusherAppKey;
   static pusherAppCluste = SCDefaultConfig.pusherAppCluster;
+  static language = 'en';
 }
 
 export const initSCConfig = (config) => {
   api.setBaseURL(config.apiRoot ?? SCDefaultConfig.apiRoot);
   LocaleConfig.defaultLocale = config.language;
+  SCConfig.language = config.language ?? SCConfig.language;
   SCConfig.apiRoot = config.apiRoot ?? SCDefaultConfig.apiRoot;
   SCConfig.GOOGLE_MAP_API_KEY =
     config.GOOGLE_MAP_API_KEY ?? SCDefaultConfig.GOOGLE_MAP_API_KEY;

package/src/hooks/Common/useSensorsStatus.js

@@ -12,14 +12,14 @@ const useSensorsStatus = (unit, sensors) => {
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const getSensorsStatus = useCallback(
-    throttle(async () => {
+    throttle(async (_unit, _sensors) => {
       const params = new URLSearchParams();
-      if (sensors?.length > 0) {
-        sensors.forEach((sensor) => {
+      if (_sensors?.length > 0) {
+        _sensors.forEach((sensor) => {
           params.append('sensors', sensor.id);
         });
         const { success, data, resp_status } = await axiosGet(
-          API.UNIT.SENSORS_STATUS(unit.id),
+          API.UNIT.SENSORS_STATUS(_unit.id),
           {
             params: params,
           }
@@ -32,19 +32,22 @@ const useSensorsStatus = (unit, sensors) => {
         }
       }
     }, 3000),
-    [unit, sensors]
+    []
   );
 
   useEffect(() => {
     if (isFocused) {
-      getSensorsStatus();
-      const updateInterval = setInterval(getSensorsStatus, 5000);
+      getSensorsStatus(unit, sensors);
+      const updateInterval = setInterval(
+        () => getSensorsStatus(unit, sensors),
+        5000
+      );
       intervalSensorStatus.current = updateInterval;
       return () => clearInterval(updateInterval);
     } else {
       clearInterval(intervalSensorStatus.current);
     }
-  }, [isFocused, getSensorsStatus]);
+  }, [isFocused, getSensorsStatus, unit, sensors]);
 
   const getStatus = (sensor) => {
     sensorsStatus.find((s) => s.id === sensor.id);

package/src/hooks/useReceiveNotifications.js

@@ -5,7 +5,7 @@ const useReceiveNotifications = () => {
   const [dataNofitication, setDataNofitication] = useState(null);
 
   const onReceived = useCallback((data) => {
-    const { additionalData } = data.payload;
+    const { additionalData } = data;
     setDataNofitication(additionalData);
   }, []);
 

package/src/navigations/UnitStack.js

@@ -1,5 +1,5 @@
 import React, { memo, useContext, useEffect } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { BleManager } from 'react-native-ble-plx';
@@ -52,10 +52,10 @@ import ConfirmUnitDeletion from '../screens/ConfirmUnitDeletion';
 import InfoMemberUnit from '../screens/Sharing/InfoMemberUnit';
 import EnterPassword from '../screens/EnterPassword';
 import { HanetCameraStack } from './HanetCameraStack';
-
 import { axiosGet } from '../utils/Apis/axios';
 import { API } from '../configs';
 import SideMenuDetail from '../screens/SideMenuDetail';
+import { styles } from './UnitStackStyles';
 
 const Stack = createStackNavigator();
 
@@ -173,12 +173,9 @@ export const UnitStack = memo((props) => {
         component={ChooseLocation}
         options={{
           headerShown: true,
-          headerTitleStyle: {
-            ...styles.headerLocation,
-          },
           headerTitle: () => (
             <View style={styles.headerLocation}>
-              <Text type="H3" color={Colors.Gray9} bold>
+              <Text color={Colors.Gray9} style={styles.headerTitle} bold>
                 {t('choose_on_map')}
               </Text>
 
@@ -406,17 +403,3 @@ export const UnitStack = memo((props) => {
     </Stack.Navigator>
   );
 });
-
-const styles = StyleSheet.create({
-  icLeft: {
-    marginLeft: Device.isIOS ? 8 : 0,
-  },
-  headerLocation: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  headerContent: {
-    textAlign: 'center',
-    paddingBottom: 8,
-  },
-});

package/src/navigations/UnitStackStyles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { Device } from '../configs';
+
+export const styles = StyleSheet.create({
+  icLeft: {
+    marginLeft: Device.isIOS ? 8 : 0,
+  },
+  headerLocation: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 290,
+  },
+  headerTitle: {
+    fontSize: 20,
+    lineHeight: 28,
+  },
+  headerContent: {
+    textAlign: 'center',
+    paddingBottom: 4,
+  },
+});

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

@@ -53,6 +53,7 @@ describe('Test AddNewDevice', () => {
         unit_id: 1,
       },
     };
+    mock.resetHistory();
   });
 
   const getText = (instance, id) => {
@@ -103,7 +104,13 @@ describe('Test AddNewDevice', () => {
     });
     const instance = tree.root;
     const groupCheckBox = instance.findByType(GroupCheckBox);
-    expect(groupCheckBox.props.data).toEqual([]);
+    expect(groupCheckBox.props.data).toEqual([
+      {
+        id: 2,
+        name: 'Station name',
+        title: 'Station name',
+      },
+    ]);
   });
 
   test('ViewButtonBottom', async () => {

package/src/screens/AddNewDevice/__test__/ConnectingDevices.test.js

@@ -103,7 +103,7 @@ describe('Test ConnectingDevices', () => {
       await jest.runOnlyPendingTimers();
     });
     expect(setInterval).toHaveBeenCalled();
-    expect(mockedNavigate).not.toHaveBeenCalledWith(Routes.ConnectDevices, {
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ConnectDevices, {
       new_sensor: { id: 1 },
     });
   });

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

@@ -104,20 +104,22 @@ const EditDevice = memo(() => {
             />
           </View>
         </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.removeButton}
-          onPress={onShowDelete(sensor?.name)}
-          testID={TESTID.DEVICE_SHOW_REMOVE}
-        >
-          <Text
-            type={'H4'}
-            semibold
-            color={Colors.Red}
-            style={styles.removeBorderBottom}
+        {!stateAlertAction.visible && (
+          <TouchableOpacity
+            style={styles.removeButton}
+            onPress={onShowDelete(sensor?.name)}
+            testID={TESTID.DEVICE_SHOW_REMOVE}
           >
-            {t('remove_device')}
-          </Text>
-        </TouchableOpacity>
+            <Text
+              type={'H4'}
+              semibold
+              color={Colors.Red}
+              style={styles.removeBorderBottom}
+            >
+              {t('remove_device')}
+            </Text>
+          </TouchableOpacity>
+        )}
       </View>
       <AlertAction
         visible={stateAlertAction.visible}

package/src/screens/SubUnit/AddSubUnit.js

@@ -25,11 +25,12 @@ import { ToastBottomHelper } from '../../utils/Utils';
 import { TESTID } from '../../configs/Constants';
 import styles from './AddSubUnitStyles';
 import useKeyboardShow from '../../hooks/Common/useKeyboardShow';
+import { replace } from '../../navigations/utils';
 
 const AddSubUnit = ({ route }) => {
   const t = useTranslations();
   const { dismissKeyboard } = useKeyboardShow();
-  const { navigate, goBack } = useNavigation();
+  const { navigate, goBack, dispatch } = useNavigation();
   const { unit, addType, isAddUnit, location = '' } = route?.params;
   const [roomName, setRoomName] = useState('');
   const [wallpaper, setWallpaper] = useState('');
@@ -62,13 +63,15 @@ const AddSubUnit = ({ route }) => {
           }
         );
         if (success) {
-          navigate(Routes.UnitStack, {
-            screen: Routes.UnitDetail,
-            params: {
-              unitId: data?.id,
-              routeName: Routes.DashboardStack,
-            },
-          });
+          dispatch(
+            replace(Routes.UnitStack, {
+              screen: Routes.UnitDetail,
+              params: {
+                unitId: data?.id,
+                routeName: Routes.DashboardStack,
+              },
+            })
+          );
           cleanData();
         } else {
           awaitCreate.current = false;
@@ -98,15 +101,17 @@ const AddSubUnit = ({ route }) => {
             });
             return;
           }
-          navigate(Routes.UnitStack, {
-            screen: Routes.UnitDetail,
-            params: {
-              unitId: unit.id,
-              unitData: unit,
-              isAddSubUnit: true,
-              routeName: Routes.DashboardStack,
-            },
-          });
+          dispatch(
+            replace(Routes.UnitStack, {
+              screen: Routes.UnitDetail,
+              params: {
+                unitId: unit.id,
+                unitData: unit,
+                isAddSubUnit: true,
+                routeName: Routes.DashboardStack,
+              },
+            })
+          );
           cleanData();
         } else {
           awaitCreate.current = false;
@@ -123,6 +128,7 @@ const AddSubUnit = ({ route }) => {
     t,
     unit,
     addType,
+    dispatch,
     goBack,
     route.params,
   ]);

package/src/screens/SubUnit/EditSubUnit.js

@@ -228,20 +228,22 @@ const EditSubUnit = ({ route }) => {
             setImageUrl={setImageUrl}
             optionsCapture={options}
           />
-          <TouchableOpacity
-            testID={TESTID.MANAGE_SUB_UNIT_REMOVE_BUTTON}
-            onPress={onPressRemove}
-            style={styles.removeButton}
-          >
-            <Text
-              type={'H4'}
-              semibold
-              color={Colors.Red}
-              style={styles.removeText}
+          {!showEdit && (
+            <TouchableOpacity
+              testID={TESTID.MANAGE_SUB_UNIT_REMOVE_BUTTON}
+              onPress={onPressRemove}
+              style={styles.removeButton}
             >
-              {t('remove_sub_unit')}
-            </Text>
-          </TouchableOpacity>
+              <Text
+                type={'H4'}
+                semibold
+                color={Colors.Red}
+                style={styles.removeText}
+              >
+                {t('remove_sub_unit')}
+              </Text>
+            </TouchableOpacity>
+          )}
         </View>
       </View>
       <ModalCustom

package/src/screens/SubUnit/__test__/AddSubUnit.test.js

@@ -36,13 +36,20 @@ jest.mock('react-redux', () => {
   };
 });
 
+const mockNavigationDispatch = jest.fn();
+const mockReplace = jest.fn();
+
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
     useNavigation: () => ({
       navigate: mockedNavigate,
       goBack: mockedGoBack,
+      dispatch: mockNavigationDispatch,
     }),
+    StackActions: {
+      replace: () => mockReplace,
+    },
   };
 });
 
@@ -63,6 +70,7 @@ describe('Test AddSubUnit', () => {
   afterEach(() => {
     mockedDispatch.mockClear();
     mockedNavigate.mockClear();
+    mockNavigationDispatch.mockClear();
     Toast.show.mockClear();
   });
   let tree;
@@ -150,15 +158,6 @@ describe('Test AddSubUnit', () => {
     await act(async () => {
       await viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).not.toHaveBeenCalledWith(Routes.UnitStack, {
-      screen: Routes.UnitDetail,
-      params: {
-        unitId: route.params.unit.id,
-        unitData: route.params.unit,
-        routeName: 'DashboardStack',
-        isAddSubUnit: true,
-      },
-    });
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',
@@ -186,13 +185,6 @@ describe('Test AddSubUnit', () => {
   });
 
   test('test create Unit', async () => {
-    const response = {
-      success: true,
-      status: 200,
-      data: {
-        id: 2,
-      },
-    };
     route.params = {
       ...route.params,
       location: 'Unit address',
@@ -211,13 +203,7 @@ describe('Test AddSubUnit', () => {
     await act(async () => {
       await viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
-      screen: Routes.UnitDetail,
-      params: {
-        unitId: response.data.id,
-        routeName: Routes.DashboardStack,
-      },
-    });
+    expect(mockNavigationDispatch).toBeCalledWith(mockReplace);
   });
 
   test('test choose Location', async () => {

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

@@ -53,6 +53,7 @@ describe('Test Add LG Device', () => {
         backend_url: 'https://doamin.com',
       },
     };
+    mock.resetHistory();
   });
 
   const getText = (instance, id) => {
@@ -105,7 +106,13 @@ describe('Test Add LG Device', () => {
     });
     const instance = tree.root;
     const groupCheckBox = instance.findByType(GroupCheckBox);
-    expect(groupCheckBox.props.data).toEqual([]);
+    expect(groupCheckBox.props.data).toEqual([
+      {
+        id: 2,
+        name: 'Station name',
+        title: 'Station name',
+      },
+    ]);
   });
 
   test('ViewButtonBottom', async () => {

package/src/screens/Unit/SelectAddress.js

@@ -4,6 +4,7 @@ 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 { check, RESULTS } from 'react-native-permissions';
+import { openPromptEnableLocation } from '../../utils/Setting/Location';
 
 import BottomButtonView from '../../commons/BottomButtonView';
 import SearchBarLocation from '../../commons/SearchLocation';
@@ -151,9 +152,14 @@ const SelectAddress = memo(({ route }) => {
               t('location_rationale_title'),
               t('location_require_message')
             );
+        } else if (error.code === GEOLOCATION_ERROR.POSITION_UNAVAILABLE) {
+          const locationEnabaled = await openPromptEnableLocation();
+          process.env.NODE_ENV !== 'test' &&
+            locationEnabaled &&
+            getCurrentPosition();
         }
       }
-      // { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } enable on emulator
+      // { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } // enable on emulator
     );
   }, [t]);
 

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

@@ -1,5 +1,6 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { View, Text, TouchableOpacity, FlatList } from 'react-native';
+import { TESTID } from '../../../configs/Constants';
 import styles from './StationStyles';
 
 const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
@@ -23,6 +24,7 @@ const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
         key={index}
         style={styles.wrapTitle}
         onPress={handleOnSnapToItem(item, index)}
+        testID={`${TESTID.SUB_UNIT_NAME}-${item?.station?.id}`}
       >
         <Text
           style={[styles.title, index === indexStation && styles.titleActive]}
@@ -71,6 +73,7 @@ const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
         renderItem={renderItem}
         showsHorizontalScrollIndicator={false}
         scrollIndicatorInsets={{ right: 1 }}
+        testID={TESTID.NAV_LIST}
       />
     </View>
   );

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

@@ -1,7 +1,9 @@
 import React from 'react';
+import { Alert } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
 import RNP from 'react-native-permissions';
+import RNAndroidLocationEnabler from 'react-native-android-location-enabler';
 
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
@@ -62,6 +64,13 @@ jest.mock('react-native-maps', () => {
   };
 });
 
+jest.mock('react-native-android-location-enabler', () => {
+  return {
+    ...jest.requireActual('react-native-android-location-enabler'),
+    promptForEnableLocationIfNeeded: jest.fn(),
+  };
+});
+
 jest.mock('../../../utils/Permission/common');
 
 const position = {
@@ -82,11 +91,12 @@ jest.mock('react-native-permissions', () => {
 });
 
 describe('Test SelectAddress', () => {
-  let tree;
-  let route;
+  let tree, route, Platform;
   const mockUpdateLocation = jest.fn();
 
   beforeAll(() => {
+    Platform = require('react-native').Platform;
+    RNAndroidLocationEnabler.promptForEnableLocationIfNeeded.mockClear();
     RNP.check.mockClear();
     route = {
       params: {
@@ -209,7 +219,74 @@ describe('Test SelectAddress', () => {
     OpenSetting.mockClear();
   });
 
-  test('test get current failed error not handle', async () => {
+  test('test get current location failed location not enabled android', async () => {
+    Platform.OS = 'android';
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.find(
+      (el) => el.props.testID === TESTID.BUTTON_YOUR_LOCATION
+    );
+
+    global.navigator.geolocation = {
+      getCurrentPosition: (onSuccess, onError, options) => {
+        onError({ code: GEOLOCATION_ERROR.POSITION_UNAVAILABLE });
+      },
+    };
+
+    // cancel
+    RNAndroidLocationEnabler.promptForEnableLocationIfNeeded.mockImplementationOnce(
+      async () => {
+        throw new Error();
+      }
+    );
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(
+      RNAndroidLocationEnabler.promptForEnableLocationIfNeeded
+    ).toBeCalled();
+
+    RNAndroidLocationEnabler.promptForEnableLocationIfNeeded.mockClear();
+
+    // enabled
+    RNAndroidLocationEnabler.promptForEnableLocationIfNeeded.mockImplementationOnce(
+      async () => true
+    );
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(
+      RNAndroidLocationEnabler.promptForEnableLocationIfNeeded
+    ).toBeCalled();
+  });
+
+  test('test get current location failed location not enabled ios', async () => {
+    Platform.OS = 'ios';
+    jest.spyOn(Alert, 'alert');
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.find(
+      (el) => el.props.testID === TESTID.BUTTON_YOUR_LOCATION
+    );
+
+    global.navigator.geolocation = {
+      getCurrentPosition: (onSuccess, onError, options) => {
+        onError({ code: GEOLOCATION_ERROR.POSITION_UNAVAILABLE });
+      },
+    };
+
+    await act(async () => {
+      await button.props.onPress();
+    });
+    // expect AlertAsync is called
+  });
+
+  test('test get current location failed error not handle', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
     });

package/src/screens/Unit/components/MyUnitDevice/index.js

@@ -1,12 +1,12 @@
 import React, { useState, useCallback } from 'react';
-import { Image, StyleSheet, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 import ItemQuickAction from '../../../../commons/Action/ItemQuickAction';
 import Text from '../../../../commons/Text';
 import Routes from '../../../../utils/Route';
-
-import { Colors, Images } from '../../../../configs';
+import { Colors } from '../../../../configs';
+import FImage from '../../../../commons/FImage';
 
 const MyUnitDevice = ({ sensor, unit }) => {
   const [status, setStatus] = useState(sensor.status);
@@ -26,7 +26,7 @@ const MyUnitDevice = ({ sensor, unit }) => {
     <View style={styles.item}>
       <TouchableOpacity style={styles.flex1} onPress={goToSensorDisplay}>
         <View style={styles.rowCenter}>
-          <Image style={styles.image} source={Images.mainDoor} />
+          <FImage style={styles.image} source={{ uri: sensor?.icon_kit }} />
           <View style={styles.marginTop3}>
             <Text semibold style={styles.nameDevice}>
               {sensor.name}