Added waypoint markers and polyline.

App.js

@@ -22,87 +22,79 @@ 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 = {};
+let id = 0;
 export default class App extends Component<Props> {
     constructor(props) {
         super(props);
+        this.state = { markers: [] };
+
 
-        let ds = new ListView.DataSource({rowHasChanged: (a, b) => a !== b});
-        this.state = {dataSource: ds.cloneWithRows([
-            'john', 'joel', 'miki', 'iu lol', 'yeeet',
-            'john', 'joel', 'miki', 'iu lol', 'yeeet',
-            'john', 'joel', 'miki', 'iu lol', 'yeeet',
-            'john', 'joel', 'miki', 'iu lol', 'yeeet',
-            'john', 'joel', 'miki', 'iu lol', 'yeeet',
-        ])};
 
          setInterval(() => {
-            // this.distanceInfo.setState({value: Math.random() * 100});
-            // this.speedInfo.setState({value: Math.random() * 15});
-            // this.directionInfo.setState({value: this.directionInfo.state === 'N' ? 'NW' : 'N'});
+            this.distanceInfo.setState({value: Math.random() * 100});
+            this.speedInfo.setState({value: Math.random() * 15});
+            this.directionInfo.setState({value: this.directionInfo.state === 'N' ? 'NW' : 'N'});
         }, 1000);
+
+        let watchID = navigator.geolocation.watchPosition((position) => {
+            this.setState({
+                markers: [
+                    ...this.state.markers, {
+                        coordinate: position.coords,
+                        key: id++
                     }
+                ]
+            }, null, {distanceFilter: 1});
+        });
+        this.state = {markers: [], watchID };
+    }
+
+    componentWillUnmount() {
+        navigator.geolocation.stopWatch(this.state.watchID);
+    }
+
     render() {
 
         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}}>
+                <MapView
+                    showsUserLocation
+                    style = {styles.map}
+                    initialRegion={{
+                        latitude: -43.5610623,
+                        longitude: 172.5655853,
+                        latitudeDelta: 0.02,
+                        longitudeDelta: 0.02,
+                    }}
+                    // onRegionChange = {(region)=> this.addMarker((region))}
+                >
+                    <MapView.Polyline
+                        coordinates={this.state.markers.map((marker) => marker.coordinate)}
+                        strokeWidth={5}
                     />
-//            <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>
+                    {/*{this.state.markers.map((marker) => (*/}
+                        {/*<MapView.Marker coordinate = {marker.coordinate} key={marker.key} />*/}
+                    {/*))}*/}
+                </MapView>
+
+
+               <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>
     );
   }
 }