Remove autobind decorator. Fix bugs in AR view

mobile/src/Home/Home.js

@@ -15,7 +15,7 @@ import MapView, { Marker, Callout } from "react-native-maps"
 import { Icon, Header, Geolocation } from "../ui"
 import { MessageModal } from "../Modal"
 import { api } from "../API"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { ifIphoneX } from "react-native-iphone-x-helper"
 import {
   geoDistance,
@@ -39,14 +39,17 @@ const neverAskForCameraKeyName = "NeverAskForCameraPermission"
 export class Home extends React.Component {
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       sections: [],
       showWorkItems: true,
-      region: config.initialRegion,
       haveCameraPermission: false,
       haveLocationPermission: false,
       currentPosition: null,
     }
+    this.isMapReady = false
+    this.goToRegionWhenReady = false
+    this.region = null
 
     if (Platform.OS !== "ios") {
       ensurePermissions(
@@ -111,12 +114,19 @@ export class Home extends React.Component {
         })
         this.setState({
           sections: list.items,
-          region:
-            regionContainingPoints(
-              list.items.map((item) => item.coordinate),
-              0.02
-            ) || this.state.region,
         })
+
+        this.region =
+          regionContainingPoints(
+            list.items.map((item) => item.coordinate),
+            config.homeRegionInset
+          ) || config.initialRegion
+
+        if (this.isMapReady) {
+          this.mapView.animateToRegion(this.region)
+        } else {
+          this.goToRegionWhenReady = true
+        }
       })
       .catch((err) => {
         this.setState({
@@ -129,12 +139,19 @@ export class Home extends React.Component {
       })
   }
 
-  @autobind
   handleMessageDismiss() {
     this.setState({ messageModal: null })
   }
 
-  @autobind
+  handleOnMapReady() {
+    if (this.goToRegionWhenReady) {
+      this.mapView.animateToRegion(this.region)
+      this.goToRegionWhenReady = false
+    }
+
+    this.isMapReady = true
+  }
+
   handleMarkerPress(e, sectionIndex) {
     if (this.sectionList) {
       this.sectionList.scrollToLocation({
@@ -145,7 +162,6 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handleWorkItemsListPress() {
     if (this.currentPosition) {
       const { coords } = this.currentPosition
@@ -156,29 +172,30 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handleItemSelect(activity) {
     this.props.history.push(`/activity?id=${activity._id}`)
   }
 
-  @autobind
   handleSectionSelect(workItem) {
+    if (!this.isMapReady) {
+      return
+    }
+
     const { latitude, longitude } = workItem.coordinate
-    const region = {
+
+    this.region = {
       latitude,
       longitude,
-      latitudeDelta: 0.01,
-      longitudeDelta: 0.01,
+      latitudeDelta: config.homeRegionDelta,
+      longitudeDelta: config.homeRegionDelta,
     }
-    this.setState({ region })
+    this.mapView.animateToRegion(this.region)
   }
 
-  @autobind
   handleLogoutPress() {
     this.props.history.replace("/logout")
   }
 
-  @autobind
   handleGlassesPress() {
     const { sections: workItems } = this.state
 
@@ -217,24 +234,21 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handleMyLocationPress() {
-    if (this.currentPosition) {
+    if (this.currentPosition && this.isMapReady) {
       const coords = this.currentPosition.coords
 
-      this.map.animateToCoordinate({
+      this.mapView.animateToCoordinate({
         latitude: coords.latitude,
         longitude: coords.longitude,
       })
     }
   }
 
-  @autobind
   handleToggleWorkItemsList() {
     this.setState({ showWorkItems: !this.state.showWorkItems })
   }
 
-  @autobind
   handleCalloutPress(workItem) {
     if (api.loggedInUser.administrator) {
       this.props.history.push(
@@ -245,12 +259,10 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handlePositionUpdate(position) {
     this.currentPosition = position
   }
 
-  @autobind
   getCoordinateDistance(coordinate) {
     if (this.currentPosition) {
       const coords = this.currentPosition.coords
@@ -274,7 +286,6 @@ export class Home extends React.Component {
     const {
       sections,
       showWorkItems,
-      region,
       messageModal,
       haveCameraPermission,
       haveLocationPermission,
@@ -295,7 +306,7 @@ export class Home extends React.Component {
         />
         <MapView
           ref={(ref) => {
-            this.map = ref
+            this.mapView = ref
           }}
           style={[
             {
@@ -310,7 +321,8 @@ export class Home extends React.Component {
           showsIndoors={false}
           zoomControlEnabled={false}
           showsMyLocationButton={false}
-          region={region}>
+          initialRegion={config.initialRegion}
+          onMapReady={this.handleOnMapReady}>
           {sections.map((workItem, index) => (
             <Marker
               key={index}