Manually place user location on main map

mobile/src/Home/Home.js

@@ -31,6 +31,7 @@ import KeyboardSpacer from "react-native-keyboard-spacer"
 import hardhatPinImage from "./images/hardhat-pin.png"
 import clipboardPinImage from "./images/clipboard-pin.png"
 import questionPinImage from "./images/question-pin.png"
+import locationImage from "./images/location.png"
 import moment from "moment"
 
 const neverAskForLocationPermissionKeyName = "NeverAskForLocationPermission"
@@ -175,8 +176,8 @@ export class Home extends React.Component {
   }
 
   handleWorkItemsListPress() {
-    if (this.currentPosition) {
-      const { coords } = this.currentPosition
+    if (this.state.currentPosition) {
+      const { coords } = this.state.currentPosition
 
       this.props.history.push(
         `/workItemList?latLng=${coords.latitude},${coords.longitude}`
@@ -209,13 +210,13 @@ export class Home extends React.Component {
   }
 
   handleGlassesPress() {
-    const { sections: workItems } = this.state
+    const { sections: workItems, currentPosition } = this.state
 
-    if (this.currentPosition) {
+    if (currentPosition) {
       const {
         latitude: latitude1,
         longitude: longitude1,
-      } = this.currentPosition.coords
+      } = currentPosition.coords
       let closestWorkItem = config.alwaysShowWorkItemInAR ? workItems[0] : null
       let shortestDistance = config.minDistanceToItem
 
@@ -247,8 +248,10 @@ export class Home extends React.Component {
   }
 
   handleMyLocationPress() {
-    if (this.currentPosition && this.isMapReady) {
-      const coords = this.currentPosition.coords
+    const { currentPosition } = this.state
+
+    if (currentPosition && this.isMapReady) {
+      const { coords } = currentPosition
 
       this.mapView.animateToCoordinate({
         latitude: coords.latitude,
@@ -278,12 +281,14 @@ export class Home extends React.Component {
   }
 
   handlePositionUpdate(position) {
-    this.currentPosition = position
+    this.setState({ currentPosition: position })
   }
 
   getCoordinateDistance(coordinate) {
-    if (this.currentPosition) {
-      const coords = this.currentPosition.coords
+    const { currentPosition } = this.state
+
+    if (currentPosition) {
+      const { coords } = currentPosition
       const { latitude, longitude } = coordinate
 
       return (
@@ -308,6 +313,7 @@ export class Home extends React.Component {
       waitModal,
       haveCameraPermission,
       haveLocationPermission,
+      currentPosition,
     } = this.state
 
     return (
@@ -334,7 +340,7 @@ export class Home extends React.Component {
             showWorkItems && { height: "40%" },
             !showWorkItems && { flexGrow: 1 },
           ]}
-          showsUserLocation
+          showsUserLocation={false}
           showsBuildings={false}
           showsTraffic={false}
           showsIndoors={false}
@@ -370,6 +376,14 @@ export class Home extends React.Component {
               </Callout>
             </Marker>
           ))}
+          {currentPosition && (
+            <Marker
+              key={sections.length}
+              coordinate={currentPosition.coords}
+              anchor={{ x: 0.5, y: 0.5 }}
+              image={locationImage}
+            />
+          )}
         </MapView>
         <View
           style={{
@@ -459,7 +473,7 @@ export class Home extends React.Component {
                       <Text style={{ fontSize: 14, color: "gray" }}>
                         {activity.teamName +
                           " | " +
-                          dotify(moment(activity.createdAt).format())}
+                          dotify(moment(activity.createdAt).format(), -15)}
                       </Text>
                     </View>
                     <Icon