@eohjsc/react-native-smart-city 0.3.32 → 0.3.35

package/src/screens/AddNewGateway/__test__/SelectDeviceType.test.js

@@ -4,8 +4,10 @@ import { act, create } from 'react-test-renderer';
 import SelectDeviceType from '../SelectDeviceType';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import Button from '../../../commons/Button';
 import Routes from '../../../utils/Route';
+import { TouchableOpacity } from 'react-native';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { ViewButtonBottom } from '../../../commons';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -43,18 +45,42 @@ describe('Test select device type', () => {
     route = {
       params: {
         unitId: 1,
-        stationId: 1,
+        unitName: 'Unit A',
       },
     };
   });
 
-  test('render select type', async () => {
+  test('render select type without station', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const deviceTypeItems = instance.findAll(
+      (el) =>
+        el.type === TouchableOpacity &&
+        el.props.accessibilityLabel === AccessibilityLabel.ITEM_DEVICE_TYPE
+    );
+    expect(deviceTypeItems).toHaveLength(4);
+  });
+
+  test('render select type with station', async () => {
+    route = {
+      params: {
+        unitId: 1,
+        unitName: 'Unit A',
+        stationId: 1,
+      },
+    };
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const buttons = instance.findAllByType(Button);
-    expect(buttons).toHaveLength(4);
+    const deviceTypeItems = instance.findAll(
+      (el) =>
+        el.type === TouchableOpacity &&
+        el.props.accessibilityLabel === AccessibilityLabel.ITEM_DEVICE_TYPE
+    );
+    expect(deviceTypeItems).toHaveLength(3);
   });
 
   const selectDeviceType = async (index) => {
@@ -62,9 +88,18 @@ describe('Test select device type', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const buttons = instance.findAllByType(Button);
+    const deviceTypeItems = instance.findAll(
+      (el) =>
+        el.type === TouchableOpacity &&
+        el.props.accessibilityLabel === AccessibilityLabel.ITEM_DEVICE_TYPE
+    );
     await act(async () => {
-      buttons[index].props.onPress();
+      deviceTypeItems[index].props.onPress();
+    });
+
+    const submitButton = instance.findByType(ViewButtonBottom);
+    await act(async () => {
+      submitButton.props.onRightClick();
     });
 
     expect(mockedNavigate).toBeCalled();
@@ -72,18 +107,18 @@ describe('Test select device type', () => {
 
   test('select modbus', async () => {
     await selectDeviceType(0);
-    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectModbusGateway);
+    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.ScanGatewayQR);
   });
   test('select zigbee', async () => {
     await selectDeviceType(1);
-    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectZigbeeGateway);
+    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectDeviceSubUnit);
   });
   test('select gateway', async () => {
     await selectDeviceType(2);
-    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.ScanGatewayQR);
+    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectDeviceSubUnit);
   });
   test('select wifi', async () => {
     await selectDeviceType(3);
-    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.ScanWifiDeviceQR);
+    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectDeviceSubUnit);
   });
 });

package/src/screens/AddNewGateway/__test__/ShareWifiPassword.test.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+import { Platform } from 'react-native';
+import dgram from 'react-native-udp';
+import Toast from 'react-native-toast-message';
+import WifiManager from 'react-native-wifi-reborn';
 
 import ShareWifiPassword from '../ShareWifiPassword';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import ButtonPopup from '../../../commons/ButtonPopup';
 import TextInputPassword from '../../../commons/Form/TextInputPassword';
-import { Platform, TouchableOpacity } from 'react-native';
-import WifiManager from 'react-native-wifi-reborn';
-import dgram from 'react-native-udp';
 import Routes from '../../../utils/Route';
-import Toast from 'react-native-toast-message';
 
 const mockedGoBack = jest.fn();
 const mockedNavigate = jest.fn();
@@ -55,145 +55,6 @@ describe('test share wifi password', () => {
     expect(passwordFields).toHaveLength(1);
   });
 
-  test('auto connect to wifi prefix on ios', async () => {
-    Platform.OS = 'ios';
-    const route = { params: { prefix: 'robot' } };
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(route));
-    });
-    expect(WifiManager.connectToProtectedSSIDPrefix).toBeCalled();
-    expect(WifiManager.connectToProtectedSSIDPrefix.mock.calls[0][0]).toEqual(
-      'eoh.robot.'
-    );
-    const socket = dgram.createSocket();
-    expect(socket.bind).toBeCalled();
-  });
-
-  test('fail connect to wifi prefix on ios', async () => {
-    Platform.OS = 'ios';
-    const route = { params: { prefix: 'robot' } };
-    WifiManager.connectToProtectedSSIDPrefix.mockImplementationOnce(
-      async () => {
-        throw 'Cannot connect to protected prefix SSID';
-      }
-    );
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(route));
-    });
-    const socket = dgram.createSocket();
-    expect(socket.bind).not.toBeCalled();
-  });
-
-  test('auto connect to wifi android', async () => {
-    Platform.OS = 'android';
-    const route = { params: { prefix: 'robot' } };
-    WifiManager.loadWifiList.mockImplementationOnce(async () => [
-      { SSID: 'random-name' },
-      { SSID: 'eoh.lite.xxx' },
-      { SSID: 'eoh.robot.xxx' },
-    ]);
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(route));
-    });
-
-    expect(WifiManager.connectToProtectedSSID).toBeCalled();
-    expect(WifiManager.connectToProtectedSSID.mock.calls[0][0]).toEqual(
-      'eoh.robot.xxx'
-    );
-    const socket = dgram.createSocket();
-    expect(socket.bind).toBeCalled();
-  });
-
-  test('fail connect to wifi android', async () => {
-    Platform.OS = 'android';
-    const route = { params: { prefix: 'robot' } };
-    WifiManager.reScanAndLoadWifiList.mockImplementationOnce(async () => [
-      { SSID: 'random-name' },
-      { SSID: 'eoh.lite.xxx' },
-      { SSID: 'eoh.robot.xxx' },
-    ]);
-    WifiManager.connectToProtectedSSID.mockImplementationOnce(async () => {
-      throw 'Cannot connect to wifi';
-    });
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(route));
-    });
-
-    const socket = dgram.createSocket();
-    expect(socket.bind).not.toBeCalled();
-  });
-
-  test('fail load wifi list android', async () => {
-    Platform.OS = 'android';
-    const route = { params: { prefix: 'robot' } };
-    WifiManager.reScanAndLoadWifiList.mockImplementationOnce(async () => {
-      throw 'Cannot load wifi list to wifi';
-    });
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(route));
-    });
-
-    const socket = dgram.createSocket();
-    expect(socket.bind).not.toBeCalled();
-  });
-
-  test('request wifi list from device', async () => {
-    jest.useFakeTimers();
-    Platform.OS = 'android';
-    const route = { params: { prefix: 'robot' } };
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(route));
-    });
-    jest.runOnlyPendingTimers();
-    const socket = dgram.createSocket({});
-    expect(socket.send).toBeCalled();
-    const data = JSON.parse(socket.send.mock.calls[0][0]);
-    expect(data.type).toEqual('scan');
-  });
-
-  test('got wifi list from device', async () => {
-    Platform.OS = 'android';
-    const route = { params: { prefix: 'robot' } };
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(route));
-    });
-
-    const socket = dgram.createSocket({});
-    expect(socket.on).toBeCalled();
-    expect(socket.on.mock.calls[0][0]).toEqual('message');
-
-    expect(
-      tree.root.findAll((el) => el.type === TouchableOpacity)
-    ).toHaveLength(4);
-
-    await act(async () => {
-      socket.on.mock.calls[0][1](
-        JSON.stringify({
-          wifi: [{ ssid: 'wifi 1' }, { ssid: 'wifi.2' }],
-        })
-      );
-    });
-    // todo Bang should test wifi display
-    expect(socket.close).toBeCalled();
-  });
-
-  test('got error while request wifi list from device', async () => {
-    Platform.OS = 'android';
-    const route = { params: { prefix: 'robot' } };
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(route));
-    });
-
-    const socket = dgram.createSocket({});
-    expect(socket.on).toBeCalledTimes(2);
-    expect(socket.on.mock.calls[1][0]).toEqual('error');
-
-    await act(async () => {
-      socket.on.mock.calls[1][1]();
-    });
-    expect(Toast.show).toBeCalled();
-  });
-
   const sendPasswordToGateway = async () => {
     jest.useFakeTimers();
     Platform.OS = 'android';

package/src/screens/EditActionsList/__tests__/index.test.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import DraggableFlatList from 'react-native-draggable-flatlist';
+import { create, act } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import EditActionsList from '../index';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import { TouchableOpacity } from 'react-native';
+import api from '../../../utils/Apis/axios';
+import MockAdapter from 'axios-mock-adapter';
+import API from '../../../configs/API';
+
+import { ModalBottom } from '../../../commons/Modal';
+
+const mockSetdata = jest.fn();
+const mockedNavigate = jest.fn();
+const mockGoBack = jest.fn();
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <EditActionsList />
+  </SCProvider>
+);
+const mock = new MockAdapter(api.axiosInstance);
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useRoute: jest.fn().mockReturnValue({
+      params: {
+        data: [{ id: 1, sensor_name: 'abc', station_name: 'abc' }],
+        id: 1,
+        setData: mockSetdata,
+        unit: { id: 1, name: 'unit' },
+      },
+    }),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockGoBack,
+    }),
+    useIsFocused: () => true,
+  };
+});
+
+jest.mock('react-native-parsed-text', () => () => []);
+
+describe('EditActionsList', () => {
+  let tree;
+
+  beforeEach(() => {
+    mockGoBack.mockClear();
+  });
+  test('render EditActionsList', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const draggableFlatList = instance.findAllByType(DraggableFlatList);
+    const modalBottom = instance.findAllByType(ModalBottom);
+    expect(draggableFlatList).toHaveLength(1);
+    expect(modalBottom).toHaveLength(1);
+  });
+  test('EditActionsList onPress cancel', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const buttonCancel = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.BUTTON_CANCEL_EDIT_ACTION_LIST &&
+        el.type === TouchableOpacity
+    );
+    expect(buttonCancel).toBeDefined();
+    buttonCancel.props.onPress();
+    expect(mockGoBack).toHaveBeenCalled();
+  });
+  test('EditActionsList onPress save', async () => {
+    mock.onPut(API.AUTOMATE.ORDER_SCRIPT_ACTION(1)).reply(200);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const buttonSave = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.BUTTON_SAVE_EDIT_ACTION_LIST &&
+        el.type === TouchableOpacity
+    );
+    expect(buttonSave).toBeDefined();
+    buttonSave.props.onPress();
+    expect(mock.history.put).toHaveLength(1);
+  });
+  test('EditActionsList onPress remove', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const buttonRemove = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.BUTTON_REMOVE_EDIT_ACTION_LIST &&
+        el.type === TouchableOpacity
+    );
+    expect(buttonRemove).toBeDefined();
+    buttonRemove.props.onPress();
+  });
+  test('EditActionsList modal onPress remove', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const modalBottom = instance.findAllByType(ModalBottom);
+    modalBottom[0].props.onRemove();
+
+    mock.onDelete(API.AUTOMATE.DELETE_SCRIPT_ACTION(1, 1)).reply(200);
+    expect(mock.history.delete).toHaveLength(1);
+    modalBottom[0].props.onClose();
+  });
+});

package/src/screens/EditActionsList/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { memo, useState, useCallback } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import DraggableFlatList from 'react-native-draggable-flatlist';
 import { useNavigation, useRoute } from '@react-navigation/native';
@@ -15,8 +15,9 @@ import Close from '../../../assets/images/Close.svg';
 import { axiosDelete, axiosPut } from '../../utils/Apis/axios';
 import { ModalBottom } from '../../commons/Modal';
 import { ToastBottomHelper } from '../../utils/Utils';
+import { AccessibilityLabel } from '../../configs/Constants';
 
-const EditActionsList = () => {
+const EditActionsList = memo(() => {
   const t = useTranslations();
   const { goBack } = useNavigation();
   const { params = {} } = useRoute() || {};
@@ -115,6 +116,9 @@ const EditActionsList = () => {
             </Text>
           </View>
           <TouchableOpacity
+            accessibilityLabel={
+              AccessibilityLabel.BUTTON_REMOVE_EDIT_ACTION_LIST
+            }
             onPress={onPressRemove({
               id: item?.id,
               actionName: item?.sensor_name,
@@ -148,12 +152,18 @@ const EditActionsList = () => {
         />
       </View>
       <View style={styles.wrapBottom}>
-        <TouchableOpacity onPress={onPressCancel}>
+        <TouchableOpacity
+          onPress={onPressCancel}
+          accessibilityLabel={AccessibilityLabel.BUTTON_CANCEL_EDIT_ACTION_LIST}
+        >
           <Text type="H4" hilight semibold>
             {t('cancel')}
           </Text>
         </TouchableOpacity>
-        <TouchableOpacity onPress={onPressSave}>
+        <TouchableOpacity
+          onPress={onPressSave}
+          accessibilityLabel={AccessibilityLabel.BUTTON_SAVE_EDIT_ACTION_LIST}
+        >
           <Text type="H4" hilight semibold>
             {t('save')}
           </Text>
@@ -189,6 +199,6 @@ const EditActionsList = () => {
       </ModalBottom>
     </View>
   );
-};
+});
 
 export default EditActionsList;

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

@@ -64,14 +64,16 @@ describe('Test ScriptDetail', () => {
         havePermission: true,
         automate: {
           author: 'Le Minh Tam',
-          condition: '<',
-          config: 'PM2.5 (Mr.Son Office)',
-          config_id: 201,
-          config_name: 'PM2.5 (Mr.Son Office)',
           id: 1009,
-          sensor_id: 73,
           type: 'value_change',
-          value: 35,
+          value_change: {
+            condition: '<',
+            config: 'PM2.5 (Mr.Son Office)',
+            config_id: 201,
+            config_name: 'PM2.5 (Mr.Son Office)',
+            sensor_id: 73,
+            value: 35,
+          },
           script: {
             id: 1,
           },
@@ -295,13 +297,11 @@ describe('Test ScriptDetail', () => {
       ...route.params,
       type: AUTOMATE_TYPE.VALUE_CHANGE,
       automate: {
-        repeat: 'once',
-        date_repeat: '2022-01-02',
-        time_repeat: '09:10:00',
-        weekday_repeat: ['1', '2', '4', '6'],
-        config_name: 'Light Value',
-        value: 3,
-        condition: '>',
+        value_change: {
+          config_name: 'Light Value',
+          value: 3,
+          condition: '>',
+        },
       },
     };
     await act(() => {
@@ -312,6 +312,11 @@ describe('Test ScriptDetail', () => {
     expect(itemAutomate.props.textCondition).toEqual(
       'Light Value higher than 3'
     );
+
+    await act(async () => {
+      itemAutomate.findByType(TouchableOpacity).props.onPress();
+    });
+    expect(mockNavigate).toBeCalled();
   });
 
   test('Test render textCondition value change =', async () => {
@@ -319,13 +324,7 @@ describe('Test ScriptDetail', () => {
       ...route.params,
       type: AUTOMATE_TYPE.VALUE_CHANGE,
       automate: {
-        repeat: 'once',
-        date_repeat: '2022-01-02',
-        time_repeat: '09:10:00',
-        weekday_repeat: ['1', '2', '4', '6'],
-        config_name: 'Light Value',
-        value: 3,
-        condition: '=',
+        value_change: { config_name: 'Light Value', value: 3, condition: '=' },
       },
     };
     await act(() => {
@@ -341,13 +340,11 @@ describe('Test ScriptDetail', () => {
       ...route.params,
       type: AUTOMATE_TYPE.VALUE_CHANGE,
       automate: {
-        repeat: 'once',
-        date_repeat: '2022-01-02',
-        time_repeat: '09:10:00',
-        weekday_repeat: ['1', '2', '4', '6'],
-        config_name: 'Light Value',
-        value: 3,
-        condition: '<',
+        value_change: {
+          config_name: 'Light Value',
+          value: 3,
+          condition: '<',
+        },
       },
     };
     await act(() => {
@@ -365,9 +362,11 @@ describe('Test ScriptDetail', () => {
       ...route.params,
       type: AUTOMATE_TYPE.SCHEDULE,
       automate: {
-        repeat: 'every_day',
-        date_repeat: '2022-01-02',
-        time_repeat: '19:00:00',
+        schedule: {
+          repeat: 'every_day',
+          date_repeat: '2022-01-02',
+          time_repeat: '19:00:00',
+        },
       },
     };
     await act(() => {
@@ -383,10 +382,12 @@ describe('Test ScriptDetail', () => {
       ...route.params,
       type: AUTOMATE_TYPE.SCHEDULE,
       automate: {
-        repeat: 'every_week',
-        date_repeat: '2022-01-02',
-        time_repeat: '19:00:00',
-        weekday_repeat: ['1', '2', '4', '6'],
+        schedule: {
+          repeat: 'every_week',
+          date_repeat: '2022-01-02',
+          time_repeat: '19:00:00',
+          weekday_repeat: ['1', '2', '4', '6'],
+        },
       },
     };
     await act(() => {

package/src/screens/ScriptDetail/index.js

@@ -362,17 +362,9 @@ const ScriptDetail = ({ route }) => {
   const isHaveScriptActions = data?.length > 0;
 
   const textCondition = useMemo(() => {
-    const {
-      condition,
-      config_name,
-      value,
-      repeat,
-      date_repeat,
-      time_repeat,
-      weekday_repeat,
-      sensor_type,
-    } = automate;
     if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
+      const { condition, config_name, value, sensor_type } =
+        automate?.value_change;
       const stateConditionData = STATE_VALUE_SENSOR_TYPES.find(
         (i) => i.type === sensor_type
       );
@@ -388,6 +380,8 @@ const ScriptDetail = ({ route }) => {
       }
       return `${config_name} ${t(text)} ${isNumberValue ? value : ''}`;
     } else if (type === AUTOMATE_TYPE.SCHEDULE) {
+      const { repeat, time_repeat, date_repeat, weekday_repeat } =
+        automate?.schedule;
       const time =
         time_repeat?.length >= 8
           ? time_repeat.substring(0, time_repeat?.length - 3)
@@ -424,6 +418,21 @@ const ScriptDetail = ({ route }) => {
         const textWeekday = sortWeekday.map((item) => weekday[item]).join(', ');
         return `${textWeekday} ${t('at')} ${time}`;
       }
+    } else if (type === AUTOMATE_TYPE.EVENT) {
+      const { action, end_device_name, config_name, sensor_type, value } =
+        automate?.event;
+      let textEvent = '';
+      if (config_name) {
+        const stateConditionData = STATE_VALUE_SENSOR_TYPES.find(
+          (i) => i.type === sensor_type
+        );
+        textEvent = `${config_name} - ${t(
+          stateConditionData.stateValue[value]
+        )}`;
+      } else {
+        textEvent = `${end_device_name} - ${action}`;
+      }
+      return textEvent;
     }
     return null;
   }, [t, automate, type]);

package/src/screens/SharedUnit/__test__/ShareUnit.test.js

@@ -4,6 +4,12 @@ import SharedUnit from '../index';
 import Modal from 'react-native-modal';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+
+const mock = new MockAdapter(api.axiosInstance);
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
@@ -16,9 +22,11 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }));
 
+const mockSetSharedUnits = jest.fn();
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   useLayoutEffect: jest.fn(),
+  useState: jest.fn((init) => [init, mockSetSharedUnits]),
 }));
 
 jest.mock('react-native-onesignal', () => {
@@ -37,4 +45,21 @@ describe('test SharedUnit', () => {
     const modalShareds = instance.findAllByType(Modal);
     expect(modalShareds[0]).not.toBeUndefined();
   });
+
+  test('render touch item filter', async () => {
+    mock.onGet(API.UNIT.FILTER_SHARED_UNITS()).reply(200, [{}]);
+
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const item = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.FILTER_SHARING_ITEM
+    );
+    await act(async () => {
+      item[0].props.onPress();
+    });
+    expect(mockSetSharedUnits).toBeCalled();
+  });
 });

package/src/screens/SharedUnit/index.js

@@ -12,6 +12,7 @@ import {
   useBoolean,
   useBlockBackAndroid,
 } from '../../hooks/Common';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 import styles from './styles';
 import TabHeader from './TabHeader';
@@ -185,6 +186,7 @@ const Shared = () => {
                     style={styles.row}
                     onPress={() => onFilter(item.filter, item.textFilter)}
                     key={`filter-${index}`}
+                    accessibilityLabel={`${AccessibilityLabel.FILTER_SHARING_ITEM}`}
                   >
                     <Text
                       style={