@eohjsc/react-native-smart-city 0.7.3-rc2 → 0.7.3-rc21

package/src/commons/Device/HorizontalBarChart.js

@@ -1,11 +1,46 @@
-import React, { memo, useEffect, useMemo, useState } from 'react';
-import { View, StyleSheet } from 'react-native';
 import { isEmpty } from 'lodash';
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
 
 import { Colors } from '../../configs';
 import { getMaxValueIndex } from '../../utils/chartHelper/getMaxValueIndex';
 import Highcharts from '../Highcharts';
 
+// https://github.com/facebook/hermes/issues/114#issuecomment-887106990
+// 'show source' unstable, work sometime, use this to generate formatter function
+
+// function formatter() {
+//   'show source';
+//   const { unit, price } = JSON.parse(this.series.name);
+//   const textColor =
+//     this.color === '#00979D'
+//       ? this.y === 0
+//         ? '#262626'
+//         : '#FFFFFF'
+//       : '#262626';
+//   const valueStyle = `color:${textColor};font-weight:normal;font-size:12px;`;
+//   const costStyle = valueStyle + 'font-weight:bold;';
+//   let label = `<span style="${valueStyle}">` + `${this.y}${unit}`;
+//   if (price === '' || price === null || isNaN(price)) {
+//     return label + '</span>';
+//   }
+//   const formatMoney = (number) => {
+//     const formatNumber = number.toFixed();
+//     return (
+//       parseInt(formatNumber, 10)
+//         .toFixed(0)
+//         .toString()
+//         .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1.') + 'đ'
+//     );
+//   };
+//   return (
+//     label +
+//     `/<span style="${costStyle}">` +
+//     formatMoney(this.y * price) +
+//     '</span></span>'
+//   );
+// }
+
 const HorizontalBarChart = memo(({ datas, config }) => {
   const [chartOptions, setChartOptions] = useState({
     chart: {
@@ -57,38 +92,23 @@ const HorizontalBarChart = memo(({ datas, config }) => {
         dataLabels: {
           enabled: true,
           useHTML: true,
-          formatter: function () {
-            const { unit, price } = JSON.parse(this.series.name);
-            const textColor =
-              this.color === '#00979D'
-                ? this.y === 0
-                  ? '#262626'
-                  : '#FFFFFF'
-                : '#262626';
-            const valueStyle = `color:${textColor};font-weight:normal;font-size:12px;`;
-            const costStyle = valueStyle + 'font-weight:bold;';
-
-            let label = `<span style="${valueStyle}">` + `${this.y}${unit}`;
-            if (price === '' || price === null || isNaN(price)) {
-              return label + '</span>';
-            }
-
-            const formatMoney = (number) => {
-              const formatNumber = number.toFixed();
-              return (
-                parseInt(formatNumber, 10)
-                  .toFixed(0)
-                  .toString()
-                  .replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1.') + 'đ'
-              );
-            };
-            return (
-              label +
-              `/<span style="${costStyle}">` +
-              formatMoney(this.y * price) +
-              '</span></span>'
-            );
-          },
+          formatter: `function formatter() {
+    var _JSON$parse = JSON.parse(this.series.name),
+      unit = _JSON$parse.unit,
+      price = _JSON$parse.price;
+    var textColor = this.color === '#00979D' ? this.y === 0 ? '#262626' : '#FFFFFF' : '#262626';
+    var valueStyle = "color:" + textColor + ";font-weight:normal;font-size:12px;";
+    var costStyle = valueStyle + 'font-weight:bold;';
+    var label = "<span style=\\"" + valueStyle + "\\">" + ("" + this.y + unit);
+    if (price === '' || price === null || isNaN(price)) {
+      return label + '</span>';
+    }
+    var formatMoney = function formatMoney(number) {
+      var formatNumber = number.toFixed();
+      return parseInt(formatNumber, 10).toFixed(0).toString().replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, '$1.') + 'đ';
+    };
+    return label + ("/<span style=\\"" + costStyle + "\\">") + formatMoney(this.y * price) + '</span></span>';
+  }`,
           align: 'right',
           inside: false,
         },

package/src/commons/Device/ItemAddNew/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import Text from '../../Text';
 
 import { Colors } from '../../../configs';
@@ -16,7 +16,7 @@ const ItemAddNew = memo(({ title, onAddNew, wrapStyle }) => {
       <View style={[styles.container, wrapStyle]}>
         <View style={styles.boxIcon}>
           <View style={styles.buttonPlus}>
-            <AntDesign name="plus" size={22} color={Colors.Gray8} />
+            <IconOutline name="plus" size={22} color={Colors.Gray8} />
           </View>
         </View>
         <View>

package/src/commons/Device/ItemDevice.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import Routes from '../../utils/Route';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import ItemQuickAction from '../../commons/Action/ItemQuickAction';
@@ -116,7 +116,7 @@ const ItemDevice = memo(
             >
               {description || textConnected}
             </Text>
-            <AntDesign name="right" size={12} />
+            <IconOutline name="right" size={12} />
           </View>
         </TouchableOpacity>
       </ItemDeviceWrapper>

package/src/commons/Device/SonosSpeaker/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useState } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { Slider } from '@miblanchard/react-native-slider';
 
 import Text from '../../Text';
@@ -44,7 +44,7 @@ const SonosSpeaker = memo(() => {
         </TouchableOpacity>
         <View style={styles.threeButton}>
           <TouchableOpacity style={styles.buttonLeft}>
-            <AntDesign name={'backward'} size={35} color={Colors.Black} />
+            <IconOutline name={'backward'} size={35} color={Colors.Black} />
           </TouchableOpacity>
           <TouchableOpacity
             style={styles.buttonCenter}
@@ -53,7 +53,7 @@ const SonosSpeaker = memo(() => {
             {active ? <SvgButtonPauseActive /> : <SvgButtonPauseNotActive />}
           </TouchableOpacity>
           <TouchableOpacity style={styles.buttonRight}>
-            <AntDesign name={'forward'} size={35} color={Colors.Black} />
+            <IconOutline name={'forward'} size={35} color={Colors.Black} />
           </TouchableOpacity>
         </View>
       </View>

package/src/commons/Device/WaterPurifierStatus/AlertStatusMachine.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import Text from '../../../commons/Text';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const AlertStatusMachine = memo(({ message, style, icon }) => {
   return (
     <View style={[styles.container, style]}>
-      <AntDesign
+      <IconOutline
         name={icon}
         size={20}
         color={style.borderColor}

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/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';