Merge pull request #5 from sampocs/MetricsHabitPreview

UI for MetricsHabitPreview

components/MetricsHabitPreview.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import {View, Text, StyleSheet} from 'react-native'
+
+export default class MetricsHabitPreview extends React.Component {
+    render() {
+        return (
+                <View style = {styles.container}>
+                    <Text style={styles.habitText}>{this.props.habitName}</Text>
+                    <View style={styles.streakContainer}>
+                        <Text style={styles.streakText}>{this.props.streak}</Text>
+                        <Text>in a row!</Text>
+                    </View>
+                </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        height: 50,
+        width: 300,
+        backgroundColor: 'lightgray',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        borderColor: 'black',
+        borderWidth: 2,
+        marginBottom: 10
+    }, 
+    streakContainer: {
+        height: 45,
+        width: 100,
+        backgroundColor: 'white',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'center'
+    },
+    habitText: {
+        fontWeight: 'bold',
+        fontSize: 30
+    },
+    streakText: {
+        fontWeight: 'bold',
+        fontSize: 20
+    }
+})

screens/MetricsHomeScreen.js

@@ -5,6 +5,7 @@ import {
     StyleSheet
 } from 'react-native'
 import { connect } from 'react-redux';
+import MetricsHabitPreview from '../components/MetricsHabitPreview';
 
 const mapStateToProps = (state) => {
     return {
@@ -21,8 +22,13 @@ const mapDispatchToProps = (dispatch) => {
 class MetricsHomeScreen extends React.Component {
     render() {
         return (
-            <View style={styles.container}>
-                <Text> Metrics Home Screen </Text>
+            <View style = {styles.container}>
+                <Text>Metrics Home Screen</Text>
+                <View style = {styles.previews}>
+                    <MetricsHabitPreview habitName='Habit' streak='18'/>
+                    <MetricsHabitPreview habitName='Habit2' streak='14'/>
+                    <MetricsHabitPreview habitName='Habit3' streak='12'/>
+                </View>
             </View>
         )
     }
@@ -32,7 +38,14 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         alignItems: 'center',
-        justifyContent: 'center'
+        justifyContent: 'center',
+    },
+    previews: {
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 30
     }
 })