App

components/Graph.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+
+import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg';
+
+
+const Graph = props => {
+    const graphHeight = 100;
+
+    const data = [];
+    for(let i=0; i < 300; ++i) {
+        data.push( Math.random() * 100);
+    }
+
+    const coordStr = data.map((element, i) => `${i*2}, ${element}`);
+
+
+    return (
+        <View style={{justifyContent: 'center', alignItems: 'center'}}>
+            <Svg height={graphHeight} width="80%" viewbox="0 0 100 100">
+                <G transform={"translate(0," + graphHeight.toString() + ") scale(1, -1)"}>
+                    <Polyline
+                        points={coordStr.join(" ")}
+                        stroke="black"
+                        strokeWidth="3"
+                        strokeOpacity="0.5"
+                        strokeLinejoin="round"
+                        fill="none"
+                    />
+                </G>
+            </Svg>
+        </View>
+    );
+};
+
+
+export default Graph;

components/IconCard.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import {Icon} from "native-base";
+
+const IconCard = props => {
+
+    return (
+        <View style={styles.card}>
+            <View style={{alignItems: 'center', justifyContent: 'center', paddingLeft: 20}}>
+                <Icon style={{color: 'white', fontSize: 40}} name={props.iconName} type={props.iconType}/>
+                <Text style={{color: 'white', marginTop: 5}}> {props.label}</Text>
+            </View>
+            <View style={{paddingRight: 20}}>
+                <Text style={{color: 'white', fontSize: props.fontSize}}> {props.value}</Text>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    card : {
+        flexDirection: 'row',
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+        margin: 5,
+        padding: 5,
+        borderRadius: 3,
+        justifyContent: 'space-between',
+    }
+});
+
+IconCard.defaultProps =  {
+   fontSize: 85
+};
+
+export default IconCard;

components/PropValueCard.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+
+
+const PropValueCard = props => {
+
+    return (
+        <LinearGradient
+            colors={['#0075c4', '#1A8FDE']}
+            start={[0, 0]}
+            end={[1, 0]}
+            style={styles.gradient}>
+
+            <Text style={{color:'white', fontSize: 16}}>
+                {props.label}
+            </Text>
+            <Text style={{color:'white', fontSize: 55}}>
+                {props.value}
+            </Text>
+        </LinearGradient>
+    );
+};
+
+const styles = StyleSheet.create({
+    gradient : {
+        flex: 1,
+        padding: 15,
+        alignItems: 'center',
+        borderRadius: 16,
+        margin:15,
+        marginRight: 4,
+        height:120,
+        justifyContent:'center',
+    }
+});
+
+
+export default PropValueCard;