.

screens/Private/ProfileScreen/ProfileScreen.js

 import React from 'react';
 import { Text, Card, Icon, Button, ActionSheet } from 'native-base';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
 import { HeaderButtons, Item } from 'react-navigation-header-buttons';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
 import { theme, color } from '../../../constants/Styles';
@@ -48,23 +48,30 @@ class ProfileScreen extends React.Component {
 						)}
 					</Card>
 				</View>
-				<View style={styles.infoContainer}>
-					<Text style={theme.description}>Name</Text>
-					<Text style={styles.textInfo}>{displayName || '-'}</Text>
-					<View style={styles.seperator} />
-					<Text style={theme.description}>Email</Text>
-					<Text style={styles.textInfo}>{email || '-'}</Text>
-					<View style={styles.seperator} />
-					<Text style={theme.description}>Phone No.</Text>
-					<Text style={styles.textInfo}>{phoneNumber || '-'}</Text>
-				</View>
-				<TouchableOpacity
-					style={[styles.infoContainer, theme.mt2, theme.rowContainer, { justifyContent: 'space-between' }]}
-					onPress={() => this.props.navigation.navigate('ChangePassword')}
-				>
-					<Text style={[styles.textInfo, { marginTop: 0 }]}>Change Password</Text>
-					<Icon name="chevron-thin-right" type="Entypo" style={{ fontSize: 20, color: color.grey }} />
-				</TouchableOpacity>
+				<ScrollView showsVerticalScrollIndicator={false} style={{ marginVertical: 80 }}>
+					<View style={styles.infoContainer}>
+						<Text style={theme.description}>Name</Text>
+						<Text style={styles.textInfo}>{displayName || '-'}</Text>
+						<View style={styles.seperator} />
+						<Text style={theme.description}>Email</Text>
+						<Text style={styles.textInfo}>{email || '-'}</Text>
+						<View style={styles.seperator} />
+						<Text style={theme.description}>Phone No.</Text>
+						<Text style={styles.textInfo}>{phoneNumber || '-'}</Text>
+					</View>
+					<TouchableOpacity
+						style={[
+							styles.infoContainer,
+							theme.mt2,
+							theme.rowContainer,
+							{ justifyContent: 'space-between' },
+						]}
+						onPress={() => this.props.navigation.navigate('ChangePassword')}
+					>
+						<Text style={[styles.textInfo, { marginTop: 0 }]}>Change Password</Text>
+						<Icon name="chevron-thin-right" type="Entypo" style={{ fontSize: 20, color: color.grey }} />
+					</TouchableOpacity>
+				</ScrollView>
 				<Button
 					full
 					rounded
@@ -110,7 +117,6 @@ const styles = StyleSheet.create({
 	},
 	infoContainer: {
 		backgroundColor: color.white,
-		marginTop: 80,
 		padding: 20,
 	},
 	textInfo: {

screens/Private/SmartMeterScreen/McbLinkScreen.js

@@ -312,9 +312,7 @@ class McbLinkScreen extends React.Component {
 						>
 							<Text style={[theme.description, { color: color.white }]}>Done</Text>
 						</TouchableOpacity>
-					) : (
-						<Text style={theme.description}>Edit</Text>
-					)}
+					) : null}
 				</View>
 				<View>
 					<ScrollView horizontal pagingEnabled showsHorizontalScrollIndicator={false}>
@@ -373,7 +371,7 @@ class McbLinkScreen extends React.Component {
 								numColumns={4}
 								renderItem={({ item, index }) => {
 									if (item.type === 'empty') {
-										return <View style={{ flex: 1, margin: 10 }} />;
+										return <View style={{ flex: 1 }} />;
 									} else {
 										const dynamicColor = item.type === deviceType ? color.white : color.primary;
 										return (
@@ -383,6 +381,9 @@ class McbLinkScreen extends React.Component {
 													{
 														backgroundColor:
 															item.type === deviceType ? color.primary : color.white,
+														marginVertical: 10,
+														marginRight: (index + 1) % 4 ? 10 : 0,
+														marginLeft: 0,
 													},
 												]}
 											>

screens/Private/SmartMeterScreen/McbLinkSettingScreen.js

@@ -4,7 +4,7 @@ import { Text, Icon } from 'native-base';
 import { HeaderButtons, Item } from 'react-navigation-header-buttons';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
 import { theme, color } from '../../../constants/Styles';
-import { TouchableOpacity, FlatList } from 'react-native-gesture-handler';
+import { TouchableOpacity, FlatList, ScrollView } from 'react-native-gesture-handler';
 import { connect } from 'react-redux';
 
 class McbLinkSettingScreen extends React.Component {
@@ -56,15 +56,16 @@ class McbLinkSettingScreen extends React.Component {
 	render() {
 		const { mcbLinkInfo, subBreakerInfo } = this.state;
 		return (
-			<View style={theme.container}>
+			<ScrollView showsVerticalScrollIndicator={false} style={theme.container}>
 				<View style={theme.mt2}>{this.renderList(mcbLinkInfo)}</View>
 				<FlatList
+					scrollEnabled={false}
 					data={subBreakerInfo}
 					renderItem={({ item, index }) => this.renderList(item, index)}
 					ItemSeparatorComponent={() => <View style={styles.seperator} />}
-					contentContainerStyle={theme.mt2}
+					contentContainerStyle={{ marginVertical: 20 }}
 				/>
-			</View>
+			</ScrollView>
 		);
 	}
 }

screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js

@@ -213,7 +213,10 @@ class SmartMeterDetailScreen extends Component {
 					index % 3 === 0 ? { marginRight: 0 } : { marginLeft: 10 },
 				]}
 			>
-				<Text style={[theme.description, { color: item.value > item.limit ? color.white : color.grey }]}>
+				<Text
+					numberOfLines={1}
+					style={[theme.description, { color: item.value > item.limit ? color.white : color.grey }]}
+				>
 					{item.name}
 				</Text>
 				<Text

screens/Private/SmartMeterScreen/SmartMeterScreen.js

@@ -88,8 +88,6 @@ class SmartMeterScreen extends PureComponent {
 		return (
 			<View style={[theme.container]}>
 				<View style={theme.containerWithPadding}>
-					<Text style={[theme.smallTitle, theme.textDark, { marginBottom: 10 }]}>Smart Device</Text>
-
 					<SearchBar
 						containerStyle={styles.searchBarContainer}
 						inputContainerStyle={styles.searchBarInputContainer}