@eohjsc/react-native-smart-city 0.6.2-rc9 → 0.7.0

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';
@@ -132,7 +132,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>

package/src/commons/IconComponent/index.js

@@ -1,4 +1,4 @@
-import { IconOutline, IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 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 (
-        <IconFill
+        <AntDesign
           name={displayIcon}
           color={colorIcon}
           size={size}
@@ -76,7 +76,7 @@ const IconComponent = memo(
           ? 'poweroff'
           : displayIcon;
       return (
-        <IconOutline
+        <AntDesign
           name={iconCT}
           color={colorIcon}
           size={size}

package/src/commons/MediaPlayerDetail/MediaPlayerFull.js

@@ -93,7 +93,7 @@ const MediaPlayerFull = ({
     <TouchableOpacity
       activeOpacity={1}
       onPress={onPause}
-      style={[isFullScreen ? styles.wrapFull : styles.wrap]}
+      style={isFullScreen ? styles.wrapFull : styles.wrap}
     >
       <Animated.View
         style={[

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

@@ -1,17 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import MediaPlayerFull from '../MediaPlayerFull';
-
-const mockSetState = jest.fn();
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    useState: jest.fn((init) => [init, mockSetState]),
-  };
-});
+import FImage from '../../FImage';
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
@@ -22,14 +15,7 @@ const wrapComponent = (props) => (
 describe('Test MediaPlayerFull', () => {
   let tree;
 
-  afterEach(() => {
-    useState.mockClear();
-  });
-
   it('Test render', async () => {
-    useState.mockImplementationOnce((init) => [false, mockSetState]);
-    useState.mockImplementationOnce((init) => [false, mockSetState]);
-    useState.mockImplementationOnce((init) => [init, mockSetState]);
     await act(async () => {
       tree = await create(
         wrapComponent({
@@ -39,44 +25,22 @@ describe('Test MediaPlayerFull', () => {
       );
     });
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities).toHaveLength(3);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities).toHaveLength(3);
+    expect(instance.findAllByType(FImage)).toHaveLength(1);
     await act(async () => {
-      TouchableOpacities[0].props.onPress();
+      touchableOpacities[0].props.onPress();
     });
-    expect(mockSetState).toBeCalledWith(false);
+    expect(instance.findAllByType(FImage)).toHaveLength(2); // paused
     await act(async () => {
-      TouchableOpacities[1].props.onPress();
-      TouchableOpacities[2].props.onPress();
+      touchableOpacities[1].props.onPress();
     });
-    expect(mockSetState).toBeCalledWith(true);
-  });
+    expect(instance.findAllByType(FImage)).toHaveLength(1); // unpaused
 
-  it('Test render 2', async () => {
-    useState.mockImplementationOnce((init) => [true, mockSetState]);
-    useState.mockImplementationOnce((init) => [true, mockSetState]);
-    useState.mockImplementationOnce((init) => [init, mockSetState]);
-    await act(async () => {
-      tree = await create(
-        wrapComponent({
-          isShowFullScreenIcon: true,
-          cameraName: 'test',
-          isPaused: true,
-          amount: 1,
-        })
-      );
-    });
-    const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities).toHaveLength(3);
-    await act(async () => {
-      TouchableOpacities[0].props.onPress();
-    });
-    expect(mockSetState).toBeCalledWith(false);
+    // full screen
     await act(async () => {
-      TouchableOpacities[1].props.onPress();
-      TouchableOpacities[2].props.onPress();
+      touchableOpacities[2].props.onPress();
     });
-    expect(mockSetState).toBeCalledWith(true);
+    expect(touchableOpacities[0].props.style?.position).toEqual('absolute');
   });
 });

package/src/commons/MenuActionAddnew/__test__/MenuActionAddNew.test.js

@@ -6,7 +6,7 @@ import { ImageButton, MenuActionAddnew } from '../../index';
 
 const wrapComponent = (dataActions) => (
   <SCProvider initState={mockSCStore({})}>
-    <MenuActionAddnew dataActions={dataActions} />
+    <MenuActionAddnew dataActions={dataActions} visible />
   </SCProvider>
 );
 

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

@@ -20,6 +20,7 @@ describe('Test MenuActionList', () => {
           listItem={listItem}
           hideModal={mockHideModal}
           onItemClick={mockOnItemClick}
+          visible
         />
       );
     });

package/src/commons/NavBar/index.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { Icon } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { View, TouchableOpacity } from 'react-native';
 
 import styles from './NavBarStyles';
@@ -40,7 +40,7 @@ const NavBar = ({
           ref={refMenuAction}
           accessibilityLabel={idLabelIconBars}
         >
-          <Icon name={'bars'} size={19} color={Colors.Black} />
+          <AntDesign 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 { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 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
                 }
               >
-                <IconOutline name="down" size={32} color={Colors.Primary} />
+                <AntDesign 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}
               >
-                <IconOutline name="up" size={32} color={Colors.Primary} />
+                <AntDesign name="up" size={32} color={Colors.Primary} />
               </TouchableOpacity>
             </View>
             <View style={styles.wrapButton}>