update style

src/components/layout/MeterCard.js

 import React from 'react';
 import { Card, View, Row, Icon, Text } from 'native-base';
-import { Image, StyleSheet } from 'react-native';
+import { Image, StyleSheet, TouchableOpacity } from 'react-native';
 import { color } from '../../constants/Styles';
 
 const MeterCard = props => {
 	return (
-		<Card style={[styles.cardContainer]}>
-			<View style={[styles.imgContainer]}>
-				{props.isOn ? (
-					<View style={[styles.onContainer, { backgroundColor: 'rgba(65, 204, 0, 0.59)' }]}>
-						<Text style={[styles.onText]}>ON</Text>
-					</View>
-				) : (
-					<View style={[styles.onContainer, { backgroundColor: 'rgba(223, 0, 0, 0.59)' }]}>
-						<Text style={[styles.onText]}>OFF</Text>
-					</View>
-				)}
-				<Image
-					source={{
-						uri: props.img,
-					}}
-					style={[styles.imgStyle]}
-				/>
-			</View>
-			<View style={[styles.textContainer]}>
-				{props.isOnline ? <View style={[styles.online]} /> : null}
+		<TouchableOpacity onPress={() => console.log('Go to Smart meter ' + props.index + '!!')}>
+			<Card style={[styles.cardContainer]}>
+				<View style={[styles.imgContainer]}>
+					{props.isOn ? (
+						<View style={[styles.onContainer, { backgroundColor: 'rgba(65, 204, 0, 0.59)' }]}>
+							<Text style={[styles.onText]}>ON</Text>
+						</View>
+					) : (
+						<View style={[styles.onContainer, { backgroundColor: 'rgba(223, 0, 0, 0.59)' }]}>
+							<Text style={[styles.onText]}>OFF</Text>
+						</View>
+					)}
+					<Image
+						source={{
+							uri: props.img,
+						}}
+						style={[styles.imgStyle]}
+					/>
+				</View>
+				<View style={[styles.textContainer]}>
+					{props.isOnline ? <View style={[styles.online]} /> : null}
 
-				<Row style={[styles.alignCenter]}>
-					<Text style={[styles.nameStyle]}>{props.deviceName}</Text>
-					<Icon name="people" style={{ color: color.grey3 }} />
-				</Row>
-				<Text style={[styles.descStyle]} numberOfLines={2}>
-					{props.description}
-				</Text>
-				<Row style={{ marginTop: 10 }}>
-					<View style={[styles.iconCover]}>
-						<Icon name="notifications" style={[styles.iconStyle]} />
-					</View>
-					<View style={[styles.iconCover]}>
-						<Icon name="time" style={[styles.iconStyle]} />
-					</View>
-				</Row>
-			</View>
-		</Card>
+					<Row style={[styles.alignCenter]}>
+						<Text style={[styles.nameStyle]}>{props.deviceName}</Text>
+						<Icon name="people" style={{ color: color.grey3 }} />
+					</Row>
+					<Text style={[styles.descStyle]} numberOfLines={2}>
+						{props.description}
+					</Text>
+					<Row style={{ marginTop: 10 }}>
+						<View style={[styles.iconCover]}>
+							<Icon name="notifications" style={[styles.iconStyle]} />
+						</View>
+						<View style={[styles.iconCover]}>
+							<Icon name="time" style={[styles.iconStyle]} />
+						</View>
+					</Row>
+				</View>
+			</Card>
+		</TouchableOpacity>
 	);
 };
 

src/constants/Styles.js

@@ -10,7 +10,7 @@ export const color = {
 
 export const theme = StyleSheet.create({
 	startContainer: {
-		top: 120,
+		top: '15%',
 		paddingHorizontal: 50,
 	},
 	startTitle: {