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

package/README.md

@@ -191,7 +191,7 @@ export const MyFunctionalComponent = () => {
     command_prefer_over_googlehome: false,
     command_prefer_over_internet: false,
     googlehome_actions: [],
-    icon: 'caret-up',
+    icon: 'caretup',
     icon_kit: null,
     id: 1,
     key: '24240de0-5c8e-11ec-bf63-0242ac130002',

package/android/build.gradle

@@ -20,7 +20,7 @@ def safeExtGet(prop, fallback) {
 }
 
 apply plugin: 'com.android.library'
-apply plugin: 'maven'
+apply plugin: 'maven-publish'
 
 buildscript {
     // The Android Gradle plugin is only required when opening the android folder stand-alone.
@@ -38,9 +38,6 @@ buildscript {
     }
 }
 
-apply plugin: 'com.android.library'
-apply plugin: 'maven'
-
 android {
     compileSdkVersion safeExtGet('compileSdkVersion', DEFAULT_COMPILE_SDK_VERSION)
     buildToolsVersion safeExtGet('buildToolsVersion', DEFAULT_BUILD_TOOLS_VERSION)
@@ -109,7 +106,7 @@ afterEvaluate { project ->
     task androidJavadoc(type: Javadoc) {
         source = android.sourceSets.main.java.srcDirs
         classpath += files(android.bootClasspath)
-        classpath += files(project.getConfigurations().getByName('compile').asList())
+//         classpath += files(project.getConfigurations().getByName('compile').asList())
         include '**/*.java'
     }
 
@@ -140,10 +137,10 @@ afterEvaluate { project ->
 
     task installArchives(type: Upload) {
         configuration = configurations.archives
-        repositories.mavenDeployer {
-            // Deploy to react-native-event-bridge/maven, ready to publish to npm
-            repository url: "file://${projectDir}/../android/maven"
-            configureReactNativePom pom
-        }
+//         repositories.mavenDeployer {
+//             // Deploy to react-native-event-bridge/maven, ready to publish to npm
+//             repository url: "file://${projectDir}/../android/maven"
+//             configureReactNativePom pom
+//         }
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -61,45 +61,10 @@
   "author": "Your Name <yourname@email.com>",
   "license": "MIT",
   "licenseFilename": "LICENSE",
-  "peerDependencies": {
-    "@react-native-community/clipboard": "*",
-    "react": "*",
-    "react-native": "*"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/runtime": "^7.12.5",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "@types/jest": "^26.0.19",
-    "@types/react": "^17.0.0",
-    "@types/react-native": "^0.63.43",
-    "@types/react-test-renderer": "^17.0.0",
-    "axios-mock-adapter": "^1.21.1",
-    "babel-jest": "^26.6.3",
-    "detox": "^18.3.1",
-    "eslint": "7.14.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-native": "^3.10.0",
-    "factory-girl": "^5.0.4",
-    "husky": "^8.0.1",
-    "jest": "^26.6.3",
-    "jest-circus": "^26.6.3",
-    "jetifier": "^1.6.6",
-    "lint-staged": "^12.4.1",
-    "metro-react-native-babel-preset": "^0.66.2",
-    "node-html-parser": "^2.0.2",
-    "react": "17.0.2",
-    "react-native": "0.66.0",
-    "react-native-svg-transformer": "^0.14.3",
-    "react-test-renderer": "17.0.2",
-    "reactotron-react-native": "^3.6.4",
-    "typescript": "^4.1.3"
-  },
   "dependencies": {
-    "@ant-design/icons-react-native": "^2.2.1",
-    "@ant-design/react-native": "^4.0.5",
+    "@babel/core": "^7.12.9",
     "@babel/helper-environment-visitor": "^7.16.7",
+    "@babel/runtime": "^7.12.5",
     "@eohjsc/react-native-keyboard-aware-scroll-view": "^0.9.5",
     "@formatjs/intl-getcanonicallocales": "^1.4.5",
     "@formatjs/intl-numberformat": "^5.6.2",
@@ -107,55 +72,71 @@
     "@invertase/react-native-apple-authentication": "^1.1.2",
     "@messageformat/core": "^3.0.0",
     "@miblanchard/react-native-slider": "^2.2.0",
-    "@react-native-clipboard/clipboard": "^1.11.1",
-    "@react-native-community/async-storage": "^1.12.1",
-    "@react-native-community/cameraroll": "^4.0.0",
-    "@react-native-community/checkbox": "^0.5.5",
+    "@react-native-async-storage/async-storage": "^1.23.1",
+    "@react-native-clipboard/clipboard": "^1.14.1",
+    "@react-native-community/checkbox": "^0.5.17",
     "@react-native-community/datetimepicker": "https://github.com/hinh-eoh/datepicker",
+    "@react-native-community/eslint-config": "^2.0.0",
     "@react-native-community/geolocation": "^2.0.2",
-    "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/netinfo": "^9.3.4",
-    "@react-native-community/segmented-control": "^2.1.1",
     "@react-native-community/slider": "^3.0.3",
     "@react-native-community/toolbar-android": "^0.1.0-rc.2",
-    "@react-native-picker/picker": "^1.16.7",
-    "@react-navigation/bottom-tabs": "^5.8.0",
-    "@react-navigation/drawer": "^5.9.0",
-    "@react-navigation/native": "^5.7.0",
-    "@react-navigation/stack": "^5.7.0",
-    "@sentry/react-native": "^1.7.1",
+    "@react-native-segmented-control/segmented-control": "^2.5.2",
+    "@react-navigation/bottom-tabs": "^6.5.20",
+    "@react-navigation/drawer": "^6.6.15",
+    "@react-navigation/native": "^6.1.17",
+    "@react-navigation/stack": "^6.3.29",
+    "@sentry/react-native": "^5.24.1",
     "@testing-library/react-hooks": "^6.0.0",
+    "@types/jest": "^26.0.19",
+    "@types/react": "^17.0.0",
+    "@types/react-native": "^0.63.43",
+    "@types/react-test-renderer": "^17.0.0",
     "apisauce": "^2.1.5",
     "axios": "^0.19.2",
+    "axios-mock-adapter": "^1.21.1",
+    "babel-jest": "^26.6.3",
     "base-64": "^1.0.0",
     "deprecated-react-native-prop-types": "^2.3.0",
+    "detox": "^18.3.1",
     "dotenv": "^8.2.0",
+    "eslint": "7.14.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-native": "^3.10.0",
+    "factory-girl": "^5.0.4",
     "google-libphonenumber": "^3.2.10",
     "home-assistant-js-websocket": "^5.7.0",
+    "husky": "^8.0.1",
     "i18n-js": "^3.7.1",
     "i18next": "^20.1.0",
+    "jest": "^26.6.3",
+    "jest-circus": "^26.6.3",
+    "jetifier": "^1.6.6",
+    "lint-staged": "^12.4.1",
     "lodash": "^4.17.19",
-    "lottie-react-native": "4.0.3",
+    "lottie-react-native": "^6.7.2",
+    "metro-react-native-babel-preset": "^0.66.2",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.32",
+    "node-html-parser": "^2.0.2",
     "numeral": "^2.0.6",
     "patch-package": "^6.2.2",
     "pluralize": "^8.0.0",
     "postinstall": "^0.7.0",
     "precompiled-mqtt": "^4.3.14-beta",
-    "pusher-js": "^7.4.0",
+    "pusher-js": "^8.4.0-rc2",
     "pusher-js-auth": "^4.0.1",
     "python-struct": "^1.1.3",
     "querystring": "^0.2.0",
+    "react": "18.2.0",
     "react-content-loader": "^6.0.3",
-    "react-dom": "^17.0.1",
-    "react-hooks-global-state": "^2.0.0",
+    "react-dom": "18.2.0",
+    "react-hooks-global-state": "^2.1.0",
     "react-i18next": "^11.8.12",
+    "react-native": "0.71.19",
     "react-native-alert-async": "^1.0.5",
-    "react-native-android-keyboard-adjust": "^1.2.0",
     "react-native-android-location-enabler": "^1.2.2",
-    "react-native-android-wifi": "^0.0.41",
-    "react-native-appearance": "^0.3.4",
     "react-native-base64": "^0.1.0",
     "react-native-ble-plx": "^2.0.3",
     "react-native-bootsplash": "^2.2.5",
@@ -167,9 +148,9 @@
     "react-native-deep-linking": "^2.2.0",
     "react-native-device-info": "^10.3.0",
     "react-native-draggable-flatlist": "^2.6.2",
-    "react-native-fast-image": "^8.3.2",
+    "react-native-fast-image": "^8.6.3",
     "react-native-geocoder": "^0.5.0",
-    "react-native-gesture-handler": "^1.7.0",
+    "react-native-gesture-handler": "^2.17.1",
     "react-native-get-location": "^2.0.0",
     "react-native-image-crop-picker": "^0.37.2",
     "react-native-image-resizer": "^1.4.5",
@@ -177,40 +158,42 @@
     "react-native-iphone-x-helper": "^1.2.1",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-localize": "^1.4.1",
-    "react-native-maps": "0.27.1",
-    "react-native-maps-directions": "^1.8.0",
-    "react-native-modal": "^11.5.6",
-    "react-native-modal-datetime-picker": "^8.9.3",
+    "react-native-maps": "^1.15.6",
+    "react-native-modal": "^13.0.1",
+    "react-native-modal-datetime-picker": "^17.1.0",
     "react-native-new-snap-carousel": "^3.9.3",
     "react-native-onesignal": "^4.3.1",
     "react-native-pager-view": "^5.4.1",
     "react-native-parallax-scroll-view": "^0.21.3",
     "react-native-parsed-text": "^0.0.22",
     "react-native-permissions": "3.6.0",
-    "react-native-popover-view": "^4.0.3",
+    "react-native-popover-view": "^5.1.8",
     "react-native-progress": "^5.0.0",
-    "react-native-reanimated": "1.10.1",
+    "react-native-reanimated": "2",
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
-    "react-native-screens": "^2.9.0",
+    "react-native-screens": "^3.32.0",
     "react-native-super-grid": "^4.0.3",
     "react-native-svg": "^12.1.0",
+    "react-native-svg-transformer": "^0.14.3",
     "react-native-toast-message": "^2.1.1",
-    "react-native-udp": "4.1.3",
+    "react-native-udp": "^4.1.7",
+    "react-native-vector-icons": "^10.1.0",
     "react-native-version-check": "^3.4.2",
     "react-native-vlc-media-player": "^1.0.67",
-    "react-native-webview": "11.22.7",
+    "react-native-webview": "^12.0.2",
     "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",
     "react-native-wifi-reborn": "4.5.0",
-    "react-navigation": "^2.2.0",
+    "react-test-renderer": "18.2.0",
     "string-format": "^2.0.0",
     "sync-directory": "^5.1.7",
     "timezone-mock": "^1.1.3",
+    "typescript": "^4.1.3",
     "uuid-by-string": "^3.0.2",
     "uuidv4": "^6.2.13",
     "validator": "^13.1.1",
-    "victory-native": "^35.0.1"
+    "victory-native": "^41.0.1"
   },
   "bugs": {
     "url": "https://github.com/github_account/react-native-smart-city/issues"

package/src/commons/Action/__test__/ItemQuickAction.test.js

@@ -6,8 +6,8 @@ import { Colors } from '../../../configs';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import { factory } from 'factory-girl';
 import IconComponent from '../../IconComponent';
-import { IconOutline } from '@ant-design/icons-react-native';
 import Toast from 'react-native-toast-message';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 class Sensor {}
 
 factory.define('Sensor', Sensor, {});
@@ -94,7 +94,7 @@ describe('Test ItemQuickAction', () => {
       await buttonOnActionPress.props.onPress();
     });
 
-    const icon = instance.findByType(IconOutline);
+    const icon = instance.findByType(AntDesign);
     expect(icon.props.color).toEqual(Colors.TextGray);
   });
 

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { View, TouchableOpacity, ActivityIndicator } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Colors } from '../../configs';
 
 import Text from '../Text';
@@ -116,7 +116,7 @@ const NumberUpDownActionTemplate = ({
           onPress={doActionDown}
           accessibilityLabel={AccessibilityLabel.NUMBER_ACTION_DOWN}
         >
-          <IconOutline name="down" size={32} color={Colors.Primary} />
+          <AntDesign name="down" size={32} color={Colors.Primary} />
         </TouchableOpacity>
 
         <Text accessibilityLabel={'text_format'} type="H2">
@@ -132,7 +132,7 @@ const NumberUpDownActionTemplate = ({
           onPress={doActionUp}
           accessibilityLabel={AccessibilityLabel.NUMBER_ACTION_UP}
         >
-          <IconOutline name="up" size={32} color={Colors.Primary} />
+          <AntDesign name="up" size={32} color={Colors.Primary} />
         </TouchableOpacity>
       </View>
     </View>

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/ButtonWrapper.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Switch, View } from 'react-native';
 import styles from './ButtonWrapperStyles';
 import Text from '../../../Text';
@@ -28,7 +28,7 @@ const ButtonWrapper = memo(
           </View>
         ) : (
           <View style={styles.wrapHeadline}>
-            <IconOutline name={'lock'} size={20} color={Colors.Gray9} />
+            <AntDesign name={'lock'} size={20} color={Colors.Gray9} />
             <Text style={styles.textAutoLock}>
               {isButtonEnable ? t('auto_lock_enabled') : t('auto_lock_when')}
             </Text>
@@ -49,7 +49,7 @@ const ButtonWrapper = memo(
             <Text type="Body" style={styles.textValue}>
               {t('instant')}
             </Text>
-            <IconOutline name="right" size={20} color={Colors.Gray7} />
+            <AntDesign name="right" size={20} color={Colors.Gray7} />
           </View>
         )}
         {isButtonReLockTiming && (

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/__test__/ItemPasscode.test.js

@@ -18,7 +18,7 @@ describe('Test ItemPasscode', () => {
       tree = await create(wrapComponent());
     });
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities).toHaveLength(2);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities).toHaveLength(2);
   });
 });

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/__test__/index.test.js

@@ -18,10 +18,10 @@ const wrapComponent = () => (
 describe('Test SetupGeneratePasscode', () => {
   let tree;
 
-  const mockNavigate = useNavigation().navigate;
+  const mockedNavigate = useNavigation().navigate;
 
   beforeEach(() => {
-    mockNavigate.mockClear();
+    mockedNavigate.mockClear();
   });
 
   it('render PasscodeList', async () => {
@@ -41,7 +41,7 @@ describe('Test SetupGeneratePasscode', () => {
     await act(async () => {
       await passcode_list[0].props.onPress();
     });
-    expect(mockNavigate).toBeCalledWith(Routes.SmartLockStack, {
+    expect(global.mockedNavigate).toBeCalledWith(Routes.SmartLockStack, {
       screen: Routes.ItemPasscode,
       params: {
         item: { code: 123361, name: 'Do Loi' },

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { TextInput, View, 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 Text from '../../../Text';
@@ -39,7 +39,7 @@ const PasscodeList = memo(() => {
       <View style={styles.wrap}>
         <View style={styles.searchBox}>
           <View>
-            <IconOutline name="search" size={24} style={styles.search} />
+            <AntDesign name="search" size={24} style={styles.search} />
           </View>
           <TextInput
             placeholder={t('search')}
@@ -58,7 +58,7 @@ const PasscodeList = memo(() => {
               <Text style={styles.textCode}>{item.code}</Text>
               <Text style={styles.textName}>{item.name}</Text>
             </View>
-            <IconOutline name="right" size={20} color={Colors.Gray8} />
+            <AntDesign name="right" size={20} color={Colors.Gray8} />
           </TouchableOpacity>
         ))}
       </View>

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/ButtonWrapper.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Text, TouchableOpacity, View } from 'react-native';
 
 import { RadioCircle } from '../../..';
@@ -50,7 +50,7 @@ const ButtonWrapper = memo(
         {isButtonChooseUser && (
           <TouchableOpacity style={styles.buttonValue}>
             <Text style={styles.value}>{value}</Text>
-            <IconOutline name="right" size={20} color={Colors.Gray8} />
+            <AntDesign name="right" size={20} color={Colors.Gray8} />
           </TouchableOpacity>
         )}
         {isButtonSetTime && (

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/__test__/index.test.js

@@ -7,17 +7,6 @@ import { AccessibilityLabel } from '../../../../../configs/Constants';
 import { SCProvider } from '../../../../../context';
 import WheelDateTimePicker from '../../../../WheelDateTimePicker';
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
     <SetupGeneratePasscode />
@@ -27,10 +16,6 @@ const wrapComponent = () => (
 describe('Test SetupGeneratePasscode', () => {
   let tree;
 
-  beforeEach(() => {
-    mockNavigate.mockClear();
-  });
-
   const getElement = (instance) => {
     const changeName = instance.findAll(
       (item) =>

package/src/commons/ActionGroup/OnOffTemplate/OnOffSimpleTemplate.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Switch } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 import Text from '../../Text';
 import styles from './OnOffSimpleTemplateStyle';
@@ -15,7 +15,7 @@ const OnOffSimpleTemplate = ({
   return (
     <View style={styles.wrap}>
       <View style={styles.iconAndText}>
-        <IconOutline name="poweroff" size={20} style={styles.marginRight} />
+        <AntDesign name="poweroff" size={20} style={styles.marginRight} />
         <Text type="H4">{actionGroup.title}</Text>
       </View>
       {isOn !== null && (

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { View, TouchableOpacity, ScrollView } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Colors } from '../../configs';
 
 import Text from '../../commons/Text';
@@ -139,7 +139,7 @@ const OptionsDropdownActionTemplate = ({
         >
           {displaySelected}
         </Text>
-        <IconOutline name="right" size={20} />
+        <AntDesign name="right" size={20} />
       </TouchableOpacity>
       <AlertAction
         visible={stateAlert.visible}

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -5,7 +5,7 @@ import styles from './SmartTiviActionTemplateStyles';
 import Text from '../../Text';
 import { Colors } from '../../../configs';
 import { SMART_TIVI_BUTTON } from '../../../configs/Constants';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import CircleButton from './component/CircleButton';
 import RectangleButton from './component/RectangleButton';
 import ControlPlay from './component/ControlPlay';
@@ -97,7 +97,7 @@ const SmartTiviActionTemplate = memo(
               <CircleButton
                 type="small"
                 icon={
-                  <IconOutline
+                  <AntDesign
                     name="poweroff"
                     size={20}
                     color={Colors.Gray6}

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/CircleButton.js

@@ -3,7 +3,7 @@ import { TouchableOpacity, View, Image } from 'react-native';
 import styles from './CircleButtonStyles';
 import Text from '../../../Text';
 import { Colors, Images } from '../../../../configs';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const CircleButton = memo(
@@ -46,7 +46,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.UP_BUTTON
                 }
               >
-                <IconOutline size={14} name={'caret-up'} />
+                <AntDesign size={14} name={'caretup'} />
               </TouchableOpacity>
             </View>
             <View style={styles.bodyMultipleButton}>
@@ -57,7 +57,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.LEFT_BUTTON
                 }
               >
-                <IconOutline size={14} name={'caret-left'} />
+                <AntDesign size={14} name={'caretleft'} />
               </TouchableOpacity>
               <TouchableOpacity
                 style={[styles.okButton]}
@@ -77,7 +77,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.RIGHT_BUTTON
                 }
               >
-                <IconOutline size={14} name={'caret-right'} />
+                <AntDesign size={14} name={'caret-right'} />
               </TouchableOpacity>
             </View>
             <View style={styles.footerMultipleButton}>
@@ -88,7 +88,7 @@ const CircleButton = memo(
                   AccessibilityLabel.SMART_TIVI_TEMPLATE.DOWN_BUTTON
                 }
               >
-                <IconOutline size={14} name={'caret-down'} />
+                <AntDesign size={14} name={'caretdown'} />
               </TouchableOpacity>
             </View>
           </View>

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/ControlPlay.js

@@ -6,7 +6,7 @@ import styles from './ControlPlayStyles';
 import { Pause } from './Icon';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 const ControlPlay = memo(
   ({ onPressPrev, onPressStop, onPressNext, wrapStyle }) => {
@@ -19,9 +19,9 @@ const ControlPlay = memo(
             AccessibilityLabel.SMART_TIVI_TEMPLATE.PREV_BUTTON
           }
         >
-          <IconOutline
+          <AntDesign
             size={32}
-            name={'backward'}
+            name={'stepbackward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />
@@ -42,9 +42,9 @@ const ControlPlay = memo(
             AccessibilityLabel.SMART_TIVI_TEMPLATE.NEXT_BUTTON
           }
         >
-          <IconOutline
+          <AntDesign
             size={32}
-            name={'forward'}
+            name={'stepforward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -6,7 +6,7 @@ import React, {
   useState,
 } 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 Text from '../../commons/Text';
 import { useConfigGlobalState } from '../../iot/states';
 import styles from './TerminalBoxTemplateStyle';
@@ -174,7 +174,7 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           accessibilityLabel={AccessibilityLabel.TERMINAL_BOX_BUTTON_SEND}
           disabled={!value}
         >
-          <IconOutline name="send" size={25} />
+          <AntDesign name="send" size={25} />
         </TouchableOpacity>
       </View>
     </View>

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } 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 Text from '../../commons/Text';
 import { AlertAction } from '../../commons';
 import { useDropdownAction } from './hooks/useDropdownAction';
@@ -48,7 +48,7 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           onPress={onShowAlert}
           accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_EDIT}
         >
-          <IconOutline name="edit" size={25} />
+          <AntDesign name="edit" size={25} />
         </TouchableOpacity>
       </View>
       <AlertAction

package/src/commons/ActionGroup/ThreeButtonTemplate/__test__/ThreeButtonTemplate.test.js

@@ -23,7 +23,7 @@ describe('Test ThreeButtonTemplate', () => {
         command_prefer_over_googlehome: false,
         command_prefer_over_internet: false,
         googlehome_actions: [],
-        icon: 'caret-up',
+        icon: 'caretup',
         id: 9,
         key: '2b949045-8e03-4c07-a855-7794ade2e69c',
       },
@@ -45,13 +45,13 @@ describe('Test ThreeButtonTemplate', () => {
         command_prefer_over_googlehome: false,
         command_prefer_over_internet: false,
         googlehome_actions: [],
-        icon: 'caret-down',
+        icon: 'caretdown',
         id: 10,
         key: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
       },
-      icon1: 'caret-up',
+      icon1: 'caretup',
       icon2: 'stop',
-      icon3: 'caret-down',
+      icon3: 'caretdown',
       text1: 'UP',
       text2: 'STOP/UNLOCK',
       text3: 'DOWN',