added some placeholder functions / code.

mostly learning what I can do with React-Native.

App.js

@@ -1,12 +1,19 @@
 import React, { Component } from 'react';
 import {
-  Platform,
+    Platform,
-  StyleSheet,
+    StyleSheet,
-  Text,
+    Image,
-  View
+    ListView,
+    Text,
+    ScrollView,
+    TextInput,
+    TouchableHighlight,
+    View
 } from 'react-native';
 
 import RunInfo from './components/run-info';
+import RunInfoNumeric from './components/run-info-num';
+
 import MapView from 'react-native-maps';
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' +
@@ -15,29 +22,87 @@ const instructions = Platform.select({
     'Shake or press menu button for dev menu',
 });
 
+{/*<View style={{flex: 1}}>*/}
+{/*<MapView style={styles.map}*/}
+{/*showsUserLocation*/}
+{/*followsUserLocation*/}
+{/*initialRegion={{*/}
+{/*latitude: 37.33307,*/}
+{/*longitude: -122.0324,*/}
+{/*latitudeDelta: 0.02,*/}
+{/*longitudeDelta: 0.02*/}
+{/*}}*/}
+{/*/>*/}
+
 type Props = {};
 export default class App extends Component<Props> {
-  render() {
+    constructor(props) {
-    return (
+        super(props);
-     <View style={{flex: 1}}>
+
-         <MapView style={styles.map}
+        let ds = new ListView.DataSource({rowHasChanged: (a, b) => a !== b});
-                  showsUserLocation
+        this.state = {dataSource: ds.cloneWithRows([
-                  followsUserLocation
+            'john', 'joel', 'miki', 'iu lol', 'yeeet',
-                  initialRegion={{
+            'john', 'joel', 'miki', 'iu lol', 'yeeet',
-                      latitude: 37.33307,
+            'john', 'joel', 'miki', 'iu lol', 'yeeet',
-                      longitude: -122.0324,
+            'john', 'joel', 'miki', 'iu lol', 'yeeet',
-                      latitudeDelta: 0.02,
+            'john', 'joel', 'miki', 'iu lol', 'yeeet',
-                      longitudeDelta: 0.02
+        ])};
-                  }}
+
-         />
+        setInterval(() => {
-       {/*<Text style={{flex: 1, backgroundColor: 'green'}}>Map View</Text>*/}
+            // this.distanceInfo.setState({value: Math.random() * 100});
-       {/*<View style={styles.infoWrapper}>*/}
+            // this.speedInfo.setState({value: Math.random() * 15});
-         {/*<RunInfo title = "Distance" value = "0 km"/>*/}
+            // this.directionInfo.setState({value: this.directionInfo.state === 'N' ? 'NW' : 'N'});
-         {/*<RunInfo title = "Speed" value = "0 km/h"/>*/}
+        }, 1000);
-         {/*<RunInfo title = "Direction" value = "NE"/>*/}
+    }
-       {/*</View>*/}
+    render() {
-     </View>
 
+       return (
+           <ListView
+               dataSource={this.state.dataSource}
+               renderSeparator={() => <View style = {{backgroundColor: '#CCC', height: 1}}/>}
+               renderRow={(row) => (
+                   <View style={{flexDirection: 'row'}}>
+                       <Image source = {{uri: 'https://i.imgur.com/Zbv1S4G.png'}} style = {{width: 50, margin: 10}}/>
+                       <Text style = {{fontSize: 25, padding: 10}}>{row}</Text>
+                   </View>
+               )}
+           />
+//            <View style ={{flex: 1}}>
+//                <TextInput
+//                    style={styles.textInput}
+//                    autoCapitalize="words"
+//                    placeholder="Type something"
+//                    onChangeText={(text) => this.setState({text})}
+//                    onBlur={() => this.setState({ text: this.state.text.toUpperCase() })}
+//                />
+//
+//                <TouchableHighlight
+//                    onPress={() => this.setState({confirmedText: this.state.text})}
+//                    onLongPress={() => this.setState({confirmedText: this.state.text.toLowerCase()})}
+//                >
+//                    <Text style={{fontSize: 16, backgroundColor: '#EEE', textAlign: 'center'}}>Press Me</Text>
+//                </TouchableHighlight>
+//
+//                <Text style={{flex: 1, fontSize: 18}}>
+//                    {this.state.confirmedText}
+//                </Text>
+//
+//                <View style={styles.infoWrapper}>
+//
+//                    <RunInfoNumeric title = "Distance"
+//                                    unit="km"
+//                                    ref={(info) => this.distanceInfo = info}
+//                    />
+//                    <RunInfoNumeric title = "Speed"
+//                                    unit="km/h"
+//                                    ref={(info) => this.speedInfo = info}
+//                    />
+//                    <RunInfo title = "Direction"
+//                             value = "NE"
+//                             ref={(info) => this.directionInfo = info}
+//                    />
+//                </View>
+//            </View>
     );
   }
 }

components/run-info.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import sharedStyles from '../shared-styles';
 import {
     Platform,
     StyleSheet,
@@ -7,11 +8,22 @@ import {
 } from 'react-native';
 
 export default class RunInfo extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { value: this.props.value};
+    }
+
+    formatValue() {
+        return this.state.value;
+    }
+
     render() {
+        let value = this.state.value ? this.formatValue() : '-';
         return (
-            <View>
+            <View style ={[sharedStyles.runInfoWrapper, {flex: 1}]}>
-                <Text>{this.props.title}</Text>
+                <Text style ={sharedStyles.runInfoValue}>{value}</Text>
-                <Text>{this.props.value}</Text>
+                <Text style={sharedStyles.runInfoTitle}>{this.props.title}</Text>
+
             </View>
         )
     }

package.json

@@ -7,6 +7,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "npm": "^6.4.0",
     "react": "16.3.1",
     "react-native": "0.55.4",
     "react-native-maps": "^0.21.0"