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

package/src/configs/Constants.js

@@ -1,9 +1,9 @@
 export { default as AccessibilityLabel } from './AccessibilityLabel';
 import { Platform, Dimensions, StatusBar } from 'react-native';
 import { RFValue } from 'react-native-responsive-fontsize';
-import OneTap from '../../assets/images/OneTap.svg';
-import ValueChange from '../../assets/images/ValueChange.svg';
-import Schedule from '../../assets/images/Schedule.svg';
+import OneTap from '../../assets/images/Scenario-filled.svg';
+import ValueChange from '../../assets/images/Automation-fill.svg';
+import Schedule from '../../assets/images/schedule-fill.svg';
 import Event from '../../assets/images/Event.svg';
 
 const X_WIDTH = 375;

package/src/navigations/AddDeviceStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 
 import AddCommonSelectUnit from '../screens/AddCommon/SelectUnit';
@@ -7,7 +7,7 @@ import AddNewDevice from '../screens/AddNewDevice';
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const AddDeviceStack = memo(() => {
   return (

package/src/navigations/AddGatewayStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 
 import AddNewGateway from '../screens/AddNewGateway';
@@ -21,7 +21,7 @@ import RenameNewDevices from '../screens/AddNewGateway/RenameNewDevices';
 import ConnectingWifiGuide from '../screens/AddNewGateway/ConnectingWifiGuide';
 import ZigbeeDeviceConnectGuide from '../screens/AddNewGateway/PlugAndPlay/ZigbeeDeviceConnectGuide';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const AddGatewayStack = memo(() => {
   return (

package/src/navigations/AddLGDeviceStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 
 import AddCommonSelectUnit from '../screens/AddCommon/SelectUnit';
@@ -6,7 +6,7 @@ import AddLGDevice from '../screens/SyncLGDevice/AddLGDevice';
 import Routes from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const AddLGDeviceStack = memo(() => {
   return (

package/src/navigations/AddMemberStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 
 import AddCommonSelectUnit from '../screens/AddCommon/SelectUnit';
@@ -8,7 +8,7 @@ import SharingInviteMembers from '../screens/Sharing/SelectUser';
 import UpdateShareDevice from '../screens/Sharing/UpdateShareDevice';
 import SelectShareDevice from '../screens/Sharing/SelectShareDevice';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const AddMemberStack = memo(() => {
   return (

package/src/navigations/AddSubUnitStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 
 import AddCommonSelectUnit from '../screens/AddCommon/SelectUnit';
@@ -6,7 +6,7 @@ import AddSubUnit from '../screens/SubUnit/AddSubUnit';
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const AddSubUnitStack = memo(() => {
   return (

package/src/navigations/AddUnitStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 
 import AddLocationMaps from '../screens/AddLocationMaps'; //containers/AddLocationMaps
@@ -6,7 +6,7 @@ import AddSubUnit from '../screens/SubUnit/AddSubUnit';
 import Route from '../utils/Route'; // utils/Route
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const AddUnitStack = memo(() => {
   return (

package/src/navigations/AllGatewayStack.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import GatewayDetail from '../screens/AllGateway/GatewayDetail';
 import GatewayInfo from '../screens/AllGateway/GatewayInfo';
@@ -15,7 +15,7 @@ import DetailConfigActionInternal from '../screens/AllGateway/DetailConfigAction
 import Route from '../utils/Route'; // utils/Route
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const AllGatewayStack = memo(() => {
   return (

package/src/navigations/AutomateStack.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect, useContext } from 'react';
 import { TouchableOpacity } from 'react-native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { useNavigation } from '@react-navigation/core';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { SCContext } from '../context';
@@ -16,7 +16,7 @@ import MultiUnits from '../screens/Automate/MultiUnits';
 import { axiosGet } from '../utils/Apis/axios';
 import { API } from '../configs';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const AutomateStack = memo(() => {
   const t = useTranslations();

package/src/navigations/EmergencyContactsStack.js

@@ -1,5 +1,5 @@
 import AntDesign from 'react-native-vector-icons/AntDesign';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
 
@@ -10,7 +10,7 @@ import { EmergencyContactsSelectContacts } from '../screens/EmergencyContacts/Em
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const EmergencyContactsStack = memo(() => {
   return (

package/src/navigations/GatewayStack.js

@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Routes from '../utils/Route';
 import { screenOptions } from './utils';
 import Gateway from '../screens/Gateway';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const GatewayStack = memo(() => {
   return (

package/src/navigations/HanetCameraStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 import HanetCameraDetail from '../screens/HanetCamera/Detail';
 import HanetManageAccess from '../screens/HanetCamera/ManageAccess';
@@ -7,7 +7,7 @@ import HanetCaptureFaceID from '../screens/HanetCamera/CaptureFaceID';
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const HanetCameraStack = memo(() => {
   return (

package/src/navigations/Main.js

@@ -10,7 +10,7 @@
 // import { createDrawerNavigator } from '@react-navigation/drawer';
 // import { useNavigation } from '@react-navigation/native';
 // import { getStatusBarHeight } from 'react-native-iphone-x-helper';
-// import { createStackNavigator } from '@react-navigation/stack';
+// import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 // import Tabbar from '../commons/Tabbar';
 // import { Colors, Constants, Images } from '../configs';
@@ -40,7 +40,7 @@
 
 // const Tab = createBottomTabNavigator();
 // const Drawer = createDrawerNavigator();
-// const Stack = createStackNavigator();
+// const Stack = createNativeStackNavigator();
 
 // const getWidth = () => {
 //   const Width = Constants.width - 12;

package/src/navigations/NotificationStack.js

@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Routes from '../utils/Route';
 import Notification from '../screens/Notification';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const NotificationStack = memo(() => {
   return (

package/src/navigations/SharedStack.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
@@ -10,7 +10,7 @@ import { Colors } from '../configs';
 import Routes from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 const SharedStack = memo(() => {
   const t = useTranslations();
   const { toggleDrawer, goBack } = useNavigation();

package/src/navigations/SmartAccountStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 import SmartAccount from '../screens/SmartAccount';
 import SmartAccountConnecting from '../screens/SmartAccount/Connecting';
@@ -8,7 +8,7 @@ import SuccessfullyConnected from '../screens/SmartAccount/SuccessfullyConnected
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const SmartAccountStack = memo(() => {
   return (

package/src/navigations/SmartIrStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 
 import SelectIrDeviceType from '../screens/SmartIr/components/SelectIrDeviceType';
@@ -7,7 +7,7 @@ import GroupButtonByType from '../screens/SmartIr/components/GroupButtonByType/G
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const SmartIrStack = memo(() => {
   return (

package/src/navigations/SmartLockStack.js

@@ -1,4 +1,4 @@
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { memo } from 'react';
 
 import Route from '../utils/Route';
@@ -8,7 +8,7 @@ import AutoLock from '../commons/ActionGroup/OnOffSmartLock/AutoLock/index';
 import PasscodeList from '../commons/ActionGroup/OnOffSmartLock/PasscodeList/index';
 import ItemPasscode from '../commons/ActionGroup/OnOffSmartLock/PasscodeList/ItemPasscode';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 export const SmartLockStack = memo(() => {
   return (

package/src/navigations/SmartStack.js

@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Routes from '../utils/Route';
 import { screenOptions } from './utils';
 import Smart from '../screens/Smart';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const SmartStack = memo(() => {
   return (

package/src/navigations/TemplateStack.js

@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import Routes from '../utils/Route';
 import { screenOptions } from './utils';
 import Template from '../screens/Template';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const TemplateStack = memo(() => {
   return (

package/src/navigations/UnitStack.js

@@ -1,7 +1,7 @@
 import React, { memo, useContext, useEffect } from 'react';
 import { AppState, View } from 'react-native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { BleManager } from 'react-native-ble-plx';
 import NetInfo from '@react-native-community/netinfo';
 import { get } from 'lodash';
@@ -69,7 +69,7 @@ import SetupScriptNotify from '../screens/Automate/AddNewAction/SetupScriptNotif
 import SetupScriptDelay from '../screens/Automate/AddNewAction/SetupScriptDelay';
 import UpdateActionScript from '../screens/Automate/EditActionsList/UpdateActionScript';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const bleManager = new BleManager();
 

package/src/navigations/utils.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { CardStyleInterpolators } from '@react-navigation/stack';
 import { StackActions } from '@react-navigation/native';
 
 // NavigationContainer is referred here - Check NavigationStack
@@ -13,9 +12,7 @@ export function goBack() {
   navigationRef.current?.goBack();
 }
 
-export const screenOptions = {
-  cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
-};
+export const screenOptions = {};
 
 export const popAction = (value) => StackActions.pop(value);
 

package/src/screens/Automate/Styles/indexStyles.js

@@ -64,4 +64,10 @@ export default StyleSheet.create({
     height: 126,
     width: (Constants.width - 40) / 2,
   },
+  automatesRow: {
+    flexDirection: 'row',
+    marginTop: 8,
+    overflow: 'hidden',
+    alignSelf: 'center',
+  },
 });

package/src/screens/Automate/__test__/index.test.js

@@ -49,32 +49,7 @@ describe('Test Automate', () => {
       data: [
         {
           type: 'MultiUnit',
-          automates: [
-            {
-              id: 1,
-              user: 2,
-              type: 'one_tap',
-              activate_at: '2021-09-17T05:30:00Z',
-              script: {
-                id: 1,
-                name: 'script',
-                icon: undefined,
-                icon_kit: undefined,
-              },
-            },
-            {
-              id: 2,
-              user: 2,
-              type: 'one_tap',
-              activate_at: '2021-09-17T05:30:00Z',
-              script: {
-                id: 1,
-                name: 'script2',
-                icon: undefined,
-                icon_kit: undefined,
-              },
-            },
-          ],
+          automates: [],
         },
       ],
     };
@@ -98,7 +73,7 @@ describe('Test Automate', () => {
 
     const instance = tree.root;
     const FlatLists = instance.findAllByType(FlatList);
-    expect(FlatLists).toHaveLength(2);
+    expect(FlatLists).toHaveLength(1); // only 1 flat list
 
     const ItemAddNews = instance.findAllByType(ItemAddNew);
     expect(ItemAddNews).toHaveLength(1);
@@ -186,7 +161,7 @@ describe('Test Automate', () => {
 
     const instance = tree.root;
     const FlatLists = instance.findAllByType(FlatList);
-    expect(FlatLists).toHaveLength(3);
+    expect(FlatLists).toHaveLength(1); // only 1 flat list
     const ItemOneTaps = instance.findAllByType(ItemOneTap);
     expect(ItemOneTaps).toHaveLength(1);
     await act(async () => {

package/src/screens/Automate/index.js

@@ -58,7 +58,14 @@ const Automate = () => {
     setIsLoading(true);
     const { success, data } = await axiosGet(API.AUTOMATE.GET_SMART());
     if (success && data && data.length) {
-      setAutomatesData(data);
+      const multiUnit = data[0];
+      const haveAutomates = data
+        .slice(1)
+        .filter((unit) => unit.automates.length);
+      const notHaveAutomates = data
+        .slice(1)
+        .filter((unit) => !unit.automates.length);
+      setAutomatesData([multiUnit, ...haveAutomates, ...notHaveAutomates]);
     }
     setIsLoading(false);
   }, []);
@@ -137,16 +144,6 @@ const Automate = () => {
       const isOwner = owner_unit_id
         ? owner_unit_id === idUser
         : type === UNIT_TYPES.MULTI;
-      const renderItemAutomate = ({ item: automate }) => {
-        return (
-          <ItemOneTap
-            isOwner={isOwner}
-            automate={automate}
-            wrapSyles={styles.wrapAutomateItem}
-            onPressItem={() => onPressItem(automate, unit_id, type, isOwner)}
-          />
-        );
-      };
 
       return (
         <View style={styles.wrapUniItem}>
@@ -167,16 +164,29 @@ const Automate = () => {
               <Image source={Images.arrowBack} style={styles.arrowRight} />
             </TouchableOpacity>
           </View>
-          <FlatList
-            horizontal
-            keyExtractor={keyExtractor}
-            data={automates}
-            renderItem={renderItemAutomate}
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.contentContainerStyle2}
-            ListFooterComponent={renderListFooterComponent(unit_id, automates)}
-            scrollIndicatorInsets={{ right: 1 }}
-          />
+          {!!automates?.length && (
+            <View style={styles.automatesRow}>
+              <ItemOneTap
+                isOwner={isOwner}
+                automate={automates[0]}
+                wrapSyles={styles.wrapAutomateItem}
+                onPressItem={() =>
+                  onPressItem(automates[0], unit_id, type, isOwner)
+                }
+              />
+              {!!automates[1] && (
+                <ItemOneTap
+                  isOwner={isOwner}
+                  automate={automates[1]}
+                  wrapSyles={styles.wrapAutomateItem}
+                  onPressItem={() =>
+                    onPressItem(automates[1], unit_id, type, isOwner)
+                  }
+                />
+              )}
+            </View>
+          )}
+          {!automates?.length && renderListFooterComponent(unit_id, automates)}
         </View>
       );
     },
@@ -184,12 +194,15 @@ const Automate = () => {
     [sortedAutomateData]
   );
 
-  const renderListFooterComponent = (unitId, automates) => (
-    <ItemAddNew
-      title={t('add_new')}
-      onAddNew={() => handleOnAddNew(unitId, automates)}
-      wrapStyle={styles.addNewItem}
-    />
+  const renderListFooterComponent = useCallback(
+    (unitId, automates) => (
+      <ItemAddNew
+        title={t('add_new')}
+        onAddNew={() => handleOnAddNew(unitId, automates)}
+        wrapStyle={styles.addNewItem}
+      />
+    ),
+    [handleOnAddNew, t]
   );
 
   useLayoutEffect(() => {
@@ -204,13 +217,12 @@ const Automate = () => {
   }, [setOptions]);
 
   useEffect(() => {
-    getAutomates();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isFocused]);
+    isFocused && getAutomates();
+  }, [isFocused, getAutomates]);
 
   return (
     <View style={styles.wrap}>
-      {isLoading && !sortedAutomateData?.length && <Loading />}
+      {isLoading && <Loading />}
       <FlatList
         keyExtractor={keyExtractor}
         data={sortedAutomateData}
@@ -220,6 +232,11 @@ const Automate = () => {
         refreshing={false}
         onRefresh={getAutomates}
         scrollIndicatorInsets={{ right: 1 }}
+        getItemLayout={(data, index) => ({
+          length: 180,
+          offset: 180 * index,
+          index,
+        })}
       />
     </View>
   );

package/src/screens/SharedUnit/index.js

@@ -144,6 +144,11 @@ const Shared = () => {
             ItemSeparatorComponent={() => <View style={styles.seperator} />}
             contentContainerStyle={styles.scrollView}
             scrollIndicatorInsets={{ right: 1 }}
+            getItemLayout={(data, index) => ({
+              length: 52,
+              offset: 52 * index,
+              index,
+            })}
           />
         ) : (
           <FlatList

package/src/screens/Unit/Detail.js

@@ -325,11 +325,7 @@ const UnitDetail = ({ route }) => {
   }, [isFirstOpenCamera, isIOS]);
 
   return (
-    <WrapParallaxScrollView
-      unit={unit}
-      unitData={unitData}
-      onRefresh={onRefresh}
-    >
+    <WrapParallaxScrollView unit={unit} onRefresh={onRefresh}>
       {isFirstOpenCamera && isIOS && (
         <MediaPlayerDetail
           uri={Constants.URL_STREAM_CAMERA_DEMO}

package/src/screens/Unit/MoreMenu.js

@@ -14,6 +14,7 @@ const MoreMenu = ({
   idLabelScrollView,
   idLabelItem,
 }) => {
+  const { id } = unit;
   const t = useTranslations();
   const navigation = useNavigation();
 
@@ -30,25 +31,25 @@ const MoreMenu = ({
       id: 'mange-unit',
       route: Routes.ManageUnit,
       text: t('manage_unit'),
-      data: { unitId: unit?.id, unit },
+      data: { unitId: id, unit },
     };
     const RouteUnitMemberList = {
       id: 'unit-member',
       route: Routes.UnitMemberList,
       text: t('members'),
-      data: { unitId: unit?.id, unit },
+      data: { unitId: id, unit },
     };
     const ListSmartAccount = {
       id: 'smart-account',
       route: Routes.ListSmartAccount,
       text: t('smart_account'),
-      data: { unitId: unit?.id, unit },
+      data: { unitId: id, unit },
     };
     const RouteAllGateway = {
       id: 'all-gateway',
       route: Routes.AllGateway,
       text: t('all_gateway'),
-      data: { unitId: unit?.id, unit },
+      data: { unitId: id, unit },
     };
     return isOwner
       ? [
@@ -58,7 +59,7 @@ const MoreMenu = ({
           RouteAllGateway,
         ]
       : [RouteUnitMemberList];
-  }, [t, unit, isOwner]);
+  }, [t, id, unit, isOwner]);
 
   return (
     <MenuActionMore

package/src/screens/Unit/__test__/MoreMenu.test.js

@@ -9,7 +9,11 @@ const mockHidePopover = jest.fn();
 
 const wrapComponent = (showingPopover) => (
   <SCProvider initState={mockSCStore({})}>
-    <MoreMenu showingPopover={showingPopover} hidePopover={mockHidePopover} />
+    <MoreMenu
+      showingPopover={showingPopover}
+      hidePopover={mockHidePopover}
+      unit={{ id: 1 }}
+    />
   </SCProvider>
 );
 

package/src/screens/Unit/components/AutomateScript/index.js

@@ -4,9 +4,9 @@ import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import Text from '../../../../commons/Text';
 import FImage from '../../../../commons/FImage';
-import OneTap from '../../../../../assets/images/OneTap.svg';
-import ValueChange from '../../../../../assets/images/ValueChange.svg';
-import Schedule from '../../../../../assets/images/Schedule.svg';
+import OneTap from '../../../../../assets/images/Scenario-filled.svg';
+import ValueChange from '../../../../../assets/images/Automation-fill.svg';
+import Schedule from '../../../../../assets/images/schedule-fill.svg';
 import Event from '../../../../../assets/images/Event.svg';
 import styles from './styles';
 import {

package/src/screens/UnitSummary/components/WaterQuality/Item/index.js

@@ -25,7 +25,7 @@ const Item = memo(({ id, svgMain, title, measure, des, color, waterType }) => {
           <TouchableOpacity onPress={goToDetail} style={styles.buttonInfo}>
             <AntDesign
               style={styles.row}
-              name="info-circle"
+              name="infocirlceo"
               size={20}
               color={Colors.Black}
             />