@eohjsc/react-native-smart-city 0.6.2 → 0.7.3-rc1

package/src/commons/Device/DisconnectedView.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -57,7 +57,7 @@ const DisconnectedView = memo(({ sensor, type, isDeviceHasBle }) => {
       </View>
       <View style={styles.disconnectSuggestionContainer} testID={'suggestions'}>
         <View style={styles.row}>
-          <IconOutline name={'alert'} size={16} />
+          <MaterialCommunityIcons name={'alert-circle-outline'} size={16} />
           <Text bold style={styles.boldText}>
             {t('suggestions')}:
           </Text>

package/src/commons/Device/Emergency/EmergencyDetail.js

@@ -6,7 +6,7 @@ import MediaPlayer from '../../MediaPlayer';
 import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { Colors, Device } from '../../../configs';
 import { RowUser } from '../../RowUser';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useEmeragencyContacts } from '../../../screens/EmergencyContacts/hook';
 import { useIsFocused } from '@react-navigation/native';
 
@@ -49,12 +49,12 @@ const EmergencyDetail = memo(({ item }) => {
               key={contact.id.toString()}
               index={index}
               leftIcon={
-                <IconOutline name={'user'} size={20} color={Colors.White} />
+                <AntDesign name={'user'} size={20} color={Colors.White} />
               }
               text={contact.name}
               rightComponent={
                 <View style={styles.rightComponent}>
-                  <IconFill
+                  <AntDesign
                     name={'phone'}
                     size={20}
                     color={Colors.Gray9}

package/src/commons/Device/Emergency/__test__/EmergencyDetail.test.js

@@ -12,11 +12,11 @@ const wrapComponent = (item) => (
   </SCProvider>
 );
 
-const mockUseIsFocused = jest.fn();
+const mockedUseIsFocused = jest.fn();
 jest.mock('@react-navigation/core', () => {
   return {
     ...jest.requireActual('@react-navigation/core'),
-    useIsFocused: mockUseIsFocused,
+    useIsFocused: mockedUseIsFocused,
   };
 });
 

package/src/commons/Device/FlatListItems.js

@@ -5,7 +5,7 @@ import AlertStatusMachine from './WaterPurifierStatus/AlertStatusMachine';
 import { useBoolean } from '../../hooks/Common';
 import Text from '../Text';
 import Routes from '../../utils/Route';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Colors, Constants } from '../../configs';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { AccessibilityLabel } from '../../configs/Constants';
@@ -75,7 +75,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
             style={styles.iconInfo}
             accessibilityLabel={AccessibilityLabel.TOUCH_INFO_FLAT_LIST_ITEM}
           >
-            <IconOutline name={'info-circle'} size={16} color={Colors.Gray8} />
+            <AntDesign name={'info-circle'} size={16} color={Colors.Gray8} />
           </TouchableOpacity>
         )}
       </View>
@@ -97,7 +97,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
           onPress={() => setViewFull(true)}
         >
           <Text style={styles.textSeeMore}>{t('see_more')}</Text>
-          <IconFill name={'caret-down'} color={Colors.Gray8} size={16} />
+          <AntDesign name={'caretdown'} color={Colors.Gray8} size={16} />
         </TouchableOpacity>
       )}
 

package/src/commons/Device/Hanet/ItemHanetDevice.js

@@ -5,7 +5,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useNavigation } from '@react-navigation/native';
 
 import Text from '../../Text';
@@ -35,7 +35,7 @@ const ItemHanetDevice = memo(
       return iconKit ? (
         <FImage source={{ uri: iconKit }} style={styles.iconSensor} />
       ) : (
-        <IconFill name={svgMain} size={32} color={Colors.Red6} />
+        <AntDesign name={svgMain} size={32} color={Colors.Red6} />
       );
     };
 
@@ -58,7 +58,7 @@ const ItemHanetDevice = memo(
               {title}
             </Text>
             <View style={styles.row}>
-              <IconOutline name="right" size={12} />
+              <AntDesign name="right" size={12} />
             </View>
           </TouchableOpacity>
         </View>

package/src/commons/Device/Hanet/ItemHanetDevice.test.js

@@ -4,6 +4,7 @@ import renderer, { act } from 'react-test-renderer';
 import ItemHanetDevice from './ItemHanetDevice';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
@@ -11,18 +12,9 @@ const wrapComponent = (props) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
 describe('Test ItemHanetDevice', () => {
   let tree, props;
+  const { navigate } = useNavigation();
 
   beforeEach(() => {
     props = {
@@ -43,7 +35,7 @@ describe('Test ItemHanetDevice', () => {
     await act(async () => {
       tree = touches[0].props.onPress();
     });
-    expect(mockNavigate).toBeCalled();
+    expect(navigate).toBeCalled();
   });
 
   it('render ItemHanetDevice sensor has icon', async () => {

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

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { TouchableWithoutFeedback, View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 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}>
-            <IconOutline name="plus" size={22} color={Colors.Gray8} />
+            <AntDesign 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 { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import ItemQuickAction from '../../commons/Action/ItemQuickAction';
@@ -21,7 +21,8 @@ const ItemDevice = memo(
   ({ description, title, sensor, unit, station, wrapStyle }) => {
     const t = useTranslations();
     const navigation = useNavigation();
-    const { is_managed_by_backend, device_type, icon_kit, icon } = sensor;
+    const { is_managed_by_backend, device_type, icon_kit, icon, quick_action } =
+      sensor;
 
     const {
       isConnected: isEoHBackendConnected,
@@ -72,24 +73,7 @@ const ItemDevice = memo(
       t,
     ]);
 
-    const canRenderQuickAction = useMemo(() => {
-      if (is_managed_by_backend) {
-        return (
-          device_type === DEVICE_TYPE.LG_THINQ ||
-          isBluetoothConnected ||
-          !isFetchingStatusFromEoHBackend
-        );
-      }
-      return device_type === DEVICE_TYPE.GOOGLE_HOME
-        ? isHomeAssistantConnected
-        : true;
-    }, [
-      device_type,
-      isBluetoothConnected,
-      isFetchingStatusFromEoHBackend,
-      isHomeAssistantConnected,
-      is_managed_by_backend,
-    ]);
+    const canRenderQuickAction = useMemo(() => !!quick_action, [quick_action]);
 
     return (
       <ItemDeviceWrapper
@@ -132,7 +116,7 @@ const ItemDevice = memo(
             >
               {description || textConnected}
             </Text>
-            <IconOutline name="right" size={12} />
+            <AntDesign 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 { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 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}>
-            <Icon name={'backward'} size={35} color={Colors.Black} />
+            <AntDesign 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}>
-            <Icon name={'forward'} size={35} color={Colors.Black} />
+            <AntDesign 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 { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 const AlertStatusMachine = memo(({ message, style, icon }) => {
   return (
     <View style={[styles.container, style]}>
-      <IconOutline
+      <AntDesign
         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 { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useNavigation } from '@react-navigation/native';
 
 import { Colors } from '../../../configs';
@@ -35,11 +35,7 @@ const QualityIndicatorItem = memo(
               onPress={() => navigation.navigate(descriptionScreen)}
               style={styles.iconInfo}
             >
-              <IconOutline
-                name={'info-circle'}
-                size={18}
-                color={Colors.Gray8}
-              />
+              <AntDesign 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 { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 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={<IconOutline name={'sync'} color={Colors.Green6} size={16} />}
+            icon={<AntDesign 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 { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -29,7 +29,7 @@ const AlertSendConfirm = ({
       bodyStyle={styles.buttonPopupBody}
     >
       <View style={styles.firstInfo}>
-        <IconOutline name="clock-circle" size={42} style={styles.clock} />
+        <AntDesign name="clockcircleo" size={42} style={styles.clock} />
         <Text semibold type="H4" style={styles.textAlertWillBe}>
           {t('alert_will_be_sent_in')}
         </Text>

package/src/commons/EmergencyButton/AlertSent.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { ButtonPopup } from '../index';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { IconFill } from '@ant-design/icons-react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -59,7 +59,11 @@ const AlertSent = ({
         type="H5"
         style={styles.location}
       >{`${unit?.name} - ${station?.name}`}</Text>
-      <IconFill name="alert" size={42} style={styles.alert} />
+      <MaterialCommunityIcons
+        name="alert-circle-outline"
+        size={42}
+        style={styles.alert}
+      />
       <Text semibold style={styles.textAlertSent}>
         {data.title}
       </Text>

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

@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useState } from 'react';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 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>
-        <IconOutline name="right" size={20} color={Colors.Gray8} />
+        <AntDesign name="right" size={20} color={Colors.Gray8} />
       </TouchableOpacity>
       <ChoosePopup
         isVisible={showFilterPopup}

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

@@ -5,7 +5,7 @@ import { mockSCStore } from '../../../../context/mockStore';
 import { SCProvider } from '../../../../context';
 import PasscodeField from '../index';
 
-const mockSetState = jest.fn();
+const mockSetDataForm = jest.fn();
 
 const wrapComponent = (
   dataItem = {
@@ -32,7 +32,7 @@ const wrapComponent = (
     <PasscodeField
       dataItem={dataItem}
       index={index}
-      setDataForm={mockSetState}
+      setDataForm={mockSetDataForm}
       dataForm={dataForm}
     />
   </SCProvider>
@@ -42,7 +42,7 @@ describe('Test PasscodeField', () => {
   let tree;
 
   afterEach(() => {
-    mockSetState.mockClear();
+    mockSetDataForm.mockClear();
   });
 
   it('render PasscodeField', async () => {
@@ -59,7 +59,7 @@ describe('Test PasscodeField', () => {
     await act(async () => {
       await inputPasscode.props.onChangeText('123');
     });
-    expect(mockSetState).toBeCalledWith([
+    expect(mockSetDataForm).toBeCalledWith([
       {
         key: 'passcode',
         type: 'passcode',
@@ -74,7 +74,7 @@ describe('Test PasscodeField', () => {
     await act(async () => {
       await inputPasscode.props.onChangeText('123456');
     });
-    expect(mockSetState).toBeCalledWith([
+    expect(mockSetDataForm).toBeCalledWith([
       {
         key: 'passcode',
         type: 'passcode',

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

@@ -6,7 +6,7 @@ import ScheduleField from '../index';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import { TouchableOpacity } from 'react-native';
 
-const mockSetState = jest.fn();
+const mockSetDataForm = jest.fn();
 
 const wrapComponent = (
   dataItem = {
@@ -41,7 +41,7 @@ const wrapComponent = (
     <ScheduleField
       dataItem={dataItem}
       index={index}
-      setDataForm={mockSetState}
+      setDataForm={mockSetDataForm}
       dataForm={dataForm}
     />
   </SCProvider>
@@ -53,7 +53,7 @@ describe('Test ScheduleField', () => {
     Date.now = jest.fn(() => new Date('2022-05-30T15:50:36+01:00'));
   });
   afterEach(() => {
-    mockSetState.mockClear();
+    mockSetDataForm.mockClear();
   });
 
   const onPressRecurring = async (instance, schedule) => {
@@ -69,7 +69,7 @@ describe('Test ScheduleField', () => {
     await act(async () => {
       await recurring.props.onPress();
     });
-    expect(mockSetState).toBeCalledWith([
+    expect(mockSetDataForm).toBeCalledWith([
       {
         key: 'schedule',
         type: 'schedule',
@@ -91,7 +91,7 @@ describe('Test ScheduleField', () => {
         action_zigbee: 4,
       },
     ]);
-    mockSetState.mockClear();
+    mockSetDataForm.mockClear();
   };
 
   const onPressTemporary = async (instance, schedule) => {
@@ -99,7 +99,7 @@ describe('Test ScheduleField', () => {
       await schedule.props.onPress();
     });
 
-    expect(mockSetState).toBeCalledWith([
+    expect(mockSetDataForm).toBeCalledWith([
       {
         key: 'schedule',
         type: 'schedule',
@@ -145,14 +145,14 @@ describe('Test ScheduleField', () => {
       await popupDateTimePickerDone.props.onPress();
     });
     expect(dateTimePicker.props.isVisible).toBeFalsy();
-    mockSetState.mockClear();
+    mockSetDataForm.mockClear();
   };
 
   it('render ScheduleField choose schedule', async () => {
     await act(async () => {
       tree = await create(wrapComponent());
     });
-    expect(mockSetState).toBeCalledWith([
+    expect(mockSetDataForm).toBeCalledWith([
       {
         key: 'schedule',
         type: 'schedule',
@@ -169,7 +169,7 @@ describe('Test ScheduleField', () => {
         action_zigbee: 2,
       },
     ]);
-    mockSetState.mockClear();
+    mockSetDataForm.mockClear();
     const instance = tree.root;
     const schedule = instance.findAll(
       (el) =>

package/src/commons/Form/CurrencyInput.js

@@ -1,10 +1,4 @@
-import React, {
-  useState,
-  useRef,
-  useCallback,
-  useMemo,
-  useEffect,
-} from 'react';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
 import {
   View,
   TextInput,
@@ -12,7 +6,6 @@ import {
   TouchableWithoutFeedback,
   Platform,
 } from 'react-native';
-import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
@@ -133,13 +126,6 @@ const CurrencyInput = ({
     return textInputValue.toString().length < 2 ? -12 : 0;
   }, [textInputValue]);
 
-  useEffect(() => {
-    const isAndroid = Platform.OS === 'android';
-    isAndroid && AndroidKeyboardAdjust.setAdjustResize();
-
-    return () => isAndroid && AndroidKeyboardAdjust.setAdjustPan();
-  }, []);
-
   return (
     <TouchableWithoutFeedback onPress={focusInput}>
       <View style={styles.wrap}>

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

@@ -1,22 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { act, create } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
 
 import { AccessibilityLabel } from '../../../configs/Constants';
 import GroupCheckBox from '..';
 
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useState: jest.fn(),
-}));
-
 describe('Test Group CheckBox', () => {
   let tree;
-  const mockSetState = () => {
-    const setState = jest.fn();
-    useState.mockImplementation((init) => [init, setState]);
-    return setState;
-  };
 
   const findGroupCheckBoxItem = (instance) => {
     const item = instance.find(
@@ -34,7 +24,6 @@ describe('Test Group CheckBox', () => {
         description: 'description',
       },
     ];
-    mockSetState();
     await act(async () => {
       tree = await create(<GroupCheckBox data={data} />);
     });
@@ -51,7 +40,6 @@ describe('Test Group CheckBox', () => {
       },
     ];
     const mockFunc = jest.fn();
-    const setState = mockSetState();
     await act(async () => {
       tree = await create(
         <GroupCheckBox data={data} onSelect={mockFunc} multiple />
@@ -62,9 +50,6 @@ describe('Test Group CheckBox', () => {
     await act(async () => {
       item.props.onSelect(0);
     });
-    expect(setState).toHaveBeenCalledTimes(2);
-    expect(setState).toHaveBeenNthCalledWith(1, [0]);
-    expect(setState).toHaveBeenNthCalledWith(2, [0]);
     expect(mockFunc).toHaveBeenCalledWith([
       { description: 'description', source: 'source', title: 'testItem' },
     ]);
@@ -85,7 +70,6 @@ describe('Test Group CheckBox', () => {
       },
     ];
     const mockFunc = jest.fn();
-    const setState = mockSetState();
     await act(async () => {
       tree = await create(<GroupCheckBox data={data} onSelect={mockFunc} />);
     });
@@ -94,8 +78,6 @@ describe('Test Group CheckBox', () => {
     await act(async () => {
       item.props.onSelect(0);
     });
-    expect(setState).toHaveBeenNthCalledWith(1, [0]);
-    expect(setState).toHaveBeenNthCalledWith(2, [0]);
     expect(mockFunc).toHaveBeenCalledWith({
       description: 'description 1',
       title: 'title 1',
@@ -114,8 +96,6 @@ describe('Test Group CheckBox', () => {
       },
     ];
     const mockFunc = jest.fn();
-    const setState = jest.fn();
-    useState.mockImplementation((init) => [[0], setState]);
     await act(async () => {
       tree = await create(<GroupCheckBox data={data} onSelect={mockFunc} />);
     });
@@ -128,7 +108,6 @@ describe('Test Group CheckBox', () => {
     await act(async () => {
       items[1].props.onSelect(0);
     });
-    expect(setState).toHaveBeenCalledWith([]); // called 1 time
     expect(mockFunc).toHaveBeenCalledWith({
       description: 'description 1',
       title: 'title 1',

package/src/commons/Header/HeaderCustom.js

@@ -2,7 +2,8 @@ import React, { useCallback, useRef } from 'react';
 import { View, Text, TouchableOpacity, Image } from 'react-native';
 import Images from '../../configs/Images';
 import { Colors } from '../../configs';
-import { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation } from '@react-navigation/native';
 import styles from './Styles/HeaderCustomStyles';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -98,7 +99,11 @@ const HeaderCustom = ({
               accessibilityLabel={AccessibilityLabel.MENU_POPPER_MORE}
             >
               <View style={styles.buttonBack}>
-                <Icon name={'more'} size={27} color={Colors.Black} />
+                <MaterialIcons
+                  name={'more-vert'}
+                  size={27}
+                  color={Colors.Black}
+                />
               </View>
             </TouchableOpacity>
           </>
@@ -106,7 +111,7 @@ const HeaderCustom = ({
         {isShowClose && (
           <TouchableOpacity onPress={handleClose}>
             <View style={styles.buttonAdd}>
-              <Icon name={'close'} size={24} color={Colors.Black} />
+              <AntDesign name={'close'} size={24} color={Colors.Black} />
             </View>
           </TouchableOpacity>
         )}

package/src/commons/HeaderAni/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback } from 'react';
-import { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 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}>
-              <Icon name={'left'} size={27} color={Colors.Gray9} />
+              <AntDesign name={'left'} size={27} color={Colors.Gray9} />
             </View>
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>