Remove autobind decorator. Fix bugs in AR view

mobile/src/Activity/Activity.js

@@ -23,7 +23,7 @@ import {
   FormStaticInput,
 } from "../ui"
 import { MessageModal, WaitModal, ProgressModal } from "../Modal"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { isIphoneX } from "react-native-iphone-x-helper"
 import { api } from "../API"
@@ -86,14 +86,17 @@ export class Activity extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       binder: new FormBinder({}, Activity.bindings),
       waitModal: null,
       messageModal: null,
       progressModal: null,
       uploadPercent: 0,
-      region: config.initialRegion,
     }
+    this.region = null
+    this.isMapReady = false
+    this.goToRegionWhenReady = false
 
     const { search } = this.props.location
     const params = search ? new URLSearchParams(search) : { get: () => null }
@@ -116,15 +119,22 @@ export class Activity extends React.Component {
                 },
                 Activity.bindings
               ),
-              region: {
-                latitude: lat,
-                longitude: lng,
-                latitudeDelta: 0.01,
-                longitudeDelta: 0.01,
-              },
               location: formatLatLng(lat, lng),
               dateTime: moment().format(),
             })
+
+            this.region = {
+              latitude: lat,
+              longitude: lng,
+              latitudeDelta: config.activityRegionDelta,
+              longitudeDelta: config.activityRegionDelta,
+            }
+          }
+
+          if (this.isMapReady) {
+            this.mapView.animateToRegion(this.region)
+          } else {
+            this.goToRegionWhenReady = true
           }
         })
         .catch((err) => {
@@ -170,7 +180,15 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
+  handleOnMapReady() {
+    if (this.goToRegionWhenReady) {
+      this.mapView.animateToRegion(this.region)
+      this.goToRegionWhenReady = false
+    }
+
+    this.isMapReady = true
+  }
+
   handleMessageDismiss() {
     const back = this.state.messageModal.back
     this.setState({ messageModal: null })
@@ -179,7 +197,6 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleBackPress() {
     const { history } = this.props
 
@@ -190,7 +207,6 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleDonePress() {
     const { binder } = this.state
     let obj = binder.getModifiedBindingValues()
@@ -228,7 +244,6 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleUploadStarted() {
     this.setState({
       progressModal: { message: "Uploading Photo..." },
@@ -236,7 +251,6 @@ export class Activity extends React.Component {
     })
   }
 
-  @autobind
   handleUploadProgress(uploadData) {
     if (this.state.progressModal) {
       this.setState({
@@ -250,12 +264,10 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleUploadEnded(successful, uploadData) {
     this.setState({ progressModal: null })
   }
 
-  @autobind
   handleUploadCanceled() {
     this.setState({ progressModal: null })
   }
@@ -266,7 +278,6 @@ export class Activity extends React.Component {
       messageModal,
       progressModal,
       waitModal,
-      region,
       dateTime,
       location,
       uploadPercent,
@@ -306,6 +317,7 @@ export class Activity extends React.Component {
             <FormStaticInput label="Location:" value={location} />
             <View style={{ flexDirection: "column", justifyContent: "center" }}>
               <MapView
+                ref={(ref) => (this.mapView = ref)}
                 style={{
                   flexDirection: "column",
                   justifyContent: "center",
@@ -324,7 +336,8 @@ export class Activity extends React.Component {
                 showsScale={false}
                 showsUserLocation
                 cacheEnabled
-                region={region}
+                initialRegion={config.initialRegion}
+                onMapReady={this.handleOnMapReady}
               />
               <Icon
                 name="target"