@eohjsc/react-native-smart-city 0.5.8 → 0.6.0-rc1

package/src/commons/Dashboard/MyPinnedSharedUnit/__test__/MyPinnedSharedUnit.test.js

@@ -16,19 +16,8 @@ import { Action } from '../../../../context/actionType';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedNavigate = jest.fn();
 const mockSetAction = jest.fn();
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: () => true,
-  };
-});
-
 jest.mock('react', () => {
   return {
     ...jest.requireActual('react'),
@@ -74,7 +63,7 @@ describe('Test MyPinnedSharedUnit', () => {
     await act(async () => {
       goToAllSharedUnits.props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalled();
+    expect(global.mockedNavigate).toHaveBeenCalled();
     expect(mockSetAction).toBeCalledWith(
       Action.IS_CHECK_CLEAR_CACHE_UNITS,
       false

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -10,22 +10,12 @@ import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
 import { API } from '../../../../configs';
 import Routes from '../../../../utils/Route';
+import { flushPromises } from '../../../../screens/AllGateway/test-utils';
+import FastImage from 'react-native-fast-image';
+import { removeMultiple, STORAGE_KEY } from '../../../../utils/Storage';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockedNavigate = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: () => true,
-    useFocusEffect: jest.fn(),
-  };
-});
-
 const wrapComponent = (data = {}) => (
   <SCProvider initState={mockSCStore(data)}>
     <MyUnit refreshing={true} />
@@ -34,7 +24,7 @@ const wrapComponent = (data = {}) => (
 
 describe('Test MyUnit', () => {
   let tree;
-  let storeData = {
+  let stateData = {
     app: { isDeleteUnitSuccessFully: true, isNeedUpdateCache: true },
   };
   let data = [
@@ -69,9 +59,10 @@ describe('Test MyUnit', () => {
     },
   ];
 
-  beforeEach(() => {
+  beforeEach(async () => {
     mock.resetHistory();
-    mockedNavigate.mockClear();
+    FastImage.preload.mockClear();
+    await removeMultiple([STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS]);
   });
 
   const getElement = (instance) => {
@@ -89,7 +80,7 @@ describe('Test MyUnit', () => {
 
   it('MyUnit no Unit', async () => {
     await act(async () => {
-      tree = await renderer.create(wrapComponent(storeData));
+      tree = await renderer.create(wrapComponent(stateData));
     });
     const instance = tree.root;
     const { textNoUnit } = getElement(instance);
@@ -99,8 +90,9 @@ describe('Test MyUnit', () => {
   it('MyUnit with unit', async () => {
     mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, data);
     await act(async () => {
-      tree = await renderer.create(wrapComponent(storeData));
+      tree = await renderer.create(wrapComponent(stateData));
     });
+    await flushPromises();
     const instance = tree.root;
     const devices = instance.findAllByType(MyUnitDevice);
     expect(devices).toHaveLength(2);
@@ -111,7 +103,7 @@ describe('Test MyUnit', () => {
     await act(async () => {
       await button.props.onPress(data[0]);
     });
-    expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
+    expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
       params: { unitId: 1 },
       screen: Routes.UnitDetail,
     });
@@ -131,9 +123,24 @@ describe('Test MyUnit', () => {
     await act(async () => {
       await button.props.onPress(data[1]);
     });
-    expect(mockedNavigate).toBeCalledWith('UnitStack', {
+    expect(global.mockedNavigate).toBeCalledWith('UnitStack', {
       params: { unitId: 2 },
       screen: 'UnitDetail',
     });
   });
+
+  it('Test preload image', async () => {
+    mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, [data[1]]);
+    mock.onGet(API.UNIT.UNIT_DETAIL(2)).replyOnce(200, {
+      stations: [{ background: 'background' }],
+    });
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ app: { isNeedUpdateCache: false } })
+      );
+    });
+    expect(FastImage.preload).toHaveBeenCalledWith([
+      { uri: 'background', priority: FastImage.priority.high },
+    ]);
+  });
 });

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

@@ -208,7 +208,6 @@ const MyUnit = ({ refreshing }) => {
         <View style={styles.container}>
           {myUnits.length ? (
             <Carousel
-              ref={carouselRef}
               layout={'default'}
               data={myUnits}
               sliderWidth={screenWidth}

package/src/commons/DateTimeRangeChange/DateTimeButton.js

@@ -1,13 +1,13 @@
 import React, { memo } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Colors } from '../../configs';
 
 const DateTimeButton = memo(({ onPress, style, children }) => {
   return (
     <TouchableOpacity style={[styles.dateSelect, style]} onPress={onPress}>
       {children}
-      <IconOutline style={styles.iconDateTime} name={'calendar'} />
+      <AntDesign style={styles.iconDateTime} name={'calendar'} />
     </TouchableOpacity>
   );
 });

package/src/commons/Device/ConnectedViewHeader.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 AntDesign from 'react-native-vector-icons/AntDesign';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -30,7 +30,7 @@ const ConnectedViewHeader = memo(
     return (
       <View style={styles.statusContainer}>
         <View style={styles.connectStatus}>
-          <IconOutline name={'wifi'} color={Colors.Green6} size={16} />
+          <AntDesign name={'wifi'} color={Colors.Green6} size={16} />
           <DisplayTextConnected type={type} />
         </View>
         {isDisplayTime && (

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 AntDesign from 'react-native-vector-icons/AntDesign';
 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} />
+          <AntDesign name={'alert'} 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/HorizontalBarChart.js

@@ -123,7 +123,7 @@ const HorizontalBarChart = memo(({ datas, config }) => {
         y: item.y,
       };
     });
-    const dataX = (datas[0].data || []).map((item) => item.x);
+    const dataX = (datas[0]?.data || []).map((item) => item.x);
     const maxY = getMaxValueIndex(dataY);
     if (!isEmpty(maxY.max)) {
       dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });

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';
@@ -146,7 +146,7 @@ const ItemDevice = memo(
             >
               {description || textConnected}
             </Text>
-            <IconOutline name="right" size={12} />
+            <AntDesign name="right" size={12} />
           </View>
         </TouchableOpacity>
       </ItemDeviceWrapper>

package/src/commons/Device/PowerConsumptionChart.js

@@ -0,0 +1,154 @@
+import React, { memo, useCallback, useState, useMemo, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import moment from 'moment';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+import { Colors } from '../../configs';
+import Text from '../Text';
+import Button from '../Button';
+import CurrencyInput from '../Form/CurrencyInput';
+import DateTimeRangeChange from '../DateTimeRangeChange';
+import HorizontalBarChart from './HorizontalBarChart';
+import ChartAggregationOption from '../ChartAggregationOption';
+import { formatMoney } from '../../utils/Utils';
+
+const PowerConsumptionChart = memo(
+  ({
+    datas,
+    chartConfig,
+    setChartConfig,
+    style,
+    groupBy,
+    setGroupBy,
+    onChangeDate,
+  }) => {
+    const t = useTranslations();
+    const [price, setPrice] = useState(null);
+
+    const onCalculateCost = useCallback(() => {
+      setChartConfig((config) => ({
+        ...config,
+        price,
+      }));
+    }, [setChartConfig, price]);
+
+    const totalPrice = useMemo(() => {
+      const { price: chartPrice } = chartConfig;
+      if (chartPrice === '' || isNaN(chartPrice)) {
+        return null;
+      }
+      const sum = datas[0].data.reduce((a, b) => a + b.y, 0);
+      const roundedSum = sum * chartPrice;
+      return roundedSum.toFixed();
+    }, [datas, chartConfig]);
+
+    const renderChart = useMemo(() => {
+      return <HorizontalBarChart datas={datas} config={chartConfig} />;
+    }, [chartConfig, datas]);
+
+    const [value, setValue] = useState([
+      moment().subtract(6, 'days'),
+      moment(),
+    ]);
+
+    useEffect(() => {
+      onChangeDate(value[0], value[1]);
+    }, [onChangeDate, value]);
+
+    const selectStart = (date) => {
+      setValue((state) => [date, state[1]]);
+    };
+    const selectEnd = (date) => {
+      setValue((state) => [state[0], date]);
+    };
+
+    return (
+      <View style={style}>
+        <View style={styles.historyView}>
+          <View style={styles.titleHistory}>
+            <Text size={20} semibold color={Colors.Gray9}>
+              {t('history')}
+            </Text>
+
+            <ChartAggregationOption groupBy={groupBy} setGroupBy={setGroupBy} />
+          </View>
+          {groupBy === 'date' && (
+            <DateTimeRangeChange
+              startTime={value[0]}
+              endTime={value[1]}
+              selectStart={selectStart}
+              selectEnd={selectEnd}
+            />
+          )}
+        </View>
+
+        <View style={styles.wrapCalculateCost}>
+          <Text type="H4">
+            {t('input_price_to_calculate_electricity_cost')}
+          </Text>
+          <View style={styles.row}>
+            <CurrencyInput
+              value={price}
+              onChange={setPrice}
+              minValue={0}
+              maxValue={100000000}
+              placeholder={'0'}
+              onSubmitEditing={onCalculateCost}
+            />
+            <Button
+              type="primary"
+              title={t('calculate_cost')}
+              onPress={onCalculateCost}
+              style={styles.buttonCalculate}
+              textSemiBold={false}
+            />
+          </View>
+        </View>
+
+        {renderChart}
+        {!!chartConfig.price && (
+          <Text type="H4">
+            {t('total_power_price')} <Text bold>{formatMoney(totalPrice)}</Text>
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+
+export default PowerConsumptionChart;
+
+const styles = StyleSheet.create({
+  historyView: {
+    paddingTop: 16,
+  },
+  titleHistory: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  chartInfo: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  chartContainer: {
+    marginLeft: -8,
+  },
+  chart: {
+    height: 300,
+  },
+  wrapCalculateCost: {
+    marginTop: 12,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonCalculate: {
+    width: null,
+    flex: null,
+    paddingHorizontal: 12,
+  },
+});

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="clock-circle" 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 AntDesign from 'react-native-vector-icons/AntDesign';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -59,7 +59,7 @@ const AlertSent = ({
         type="H5"
         style={styles.location}
       >{`${unit?.name} - ${station?.name}`}</Text>
-      <IconFill name="alert" size={42} style={styles.alert} />
+      <AntDesign name="alert" 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}