.

screens/Private/SmartMeterScreen/McbLinkScreen.js

@@ -183,7 +183,7 @@ class McbLinkScreen extends React.Component {
 								return (
 									<Card style={[styles.electronicCard, { backgroundColor: color.lightGrey }]}>
 										<TouchableOpacity
-											style={theme.centerContainer}
+											style={[theme.centerContainer, { flex: 1 }]}
 											onPress={() => this.setState({ isAddElectronicVisible: true })}
 											disabled={toggleDel}
 										>
@@ -202,7 +202,7 @@ class McbLinkScreen extends React.Component {
 									<Card style={[styles.electronicCard]}>
 										<TouchableOpacity
 											onLongPress={() => this.setState({ toggleDel: true })}
-											style={theme.centerContainer}
+											style={[theme.centerContainer, { width: 65 }]}
 										>
 											{item.type ? (
 												<Image
@@ -212,7 +212,9 @@ class McbLinkScreen extends React.Component {
 											) : (
 												<Icon style={{ color: color.primary }} name={'md-help'} />
 											)}
-											<Text style={styles.electronictext}>{item.name}</Text>
+											<Text style={styles.electronictext} numberOfLines={2}>
+												{item.name}
+											</Text>
 										</TouchableOpacity>
 										{toggleDel && (
 											<Icon
@@ -259,8 +261,19 @@ class McbLinkScreen extends React.Component {
 			</>
 		);
 	};
+
 	renderAddModal = () => {
 		const { deviceName, deviceType } = this.state;
+		const formatGridData = unformatData => {
+			let data = unformatData;
+			const numberOfFullRows = Math.floor(data.length / 4);
+			let numberOfElementsLastRow = data.length - numberOfFullRows * 4;
+			while (numberOfElementsLastRow !== 4 && numberOfElementsLastRow !== 0) {
+				data.push({ type: 'empty' });
+				numberOfElementsLastRow = numberOfElementsLastRow + 1;
+			}
+			return data;
+		};
 		return (
 			<>
 				<View style={styles.dragIndicator} />
@@ -273,11 +286,11 @@ class McbLinkScreen extends React.Component {
 							Cancel
 						</Text>
 						<Text style={[theme.smallTitle, theme.textDark]}>Add device</Text>
-						<Text style={[theme.smallTitle, theme.textDanger]} onPress={this.addDevice}>
-							Save
-						</Text>
+						<TouchableOpacity onPress={this.addDevice} disabled={deviceName && deviceType ? false : true}>
+							<Text style={[theme.smallTitle, theme.textDanger]}>Save</Text>
+						</TouchableOpacity>
 					</View>
-					<ScrollView>
+					<ScrollView showsVerticalScrollIndicator={false}>
 						<View style={theme.mt2}>
 							<Text style={[theme.normalText]}>Enter Device’s name</Text>
 							<View style={styles.inputDeviceNameContainer}>
@@ -296,34 +309,56 @@ class McbLinkScreen extends React.Component {
 						<View style={theme.mt2}>
 							<Text style={[theme.normalText]}>Select Device’s icon</Text>
 							<FlatList
-								data={listDeviceIcon}
+								data={formatGridData(listDeviceIcon)}
 								style={[theme.mt1, { paddingBottom: isIphoneX() ? 80 : 45 }]}
 								numColumns={4}
-								renderItem={({ item, index }) => (
+								renderItem={({ item, index }) => {
+									if (item.type === 'empty') {
+										return <Card style={styles.electronicCard} transparent />;
+									} else {
+										return (
 											<Card
 												style={[
 													styles.electronicCard,
 													{
-												backgroundColor: item.type === deviceType ? color.primary : color.white,
+														backgroundColor:
+															item.type === deviceType ? color.primary : color.white,
 													},
 												]}
 											>
 												<TouchableOpacity
-											style={theme.centerContainer}
+													style={[theme.centerContainer, { width: 65 }]}
 													onPress={() => this.setState({ deviceType: item.type })}
 												>
-											<Image style={styles.electronicIcon} source={getDeviceIcon(item.type)} />
+													<Image
+														style={[
+															styles.electronicIcon,
+															{
+																tintColor:
+																	item.type === deviceType
+																		? color.white
+																		: color.primary,
+															},
+														]}
+														source={getDeviceIcon(item.type)}
+													/>
 													<Text
 														style={[
 															styles.electronictext,
-													{ color: item.type === deviceType ? color.white : color.grey },
+															{
+																color:
+																	item.type === deviceType ? color.white : color.grey,
+															},
 														]}
+														numberOfLines={1}
 													>
 														{item.type}
 													</Text>
 												</TouchableOpacity>
 											</Card>
-								)}
+										);
+									}
+								}}
 								keyExtractor={({ item, index }) => `device${index}`}
 							/>
 						</View>
@@ -418,11 +453,13 @@ const styles = StyleSheet.create({
 	},
 	electronictext: {
 		position: 'absolute',
+		textAlign: 'center',
 		bottom: 5,
+		left: 2,
+		right: 2,
 		fontSize: 10,
 		fontFamily: 'Avenir-Roman',
 		color: color.grey,
-		width: '100%',
 	},
 	doneDeleteBtn: {
 		backgroundColor: color.lightGrey,