@eohjsc/react-native-smart-city 0.7.3 → 0.7.4

package/src/commons/Device/WaterQualitySensor/QualityIndicatorsItem.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
 
 import { Colors } from '../../../configs';
@@ -35,7 +35,11 @@ const QualityIndicatorItem = memo(
               onPress={() => navigation.navigate(descriptionScreen)}
               style={styles.iconInfo}
             >
-              <AntDesign name={'info-circle'} size={18} color={Colors.Gray8} />
+              <IconOutline
+                name={'info-circle'}
+                size={18}
+                color={Colors.Gray8}
+              />
             </TouchableOpacity>
           )}
         </View>

package/src/commons/DisplayChecking/index.js

@@ -3,7 +3,7 @@ import { View, TouchableOpacity } from 'react-native';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import styles from './styles';
 import { ModalCustom } from '../Modal';
 import Loading from '../../screens/Automate/Components/Loading';
@@ -18,7 +18,7 @@ const LoadingMessage = memo(({ visible, onClose, message }) => {
           onPress={onClose}
         >
           <Loading
-            icon={<AntDesign name={'sync'} color={Colors.Green6} size={16} />}
+            icon={<IconOutline name={'sync'} color={Colors.Green6} size={16} />}
           />
           <Text type={'Body'} style={styles.text}>
             {message}

package/src/commons/EmergencyButton/AlertSendConfirm.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { ButtonPopup } from '../index';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -29,7 +29,7 @@ const AlertSendConfirm = ({
       bodyStyle={styles.buttonPopupBody}
     >
       <View style={styles.firstInfo}>
-        <AntDesign name="clockcircleo" size={42} style={styles.clock} />
+        <IconOutline name="clock-circle" size={42} style={styles.clock} />
         <Text semibold type="H4" style={styles.textAlertWillBe}>
           {t('alert_will_be_sent_in')}
         </Text>

package/src/commons/FieldTemplate/ChooseUserField/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useState } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { TouchableOpacity, View } from 'react-native';
 
 import styles from './ChooseFieldStyles';
@@ -47,7 +47,7 @@ const ChooseUserField = ({ unit, dataItem, index, setDataForm, dataForm }) => {
         onPress={setShowFilterPopup}
       >
         <Text style={styles.value}>{choose.name}</Text>
-        <AntDesign name="right" size={20} color={Colors.Gray8} />
+        <IconOutline name="right" size={20} color={Colors.Gray8} />
       </TouchableOpacity>
       <ChoosePopup
         isVisible={showFilterPopup}

package/src/commons/FieldTemplate/PasscodeField/__test__/index.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 import { AccessibilityLabel } from '../../../../configs/Constants';
-import { mockSCStore } from '../../../../context/mockStore';
 import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import PasscodeField from '../index';
 
 const mockSetDataForm = jest.fn();
@@ -59,7 +59,7 @@ describe('Test PasscodeField', () => {
     await act(async () => {
       await inputPasscode.props.onChangeText('123');
     });
-    expect(mockSetDataForm).toBeCalledWith([
+    expect(mockSetDataForm).toHaveBeenCalledWith([
       {
         key: 'passcode',
         type: 'passcode',
@@ -74,7 +74,7 @@ describe('Test PasscodeField', () => {
     await act(async () => {
       await inputPasscode.props.onChangeText('123456');
     });
-    expect(mockSetDataForm).toBeCalledWith([
+    expect(mockSetDataForm).toHaveBeenCalledWith([
       {
         key: 'passcode',
         type: 'passcode',

package/src/commons/FieldTemplate/ScheduleField/__test__/index.test.js

@@ -1,10 +1,10 @@
 import React from 'react';
+import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
-import { mockSCStore } from '../../../../context/mockStore';
+import { AccessibilityLabel } from '../../../../configs/Constants';
 import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
 import ScheduleField from '../index';
-import { AccessibilityLabel } from '../../../../configs/Constants';
-import { TouchableOpacity } from 'react-native';
 
 const mockSetDataForm = jest.fn();
 
@@ -69,7 +69,7 @@ describe('Test ScheduleField', () => {
     await act(async () => {
       await recurring.props.onPress();
     });
-    expect(mockSetDataForm).toBeCalledWith([
+    expect(mockSetDataForm).toHaveBeenCalledWith([
       {
         key: 'schedule',
         type: 'schedule',
@@ -99,7 +99,7 @@ describe('Test ScheduleField', () => {
       await schedule.props.onPress();
     });
 
-    expect(mockSetDataForm).toBeCalledWith([
+    expect(mockSetDataForm).toHaveBeenCalledWith([
       {
         key: 'schedule',
         type: 'schedule',
@@ -152,7 +152,7 @@ describe('Test ScheduleField', () => {
     await act(async () => {
       tree = await create(wrapComponent());
     });
-    expect(mockSetDataForm).toBeCalledWith([
+    expect(mockSetDataForm).toHaveBeenCalledWith([
       {
         key: 'schedule',
         type: 'schedule',

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
 import DraggableFlatList from 'react-native-draggable-flatlist';
+import renderer, { act } from 'react-test-renderer';
 
-import FlatListDnD from '../index';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import FlatListDnD from '../index';
 
 const wrapComponent = ({ ...rest }) => (
   <SCProvider initState={mockSCStore({})}>
@@ -31,7 +31,7 @@ describe('Test FlatListDnD', () => {
     await act(async () => {
       draggableFlatList[0].props.onDragEnd({ data: [{ id: 2 }, { id: 1 }] });
     });
-    expect(setData).toBeCalledWith([{ id: 2 }, { id: 1 }]);
+    expect(setData).toHaveBeenCalledWith([{ id: 2 }, { id: 1 }]);
   });
 
   it('render FlatListDnD onDragEnd', async () => {
@@ -44,6 +44,6 @@ describe('Test FlatListDnD', () => {
     await act(async () => {
       draggableFlatList[0].props.onDragEnd({ data: [{ id: 2 }, { id: 1 }] });
     });
-    expect(setData).toBeCalledWith([{ id: 2 }, { id: 1 }]);
+    expect(setData).toHaveBeenCalledWith([{ id: 2 }, { id: 1 }]);
   });
 });

package/src/commons/FlatListDnD/index.js

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import DraggableFlatList from 'react-native-draggable-flatlist';
 
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import styles from './styles';
 
 const FlatListDnD = memo(
@@ -23,15 +24,17 @@ const FlatListDnD = memo(
     };
 
     return (
-      <DraggableFlatList
-        showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-        data={data}
-        renderItem={renderItem}
-        keyExtractor={keyExtractor}
-        onDragEnd={onDragEnd || handleOnDragEnd}
-        containerStyle={styles.containerStyle}
-        {...props}
-      />
+      <GestureHandlerRootView>
+        <DraggableFlatList
+          showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+          data={data}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          onDragEnd={onDragEnd || handleOnDragEnd}
+          containerStyle={styles.containerStyle}
+          {...props}
+        />
+      </GestureHandlerRootView>
     );
   }
 );

package/src/commons/Grid/GridItem.js

@@ -3,7 +3,15 @@ import { TouchableWithoutFeedback, View } from 'react-native';
 import styles from './GridItemStyles';
 
 const GridItem = memo(
-  ({ icon, accessibilityLabel, selected, onPress, item, children }) => {
+  ({
+    icon,
+    accessibilityLabel,
+    selected,
+    onPress,
+    item,
+    children,
+    style = {},
+  }) => {
     const isActive = selected && styles.active;
 
     return (
@@ -11,7 +19,7 @@ const GridItem = memo(
         onPress={() => onPress && onPress(item)}
         accessibilityLabel={accessibilityLabel}
       >
-        <View style={[styles.container, isActive]}>{children}</View>
+        <View style={[styles.container, style, isActive]}>{children}</View>
       </TouchableWithoutFeedback>
     );
   }

package/src/commons/GroupCheckBox/__test__/GroupCheckBox.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { act, create } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
 
-import { AccessibilityLabel } from '../../../configs/Constants';
 import GroupCheckBox from '..';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
 describe('Test Group CheckBox', () => {
   let tree;
@@ -59,7 +59,7 @@ describe('Test Group CheckBox', () => {
     await act(async () => {
       buttons[0].props.onPress();
     });
-    expect(mockFunc).toBeCalledTimes(2);
+    expect(mockFunc).toHaveBeenCalledTimes(2);
   });
 
   it('render Group CheckBox with foundIndex === -1 multiple false', async () => {

package/src/commons/Header/HeaderCustom.js

@@ -2,7 +2,7 @@ import React, { useCallback, useRef } from 'react';
 import { View, Text, TouchableOpacity, Image } from 'react-native';
 import Images from '../../configs/Images';
 import { Colors } from '../../configs';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation } from '@react-navigation/native';
 import styles from './Styles/HeaderCustomStyles';
@@ -111,7 +111,7 @@ const HeaderCustom = ({
         {isShowClose && (
           <TouchableOpacity onPress={handleClose}>
             <View style={styles.buttonAdd}>
-              <AntDesign name={'close'} size={24} color={Colors.Black} />
+              <IconOutline name={'close'} size={24} color={Colors.Black} />
             </View>
           </TouchableOpacity>
         )}

package/src/commons/Header/__test__/HeaderCT.test.js

@@ -1,6 +1,6 @@
+import { act } from '@testing-library/react-hooks';
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
-import { act } from '@testing-library/react-hooks';
 import { create } from 'react-test-renderer';
 import { HeaderCustom } from '..';
 import { SCProvider } from '../../../context';
@@ -44,11 +44,11 @@ describe('Test HeaderCustom', () => {
     await act(async () => {
       TouchableOpacityElement[1].props.onPress();
     });
-    expect(mockOnRefresh).toBeCalled();
+    expect(mockOnRefresh).toHaveBeenCalled();
     await act(async () => {
       TouchableOpacityElement[2].props.onPress();
     });
-    expect(mockShowPopoverWithRef).toBeCalled();
+    expect(mockShowPopoverWithRef).toHaveBeenCalled();
   });
 
   it('Test render without props', async () => {

package/src/commons/HeaderAni/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { TouchableOpacity, StyleSheet, Animated, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
@@ -95,7 +95,7 @@ const HeaderAni = memo(
             accessibilityLabel={AccessibilityLabel.ICON_BACK}
           >
             <View style={styles.btnBack}>
-              <AntDesign name={'left'} size={27} color={Colors.Gray9} />
+              <IconOutline name={'left'} size={27} color={Colors.Gray9} />
             </View>
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>

package/src/commons/IconComponent/index.js

@@ -1,4 +1,4 @@
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import React, { memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
@@ -62,7 +62,7 @@ const IconComponent = memo(
       );
     } else if (icon.includes('Filled')) {
       return (
-        <AntDesign
+        <IconFill
           name={displayIcon}
           color={colorIcon}
           size={size}
@@ -76,7 +76,7 @@ const IconComponent = memo(
           ? 'poweroff'
           : displayIcon;
       return (
-        <AntDesign
+        <IconOutline
           name={iconCT}
           color={colorIcon}
           size={size}

package/src/commons/ImagePicker/__test__/ImagePicker.test.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { Platform } from 'react-native';
 import { act, create } from 'react-test-renderer';
 
-import ImagePicker from '../index';
-import ButtonPopup from '../../ButtonPopup';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import ButtonPopup from '../../ButtonPopup';
+import ImagePicker from '../index';
 
 const mockSetImageUrl = jest.fn();
 const mockSetShowImagePicker = jest.fn();
@@ -56,7 +56,7 @@ describe('Test ImagePicker', () => {
     await act(async () => {
       textInputs[0].props.onPressMain();
     });
-    expect(mockSetImageUrl).toBeCalledWith({ path: 'path_from_camera' });
+    expect(mockSetImageUrl).toHaveBeenCalledWith({ path: 'path_from_camera' });
   });
 
   it('create ImagePicker onChooseFile', async () => {
@@ -69,7 +69,7 @@ describe('Test ImagePicker', () => {
     await act(async () => {
       buttonPopup.props.onPressSecondary();
     });
-    expect(mockSetImageUrl).toBeCalledWith({
+    expect(mockSetImageUrl).toHaveBeenCalledWith({
       path: 'file:///data/user/0/com.eohjsc.eohmobile/cache/Camera/80fbbd4b-926d-425f-a081-e21b13f2f7d0.jpg',
     });
   });
@@ -84,6 +84,6 @@ describe('Test ImagePicker', () => {
     await act(async () => {
       await buttonPopup.props.onClose();
     });
-    expect(mockSetShowImagePicker).toBeCalledWith(false);
+    expect(mockSetShowImagePicker).toHaveBeenCalledWith(false);
   });
 });

package/src/commons/MediaPlayerDetail/__test__/MediaPlayerDetail.test.js

@@ -1,12 +1,12 @@
 import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
-import { TouchableOpacity, Text } from 'react-native';
-import MediaPlayerDetail from '../index';
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import { ToastBottomHelper } from '../../../utils/Utils';
 import { getTranslate } from '../../../utils/I18n';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import MediaPlayerDetail from '../index';
 
 const wrapComponent = (uri) => (
   <SCProvider initState={mockSCStore({})}>
@@ -53,6 +53,8 @@ describe('Test MediaPlayerDetail', () => {
     await act(async () => {
       wrapper = await create(wrapComponent(uri));
     });
-    expect(spyToastError).toBeCalledWith(getTranslate('en', 'uri_invalid'));
+    expect(spyToastError).toHaveBeenCalledWith(
+      getTranslate('en', 'uri_invalid')
+    );
   });
 });

package/src/commons/MenuActionMore/MenuActionMoreStyles.js

@@ -3,7 +3,8 @@ import { Colors } from '../../configs';
 
 export default StyleSheet.create({
   wrap: {
-    backgroundColor: Colors.TextTransparent,
+    width: 0,
+    height: 0,
   },
   menuStyle: {
     marginTop: -25,

package/src/commons/MenuActionMore/index.js

@@ -50,7 +50,7 @@ const MenuActionMore = memo(
         from={childRef}
         onRequestClose={hideMore}
         isVisible={isVisible}
-        arrowStyle={styles.wrap}
+        arrowSize={styles.wrap}
         accessibilityLabel={idLabelPopover}
         mode={mode}
       >

package/src/commons/NavBar/NavBarStyles.js

@@ -47,7 +47,7 @@ export default StyleSheet.create({
   wrapStyle: {
     marginTop: Platform.select({
       ios: 0,
-      android: -30,
+      android: -15,
     }),
   },
 });

package/src/commons/NavBar/index.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { View, TouchableOpacity } from 'react-native';
 
 import styles from './NavBarStyles';
@@ -40,7 +40,7 @@ const NavBar = ({
           ref={refMenuAction}
           accessibilityLabel={idLabelIconBars}
         >
-          <AntDesign name={'bars'} size={19} color={Colors.Black} />
+          <IconOutline name={'bars'} size={19} color={Colors.Black} />
         </TouchableOpacity>
       </View>
       <MenuActionMore

package/src/commons/OneTapTemplate/NumberUpDownActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { memo, useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './NumberUpDownActionTemplateStyles';
@@ -118,7 +118,7 @@ const NumberUpDownActionTemplate = ({ device, item = {}, onSelectAction }) => {
                   AccessibilityLabel.NUMBER_UP_DOWN_ACTION_DOWN
                 }
               >
-                <AntDesign name="down" size={32} color={Colors.Primary} />
+                <IconOutline name="down" size={32} color={Colors.Primary} />
               </TouchableOpacity>
               <Text
                 type="H2"
@@ -134,7 +134,7 @@ const NumberUpDownActionTemplate = ({ device, item = {}, onSelectAction }) => {
                 onPress={onPressUp}
                 accessibilityLabel={AccessibilityLabel.NUMBER_UP_DOWN_ACTION_UP}
               >
-                <AntDesign name="up" size={32} color={Colors.Primary} />
+                <IconOutline name="up" size={32} color={Colors.Primary} />
               </TouchableOpacity>
             </View>
             <View style={styles.wrapButton}>

package/src/commons/OneTapTemplate/__test__/StatesGridActionTemplate.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { create, act } from 'react-test-renderer';
+import { act, create } from 'react-test-renderer';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import StatesGridActionTemplate from '../StatesGridActionTemplate';

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { create, act } from 'react-test-renderer';
+import Popover from 'react-native-popover-view';
+import { act, create } from 'react-test-renderer';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import PopoverComponent from '../index';
-import Popover from 'react-native-popover-view';
 
 const wrapComponent = (data) => (
   <SCProvider initState={mockSCStore({})}>
@@ -26,6 +26,6 @@ describe('Test PopoverComponent', () => {
       popover.props.onCloseComplete();
     });
     expect(popover.props.isVisible).toEqual(true);
-    expect(mockOnCloseComplete).toBeCalled();
+    expect(mockOnCloseComplete).toHaveBeenCalled();
   });
 });

package/src/commons/Processing/__test__/Connecting.test.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { act, create } from 'react-test-renderer';
-import * as Progress from 'react-native-progress';
-import Processing from '../index';
 import { Text } from 'react-native';
+import * as Progress from 'react-native-progress';
+import { act, create } from 'react-test-renderer';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { getPusher } from '../../../utils/Pusher';
 import ViewButtonBottom from '../../ViewButtonBottom';
+import Processing from '../index';
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
@@ -73,7 +73,7 @@ describe('Test Processing', () => {
       tree = await create(wrapComponent({ onReady: setChannelName }));
       await tree.unmount();
     });
-    expect(getPusher().unsubscribe).toBeCalledWith(channelName);
+    expect(getPusher().unsubscribe).toHaveBeenCalledWith(channelName);
   });
 
   it('test click ok', async () => {

package/src/commons/SearchLocation/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, TextInput } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -10,8 +10,8 @@ const SearchBarLocation = memo(({ input, onTextInput }) => {
   const t = useTranslations();
   return (
     <View style={styles.container}>
-      <AntDesign
-        name="search1"
+      <IconOutline
+        name="search"
         size={24}
         color={Colors.Gray6}
         accessibilityLabel="icon-search"

package/src/commons/SelectActionCard/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import { Card } from '../CardShadow';
 import Text from '../Text';
@@ -20,7 +20,7 @@ const SelectActionCard = memo(({ title, action, onPress }) => {
               {action}
             </Text>
           </View>
-          <AntDesign name="right" size={20} />
+          <IconOutline name="right" size={20} />
         </View>
       </TouchableOpacity>
     </Card>

package/src/commons/SelectSubUnit/index.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 import { API, Colors } from '../../configs';
 import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
@@ -98,7 +98,11 @@ const SelectSubUnit = ({ unitId, title, subTitle, onPressNext, route }) => {
               />
             ))}
             <TouchableOpacity style={styles.rowContainer} onPress={addSubUnit}>
-              <AntDesign name="plus-circle" size={20} color={Colors.Primary} />
+              <IconOutline
+                name="plus-circle"
+                size={20}
+                color={Colors.Primary}
+              />
               <View style={styles.row}>
                 <Text type="H4" color={Colors.Primary}>
                   {t('add_new_sub_unit')}

package/src/commons/SelectUnit/__test__/SelectUnit.test.js

@@ -1,15 +1,15 @@
+import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
-import renderer, { act } from 'react-test-renderer';
 import { Platform } from 'react-native';
-import MockAdapter from 'axios-mock-adapter';
+import renderer, { act } from 'react-test-renderer';
 
-import SelectUnit from '../index';
 import Text from '../../../commons/Text';
+import { API } from '../../../configs';
 import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
+import SelectUnit from '../index';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -103,6 +103,6 @@ describe('test single SelectUnit', () => {
     await act(async () => {
       goBack.props.onPress();
     });
-    expect(global.mockedGoBack).toBeCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
   });
 });

package/src/commons/Sharing/BtnRemoveMember.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 
 const BtnRemoveMember = memo(({ member, onPressRemove }) => {
@@ -9,7 +9,7 @@ const BtnRemoveMember = memo(({ member, onPressRemove }) => {
   }, [member, onPressRemove]);
   return (
     <TouchableOpacity style={styles.buttonRemove} onPress={onPress}>
-      <AntDesign name={'minus'} size={20} color={Colors.Gray8} />
+      <IconOutline name={'minus'} size={20} color={Colors.Gray8} />
     </TouchableOpacity>
   );
 });