.

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 }) => (
-									<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
+								renderItem={({ item, index }) => {
+									if (item.type === 'empty') {
+										return <Card style={styles.electronicCard} transparent />;
+									} else {
+										return (
+											<Card
 												style={[
-													styles.electronictext,
-													{ color: item.type === deviceType ? color.white : color.grey },
+													styles.electronicCard,
+													{
+														backgroundColor:
+															item.type === deviceType ? color.primary : color.white,
+													},
 												]}
 											>
-												{item.type}
-											</Text>
-										</TouchableOpacity>
-									</Card>
-								)}
+												<TouchableOpacity
+													style={[theme.centerContainer, { width: 65 }]}
+													onPress={() => this.setState({ deviceType: 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,
+															},
+														]}
+														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,