Target tracking location, BoundHeader, WorkItem page done.

mobile/src/Home/Home.js

@@ -1,5 +1,13 @@
 import React from 'react'
-import { StyleSheet, Text, TextInput, FlatList, Image, View, TouchableOpacity } from 'react-native'
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  FlatList,
+  Image,
+  View,
+  TouchableOpacity,
+} from 'react-native'
 import MapView, { Marker } from 'react-native-maps'
 import { Icon, Header } from '../ui'
 import { api } from '../API'
@@ -66,20 +74,34 @@ export class Home extends React.Component {
     this.props.history.push('/arviewer')
   }
 
+  @autobind
+  handleMyLocationPress() {
+    navigator.geolocation.getCurrentPosition((info) => {
+      if (this.map) {
+        this.map.animateToCoordinate({latitude: info.coords.latitude, longitude: info.coords.longitude})
+      }
+    })
+  }
+
   render() {
     return (
       <View style={styles.container}>
         <Header title='Work Item Map' leftButton={{ icon: 'logout', onPress: this.handleLogoutPress }} rightButton={{ icon: 'glasses', onPress: this.handleGlassesPress }} />
         <MapView
+          ref={ref => { this.map = ref }}
           style={{
             width: '100%', height: '50%',
           }}
+          showsUserLocation
+          showsBuildings={false}
+          showsTraffic={false}
+          showsIndoors={false}
           zoomControlEnabled
           initialRegion={{
             latitude: 43.653908,
             longitude: -79.384293,
             latitudeDelta: 0.0922,
-            longitudeDelta: 0.0421,
+            longitudeDelta: 0.0922,
           }}>
           {
             data.map(marker => (