update add device type and device icon

components/deviceIcon.js

+export const listDeviceIcon = [
+	{
+		type: 'Air Conditioner',
+	},
+	{
+		type: 'Air Purifier',
+	},
+	{
+		type: 'Battery Charger',
+	},
+	{
+		type: 'BBQ',
+	},
+	{
+		type: 'Bench',
+	},
+	{
+		type: 'Blender',
+	},
+	{
+		type: 'CCTV',
+	},
+	{
+		type: 'Ceiling Fan',
+	},
+	{
+		type: 'Coffee Grinder',
+	},
+	{
+		type: 'Coffee Maker',
+	},
+	{
+		type: 'Computer',
+	},
+	{
+		type: 'Electric Frying Pan',
+	},
+	{
+		type: 'Electric Plug',
+	},
+	{
+		type: 'Fan',
+	},
+	{
+		type: 'Fish Bowl',
+	},
+	{
+		type: 'Freezer',
+	},
+	{
+		type: 'Gaming Console',
+	},
+	{
+		type: 'Iron',
+	},
+	{
+		type: 'Lamp',
+	},
+	{
+		type: 'Light',
+	},
+	{
+		type: 'Machinery',
+	},
+	{
+		type: 'Massage Chair',
+	},
+	{
+		type: 'Meat Grinder',
+	},
+	{
+		type: 'Microwave',
+	},
+	{
+		type: 'Oven',
+	},
+	{
+		type: 'Projector',
+	},
+	{
+		type: 'Refrigerator',
+	},
+	{
+		type: 'Rice Cooker',
+	},
+	{
+		type: 'Sewing Machine',
+	},
+	{
+		type: 'Speakers',
+	},
+	{
+		type: 'Stove',
+	},
+	{
+		type: 'Television',
+	},
+	{
+		type: 'Toaster',
+	},
+	{
+		type: 'Vacuum Bottle',
+	},
+	{
+		type: 'Vacuum Cleaner',
+	},
+	{
+		type: 'Washing Machine',
+	},
+	{
+		type: 'Water Dispenser',
+	},
+	{
+		type: 'Water Heater',
+	},
+	{
+		type: 'Water Pump',
+	},
+];
+export const getDeviceIcon = type => {
+	switch (type) {
+		case 'Air Conditioner':
+			return require('../assets/images/device-icon/AirConditioner.png');
+		case 'Air Purifier':
+			return require('../assets/images/device-icon/AirPurifier.png');
+		case 'Battery Charger':
+			return require('../assets/images/device-icon/BatteryCharger.png');
+		case 'BBQ':
+			return require('../assets/images/device-icon/BBQ.png');
+		case 'Bench':
+			return require('../assets/images/device-icon/Bench.png');
+		case 'Blender':
+			return require('../assets/images/device-icon/Blender.png');
+		case 'CCTV':
+			return require('../assets/images/device-icon/CCTV.png');
+		case 'Ceiling Fan':
+			return require('../assets/images/device-icon/CeilingFan.png');
+		case 'Coffee Grinder':
+			return require('../assets/images/device-icon/CoffeeGrinder.png');
+		case 'Coffee Maker':
+			return require('../assets/images/device-icon/CoffeeMaker.png');
+		case 'Computer':
+			return require('../assets/images/device-icon/Computer.png');
+		case 'Electric Frying Pan':
+			return require('../assets/images/device-icon/ElectricFryingPan.png');
+		case 'Electric Plug':
+			return require('../assets/images/device-icon/ElectricPlug.png');
+		case 'Fan':
+			return require('../assets/images/device-icon/Fan.png');
+		case 'Fish Bowl':
+			return require('../assets/images/device-icon/FishBowl.png');
+		case 'Freezer':
+			return require('../assets/images/device-icon/Freezer.png');
+		case 'Gaming Console':
+			return require('../assets/images/device-icon/GamingConsole.png');
+		case 'Iron':
+			return require('../assets/images/device-icon/Iron.png');
+		case 'Lamp':
+			return require('../assets/images/device-icon/Lamp.png');
+		case 'Light':
+			return require('../assets/images/device-icon/Light.png');
+		case 'Machinery':
+			return require('../assets/images/device-icon/Machinery.png');
+		case 'Massage Chair':
+			return require('../assets/images/device-icon/MassageChair.png');
+		case 'Meat Grinder':
+			return require('../assets/images/device-icon/MeatGrinder.png');
+		case 'Microwave':
+			return require('../assets/images/device-icon/Microwave.png');
+		case 'Oven':
+			return require('../assets/images/device-icon/Oven.png');
+		case 'Projector':
+			return require('../assets/images/device-icon/Projector.png');
+		case 'Refrigerator':
+			return require('../assets/images/device-icon/Refrigerator.png');
+		case 'Rice Cooker':
+			return require('../assets/images/device-icon/RiceCooker.png');
+		case 'Sewing Machine':
+			return require('../assets/images/device-icon/SewingMachine.png');
+		case 'Speakers':
+			return require('../assets/images/device-icon/Speakers.png');
+		case 'Stove':
+			return require('../assets/images/device-icon/Stove.png');
+		case 'Television':
+			return require('../assets/images/device-icon/Television.png');
+		case 'Toaster':
+			return require('../assets/images/device-icon/Toaster.png');
+		case 'Vacuum Bottle':
+			return require('../assets/images/device-icon/VacuumBottle.png');
+		case 'Vacuum Cleaner':
+			return require('../assets/images/device-icon/VacuumCleaner.png');
+		case 'Washing Machine':
+			return require('../assets/images/device-icon/WashingMachine.png');
+		case 'Water Dispenser':
+			return require('../assets/images/device-icon/WaterDispenser.png');
+		case 'Water Heater':
+			return require('../assets/images/device-icon/WaterHeater.png');
+		case 'Water Pump':
+			return require('../assets/images/device-icon/WaterPump.png');
+		default:
+	}
+};

screens/Private/SmartMeterScreen/McbLinkScreen.js

 import React from 'react';
 import { Text, Tab, Tabs, ScrollableTab, View, Card, Icon } from 'native-base';
 import { connect } from 'react-redux';
-import { StyleSheet, TextInput } from 'react-native';
+import { StyleSheet, TextInput, Image } from 'react-native';
 import { theme, color } from '../../../constants/Styles';
 import { HeaderButtons, Item } from 'react-navigation-header-buttons';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
@@ -14,6 +14,8 @@ import {
 	addConnectedDevice,
 } from '../../../reduxStore/actions/currentSelectedAction';
 import Modal from 'react-native-modalbox';
+import { getDeviceIcon, listDeviceIcon } from '../../../components/deviceIcon';
+import { isIphoneX } from '../../../utils/isPhoneX';
 
 let checkedTimes = 0;
 
@@ -50,6 +52,7 @@ class McbLinkScreen extends React.Component {
 		mcbIndex: this.props.navigation.getParam('mcbIndex'),
 		subBreakerIndex: this.props.navigation.getParam('subIndex'),
 		deviceName: '',
+		deviceType: '',
 	};
 	componentDidMount = () => {
 		this.setSubBreakersState();
@@ -84,13 +87,13 @@ class McbLinkScreen extends React.Component {
 		this.setState({ subBreakersInfo: existedSubBreakersData[mcbIndex], subBreakerStatus: status });
 	};
 	addDevice = async () => {
-		const { deviceName, mcbIndex, subBreakerIndex } = this.state;
-		let deviceData = { name: deviceName };
+		const { deviceName, deviceType, mcbIndex, subBreakerIndex } = this.state;
+		let deviceData = { name: deviceName, type: deviceType };
 		const mcbId = mcbIndex + 1;
 		const subId = subBreakerIndex + 1;
 
 		await this.props.addConnectedDevice(mcbId, subId, deviceData);
-		this.setState({ deviceName: '', isAddElectronicVisible: false });
+		this.setState({ deviceName: '', deviceType: '', isAddElectronicVisible: false });
 	};
 
 	formatData(item, start, end) {
@@ -201,7 +204,14 @@ class McbLinkScreen extends React.Component {
 											onLongPress={() => this.setState({ toggleDel: true })}
 											style={theme.centerContainer}
 										>
-											<Icon style={[styles.electronicIcon]} name={'md-help'} />
+											{item.type ? (
+												<Image
+													style={styles.electronicIcon}
+													source={getDeviceIcon(item.type)}
+												/>
+											) : (
+												<Icon style={{ color: color.primary }} name={'md-help'} />
+											)}
 											<Text style={styles.electronictext}>{item.name}</Text>
 										</TouchableOpacity>
 										{toggleDel && (
@@ -250,7 +260,7 @@ class McbLinkScreen extends React.Component {
 		);
 	};
 	renderAddModal = () => {
-		const { deviceName } = this.state;
+		const { deviceName, deviceType } = this.state;
 		return (
 			<>
 				<View style={styles.dragIndicator} />
@@ -267,21 +277,57 @@ class McbLinkScreen extends React.Component {
 							Save
 						</Text>
 					</View>
-					<View style={theme.mt2}>
-						<Text style={[theme.normalText]}>Enter Device’s name</Text>
-						<View style={styles.inputDeviceNameContainer}>
-							<TextInput
-								placeholder="Device name"
-								style={[theme.normalText, { width: '100%' }]}
-								onChangeText={text =>
-									this.setState({
-										deviceName: text,
-									})
-								}
-								value={deviceName}
+					<ScrollView>
+						<View style={theme.mt2}>
+							<Text style={[theme.normalText]}>Enter Device’s name</Text>
+							<View style={styles.inputDeviceNameContainer}>
+								<TextInput
+									placeholder="Device name"
+									style={[theme.normalText, { width: '100%' }]}
+									onChangeText={text =>
+										this.setState({
+											deviceName: text,
+										})
+									}
+									value={deviceName}
+								/>
+							</View>
+						</View>
+						<View style={theme.mt2}>
+							<Text style={[theme.normalText]}>Select Device’s icon</Text>
+							<FlatList
+								data={listDeviceIcon}
+								style={[theme.mt1, { paddingBottom: isIphoneX() ? 80 : 45 }]}
+								numColumns={4}
+								renderItem={({ item, index }) => (
+									<Card
+										style={[
+											styles.electronicCard,
+											{
+												backgroundColor: item.type === deviceType ? color.primary : color.white,
+											},
+										]}
+									>
+										<TouchableOpacity
+											style={theme.centerContainer}
+											onPress={() => this.setState({ deviceType: item.type })}
+										>
+											<Image style={styles.electronicIcon} source={getDeviceIcon(item.type)} />
+											<Text
+												style={[
+													styles.electronictext,
+													{ color: item.type === deviceType ? color.white : color.grey },
+												]}
+											>
+												{item.type}
+											</Text>
+										</TouchableOpacity>
+									</Card>
+								)}
+								keyExtractor={({ item, index }) => `device${index}`}
 							/>
 						</View>
-					</View>
+					</ScrollView>
 				</View>
 			</>
 		);
@@ -364,12 +410,19 @@ const styles = StyleSheet.create({
 		justifyContent: 'center',
 	},
 	electronicIcon: {
-		color: color.primary,
+		tintColor: color.primary,
+		width: 24,
+		height: 24,
+		resizeMode: 'contain',
+		marginBottom: 10,
 	},
 	electronictext: {
+		position: 'absolute',
+		bottom: 5,
 		fontSize: 10,
 		fontFamily: 'Avenir-Roman',
 		color: color.grey,
+		width: '100%',
 	},
 	doneDeleteBtn: {
 		backgroundColor: color.lightGrey,