@eohjsc/react-native-smart-city 0.7.21 → 0.7.22

package/package.json

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

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

@@ -1,40 +1,39 @@
+import { API, Colors, Images, SCConfig } from '../../../configs';
+import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
+import { Dimensions, TouchableOpacity, View } from 'react-native';
 import React, {
   memo,
   useCallback,
-  useEffect,
-  useState,
   useContext,
+  useEffect,
   useMemo,
   useRef,
+  useState,
 } from 'react';
-import { View, TouchableOpacity, Dimensions } from 'react-native';
+import { SCContext, useSCContextSelector } from '../../../context';
+import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
+import { useBluetoothConnection, useWatchConfigs } from '../../../hooks/IoT';
 import {
-  useNavigation,
-  useIsFocused,
   useFocusEffect,
+  useIsFocused,
+  useNavigation,
 } from '@react-navigation/native';
-import NetInfo from '@react-native-community/netinfo';
-import { BleManager } from 'react-native-ble-plx';
-import { API, Colors, Images, SCConfig } from '../../../configs';
-import Text from '../../Text';
-import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
 
-import styles from './styles';
-import { Section } from '../../Section';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { useUnitConnectRemoteDevices } from '../../../screens/Unit/hook/useUnitConnectRemoteDevices';
-import { useWatchConfigs, useBluetoothConnection } from '../../../hooks/IoT';
-import { SCContext, useSCContextSelector } from '../../../context';
 import { Action } from '../../../context/actionType';
-
+import { BleManager } from 'react-native-ble-plx';
 import Carousel from 'react-native-new-snap-carousel';
-import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
-import Routes from '../../../utils/Route';
+import FImage from '../../FImage';
 import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
+import NetInfo from '@react-native-community/netinfo';
+import Routes from '../../../utils/Route';
 import { STORAGE_KEY } from '../../../utils/Storage';
+import { Section } from '../../Section';
+import Text from '../../Text';
 import { preloadImagesFromUnits } from '../../../utils/Functions/preloadImages';
-import FImage from '../../FImage';
+import styles from './styles';
 import { usePrevious } from '../../../hooks';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { useUnitConnectRemoteDevices } from '../../../screens/Unit/hook/useUnitConnectRemoteDevices';
 
 let screenWidth = Dimensions.get('window').width;
 

package/src/commons/DevMode/Search.js

@@ -10,7 +10,7 @@ const Search = ({ onSearch }) => {
       <Image source={Images.search} style={styles.icon} />
       <TextInput
         style={styles.textInput}
-        placeholder={t('what_are_you_looking_for')}
+        placeholder={t('search')}
         onChangeText={onSearch}
       />
     </View>

package/src/commons/Device/RainningSensor/CurrentRainSensor.js

@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
+import { StyleSheet, View } from 'react-native';
 
-import { Colors } from '../../../configs';
 import { CircleView } from '../../../commons';
-import Text from '../../../commons/Text';
+import { Colors } from '../../../configs';
+import FImage from '../../FImage';
 import IconComponent from '../../IconComponent';
+import LinearGradient from 'react-native-linear-gradient';
+import Text from '../../../commons/Text';
 import images from '../../../configs/Images';
-import FImage from '../../FImage';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 const CurrentRainSensor = ({

package/src/commons/Widgets/IFrameWithConfig/IFrameWithConfig.js

@@ -6,7 +6,6 @@ import { styles } from './IFrameWithConfigStyles';
 import IconComponent from '../../IconComponent';
 import { useConfigGlobalState } from '../../../iot/states';
 import { useFetchConfigHistory } from '../../UnitSummary/ConfigHistoryChart';
-import API from '../../../configs/API';
 import WebView from 'react-native-webview';
 import { TouchableOpacity, View } from 'react-native';
 
@@ -25,8 +24,7 @@ const IFrameWithConfig = memo(
     const [chartData, setChartData] = useState(configuration?.history_configs);
     const fetchDataDisplayHistory = useFetchConfigHistory(
       configuration?.history_configs,
-      setChartData,
-      API.CONFIG.DISPLAY_HISTORY_V4()
+      setChartData
     );
 
     const postMessage = useCallback((message) => {

package/src/commons/Widgets/IFrameWithConfig/__tests__/IFrameWithConfig.test.js

@@ -252,7 +252,7 @@ describe('Test IFrame With Config', () => {
     });
 
     const mockAxios = new MockAdapter(api.axiosInstance);
-    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V4()).reply(200, {
+    mockAxios.onGet(API.CONFIG.DISPLAY_HISTORY_V3()).reply(200, {
       configs: [
         {
           id: 1,

package/src/configs/API.js

@@ -158,6 +158,8 @@ const API = {
     UNITS: () => '/property_manager/sharing/units/',
     UNIT_PERMISSIONS: (id) =>
       `/property_manager/sharing/units/${id}/permissions/`,
+    UNIT_PERMISSIONS_v2: (id) =>
+      `/property_manager/sharing/units/${id}/permissions_v2/`,
     UNITS_MEMBERS: (id) => `/property_manager/sharing/units/${id}/members/`,
     UNITS_MEMBER_DETAIL: (id, shareId) =>
       `/property_manager/sharing/units/${id}/members/${shareId}/`,
@@ -165,6 +167,8 @@ const API = {
       `/property_manager/sharing/units/${unit_id}/member/${member_id}/information/`,
     UNIT_MEMBER_SHARE_DEVICE: (unit_id, member_id) =>
       `/property_manager/sharing/units/${unit_id}/member/${member_id}/shared_devices/`,
+    UNIT_MEMBER_SHARE_DEVICE_V2: (unit_id, member_id) =>
+      `/property_manager/sharing/units/${unit_id}/member/${member_id}/shared_devices_v2/`,
     SHARE: () => '/property_manager/sharing/share/',
     SHARE_V2: () => '/property_manager/sharing/share_v2/',
     SEARCH_USER_BY_PHONE: (phone) => `/accounts/search/phone/${phone}/`,

package/src/configs/AccessibilityLabel.js

@@ -452,7 +452,9 @@ export default {
     CHECK_BOX_CUSTOM: 'CHECK_BOX_CUSTOM',
     CHECK_BOX_CONFIG: 'CHECK_BOX_CONFIG',
     EXPAND_END_DEVICE: 'EXPAND_END_DEVICE',
-    CLICK_NAME_END_DEVICE: 'CLICK_NAME_END_DEVICE',
+    NAME_END_DEVICE: 'CLICK_NAME_END_DEVICE',
+    ICON_END_DEVICE: 'ICON_END_DEVICE',
+    ICON_CHECK: 'ICON_CHECK',
   },
 
   // Select subunit

package/src/configs/Images.js

@@ -27,4 +27,5 @@ export default {
   inforCode: require('../Images/DevMode/inforCode.png'),
   activeCurrentSensor: require('../Images/Common/Sunny.png'),
   unitDefaultBackground: require('../Images/Common/unit_default_background.png'),
+  defaultEndDeviceIcon: require('../Images/Common/default_end_device.png'),
 };

package/src/navigations/AddMemberStack.js

@@ -1,12 +1,12 @@
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 
 import AddCommonSelectUnit from '../screens/AddCommon/SelectUnit';
 import Route from '../utils/Route';
-import { screenOptions } from './utils';
+import SelectShareDevice from '../screens/Sharing/SelectShareDevice';
 import SharingInviteMembers from '../screens/Sharing/SelectUser';
 import UpdateShareDevice from '../screens/Sharing/UpdateShareDevice';
-import SelectShareDevice from '../screens/Sharing/SelectShareDevice';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { screenOptions } from './utils';
 
 const Stack = createNativeStackNavigator();
 

package/src/screens/AddCommon/SelectUnit.js

@@ -1,8 +1,9 @@
-import { useNavigation } from '@react-navigation/native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 import React, { useCallback, useEffect, useState } from 'react';
+
 import Routes from '../../utils/Route';
 import SelectUnit from '../../commons/SelectUnit';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const AddCommonSelectUnit = ({ route }) => {
   const t = useTranslations();

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

@@ -1,22 +1,22 @@
-import MockAdapter from 'axios-mock-adapter';
-import React from 'react';
-import { Alert } from 'react-native';
-import RNAndroidLocationEnabler from 'react-native-android-location-enabler';
-import RNP from 'react-native-permissions';
+import {
+  GEOLOCATION_ERROR,
+  OpenSetting,
+} from '../../../utils/Permission/common';
 import { act, create } from 'react-test-renderer';
 
-import { useNavigation } from '@react-navigation/native';
-import { RESULTS } from 'react-native-permissions';
 import { API } from '../../../configs';
 import { AccessibilityLabel } from '../../../configs/Constants';
+import AddLocationMaps from '../index';
+import { Alert } from 'react-native';
+import MockAdapter from 'axios-mock-adapter';
+import { RESULTS } from 'react-native-permissions';
+import RNAndroidLocationEnabler from 'react-native-android-location-enabler';
+import RNP from 'react-native-permissions';
+import React from 'react';
 import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
-import {
-  GEOLOCATION_ERROR,
-  OpenSetting,
-} from '../../../utils/Permission/common';
-import AddLocationMaps from '../index';
+import { mockSCStore } from '../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>

package/src/screens/Automate/AddNewAction/__test__/ChooseConfig.test.js

@@ -1,20 +1,19 @@
-import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-import MockAdapter from 'axios-mock-adapter';
 
+import { API } from '../../../../configs';
 import ChooseConfig from '../ChooseConfig';
-import { SCProvider } from '../../../../context';
-import { mockSCStore } from '../../../../context/mockStore';
 import { DEVICE_TYPE } from '../../../../configs/Constants';
-import api from '../../../../utils/Apis/axios';
-import { API } from '../../../../configs';
-import TitleCheckBox from '../../../Sharing/Components/TitleCheckBox';
+import GridItem from '../../../../commons/Grid/GridItem';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import Routes from '../../../../utils/Route';
+import { SCProvider } from '../../../../context';
 import Text from '../../../../commons/Text';
+import { TouchableWithoutFeedback } from 'react-native';
+import api from '../../../../utils/Apis/axios';
+import { mockSCStore } from '../../../../context/mockStore';
 import t from '../../../../hooks/Common/useTranslations';
-import Routes from '../../../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
-import { TouchableWithoutFeedback } from 'react-native';
-import GridItem from '../../../../commons/Grid/GridItem';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -44,7 +43,6 @@ describe('Test ChooseConfig', () => {
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
-    expect(tree.root.findAllByType(TitleCheckBox)).toHaveLength(0);
     expect(mock.history.get).toHaveLength(1);
   });
 

package/src/screens/Automate/AddNewAutoSmart/__test__/AddAutomationTypeSmart.test.js

@@ -0,0 +1,31 @@
+import { act, create } from 'react-test-renderer';
+
+import AddAutomationTypeSmart from '../AddAutomationTypeSmart';
+import AddTypeSmart from '../AddTypeSmart';
+import React from 'react';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddAutomationTypeSmart route={route} />
+  </SCProvider>
+);
+
+describe('test AddNewAutoSmart', () => {
+  let tree;
+  let route = {
+    params: {
+      automate: { unit: 1 },
+    },
+  };
+
+  it('test render AddNewAutoSmart', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const items = instance.findAllByType(AddTypeSmart);
+    expect(items).toHaveLength(1);
+  });
+});

package/src/screens/Automate/ScriptDetail/utils.js

@@ -1,26 +1,6 @@
 import { AUTOMATE_TYPE } from '../../../configs/Constants';
 import { REPEAT_OPTIONS } from '../SetSchedule/components/RepeatOptionsPopup';
 
-export const generateAutomationDataConditionText = (
-  type,
-  config_name,
-  condition,
-  valueEvaluation,
-  t
-) => {
-  condition.config_name = config_name;
-  let automate = {};
-  if ([AUTOMATE_TYPE.VALUE_CHANGE].includes(type)) {
-    automate = { value_change: condition };
-  } else if (type === AUTOMATE_TYPE.SCHEDULE) {
-    automate = { schedule: condition };
-  } else if ([AUTOMATE_TYPE.EVENT].includes(type)) {
-    automate = { event: condition };
-  }
-  automate.type = type;
-  return generateAutomationConditionText(automate, valueEvaluation, t);
-};
-
 export const getAutomationData = (automate) => {
   const { type, event_sensor, event_action, schedule, event, value_change } =
     automate;

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

@@ -1,15 +1,18 @@
-import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 
-import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
+import API from '../../../configs/API';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import { Button } from '../../../commons';
 import ConfirmUnitDeletion from '../index';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import Routes from '../../../utils/Route';
+import { SCProvider } from '../../../context';
+import { ToastBottomHelper } from '../../../utils/Utils';
 import _TextInput from '../../../commons/Form/TextInput';
-import { TouchableOpacity } from 'react-native';
-import { AccessibilityLabel } from '../../../configs/Constants';
-import API from '../../../configs/API';
 import api from '../../../utils/Apis/axios';
-import MockAdapter from 'axios-mock-adapter';
+import { mockSCStore } from '../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
 
 const mock = new MockAdapter(api.axiosInstance);
 const wrapComponent = (route, navigation) => (
@@ -21,7 +24,8 @@ const wrapComponent = (route, navigation) => (
 describe('Test ConfirmUnitDeletion', () => {
   let tree;
   let route;
-
+  const spyToast = jest.spyOn(ToastBottomHelper, 'success');
+  const mockNavigate = useNavigation().navigate;
   beforeAll(() => {
     route = {
       params: {
@@ -31,6 +35,10 @@ describe('Test ConfirmUnitDeletion', () => {
       },
     };
   });
+  beforeEach(() => {
+    spyToast.mockClear();
+    mockNavigate.mockClear();
+  });
 
   it('test render ConfirmUnitDeletion', async () => {
     await act(async () => {
@@ -43,7 +51,8 @@ describe('Test ConfirmUnitDeletion', () => {
       textInput.props.onChange();
     });
   });
-  it('Onpress button ConfirmUnitDeletion ', async () => {
+  it('Onpress button ConfirmUnitDeletion success', async () => {
+    mock.onDelete(API.UNIT.MANAGE_UNIT(10)).reply(204);
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
@@ -52,16 +61,63 @@ describe('Test ConfirmUnitDeletion', () => {
     const touchableOpacity = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.CONFIRM_UNIT_DELETION_BUTTON &&
-        el.type === TouchableOpacity
+          AccessibilityLabel.CONFIRM_UNIT_DELETION_BUTTON && el.type === Button
     );
     const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      textInput.props.onChange('YES');
+    });
     await act(async () => {
       touchableOpacity.props.onPress();
     });
+    expect(spyToast).toHaveBeenLastCalledWith('Unit was deleted successfully.');
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.Dashboard);
+  });
+
+  it('Onpress button ConfirmUnitDeletion response error', async () => {
+    mock.onDelete(API.UNIT.MANAGE_UNIT(10)).reply(400);
     await act(async () => {
-      textInput.props.onChange();
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const touchableOpacity = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.CONFIRM_UNIT_DELETION_BUTTON && el.type === Button
+    );
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      textInput.props.onChange('YES');
+    });
+    await act(async () => {
+      touchableOpacity.props.onPress();
+    });
+    expect(spyToast).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it('Onpress button ConfirmUnitDeletion wrong text confirm', async () => {
+    mock.onDelete(API.UNIT.MANAGE_UNIT(10)).reply(204);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const touchableOpacity = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.CONFIRM_UNIT_DELETION_BUTTON && el.type === Button
+    );
+    const textInput = instance.findByType(_TextInput);
+    await act(async () => {
+      textInput.props.onChange('XXX');
+    });
+    await act(async () => {
+      touchableOpacity.props.onPress();
     });
-    mock.onDelete(API.UNIT.MANAGE_UNIT(1)).reply(204);
+    expect(spyToast).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+    expect(textInput.props.errorText).toEqual('Please enter correct');
   });
 });

package/src/screens/ConfirmUnitDeletion/index.js

@@ -1,31 +1,31 @@
+import { API, Colors } from '../../configs';
 import React, { useCallback, useContext, useState } from 'react';
-import { View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
 
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import styles from './styles';
-import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
-import Text from '../../commons/Text';
-import { API, Colors } from '../../configs';
-import _TextInput from '../../commons/Form/TextInput';
+import { AccessibilityLabel } from '../../configs/Constants';
+import { Action } from '../../context/actionType';
 import { Button } from '../../commons';
 import Routes from '../../utils/Route';
-import { axiosDelete } from '../../utils/Apis/axios';
-import { ToastBottomHelper } from '../../utils/Utils';
-import { AccessibilityLabel } from '../../configs/Constants';
 import { SCContext } from '../../context';
-import { Action } from '../../context/actionType';
+import Text from '../../commons/Text';
+import { ToastBottomHelper } from '../../utils/Utils';
+import { View } from 'react-native';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import _TextInput from '../../commons/Form/TextInput';
+import { axiosDelete } from '../../utils/Apis/axios';
+import styles from './styles';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const ConfirmUnitDeletion = ({ route }) => {
   const { setAction } = useContext(SCContext);
   const t = useTranslations();
   const { unit } = route?.params || {};
   const navigation = useNavigation();
-  const [confirm, setConfrim] = useState('');
+  const [confirm, setConfirm] = useState('');
   const [errorText, setErrorText] = useState();
 
   const onChangePassword = useCallback((value) => {
-    setConfrim(value);
+    setConfirm(value);
   }, []);
 
   const onSendPress = useCallback(async () => {

package/src/screens/Sharing/Components/ConfigItem.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Text } from '../../../commons';
+import { TitleCheckBox } from '.';
+import { View } from 'react-native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const ConfigItem = ({ isChecked, item, onSelect }) => {
+  const t = useTranslations();
+  return (
+    <View style={styles.wrap}>
+      <TitleCheckBox
+        isChecked={isChecked}
+        item={item}
+        onSelect={onSelect}
+        checkBoxStyle={styles.wrapCheckBoxStyle}
+      />
+      <Text>{item?.isConfig ? t('view_only') : t('can_control')}</Text>
+    </View>
+  );
+};
+
+export default ConfigItem;
+
+const styles = StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  wrapCheckBoxStyle: {
+    marginLeft: -10,
+  },
+});

package/src/screens/Sharing/Components/DeviceItem.js

@@ -0,0 +1,77 @@
+import { Colors, Images } from '../../../configs';
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { AccessibilityLabel } from '../../../configs/Constants';
+import FImage from '../../../commons/FImage';
+import IconComponent from '../../../commons/IconComponent';
+import { IconOutline } from '@ant-design/icons-react-native';
+import styles from './Styles/DeviceItemStyles';
+
+const DeviceItem = ({ isChecked, item, onSelect, childrenRender }) => {
+  const { label, key, item: endDeviceItem } = item;
+  const { actions, read_configs, icon_kit, icon } = endDeviceItem;
+  const [isChildExpanded, setIsChildExpanded] = useState(false);
+  const onPressItem = () => {
+    onSelect(item, !isChecked);
+  };
+
+  return (
+    <View style={styles.wrap}>
+      <TouchableOpacity
+        onPress={onPressItem}
+        accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.ICON_END_DEVICE}-${key}`}
+      >
+        {icon_kit || icon ? (
+          <IconComponent
+            icon={icon_kit || icon}
+            size={20}
+            style={styles.viewLeft}
+          />
+        ) : (
+          <FImage
+            source={Images.defaultEndDeviceIcon}
+            style={styles.viewLeft}
+          />
+        )}
+      </TouchableOpacity>
+      <View style={styles.wrapRight}>
+        <View style={styles.viewRight}>
+          <TouchableOpacity
+            onPress={onPressItem}
+            style={styles.wrapTextIcon}
+            accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.NAME_END_DEVICE}-${key}`}
+          >
+            <Text numberOfLines={1} style={styles.text}>
+              {label}
+            </Text>
+            {isChecked && (
+              <IconOutline
+                name={'check'}
+                color={Colors.Primary}
+                size={20}
+                accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.ICON_CHECK}-${key}`}
+              />
+            )}
+          </TouchableOpacity>
+          <View style={styles.expandView}>
+            {actions?.length + read_configs?.length > 0 && (
+              <IconOutline
+                onPress={() => setIsChildExpanded(!isChildExpanded)}
+                name={isChildExpanded ? 'up' : 'down'}
+                size={20}
+                color={Colors.Gray6}
+                accessibilityLabel={`${AccessibilityLabel.SHARE_DEVICE.EXPAND_END_DEVICE}-${key}`}
+              />
+            )}
+          </View>
+        </View>
+        <View style={styles.wrapChildren}>
+          {isChildExpanded && childrenRender}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default DeviceItem;

package/src/screens/Sharing/Components/ItemChangeRole.js

@@ -1,16 +1,15 @@
 import React, { memo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import Text from '../../../commons/Text';
-import { Colors } from '../../../configs';
 
-import styles from './Styles/ItemChangeRoleStyles';
+import { Colors } from '../../../configs';
 import { RadioCircle } from '../../../commons';
+import Text from '../../../commons/Text';
+import styles from './Styles/ItemChangeRoleStyles';
 
 const ItemChangeRole = ({
   isChecked,
   onPress,
   wrapStyle,
-  wrapCheckBoxStyle,
   icon,
   title = '',
   message = '',