[iOS - Google Maps] Fix animateToCoordinate and animateToRegion (react-native-maps#1115)

* Add animateToCoordinate to Google Maps on iOS

* Add animate to random coordinate button in example app

* Fix animateToRegion duration for Google Maps on iOS

Author: ryankask

example/examples/DisplayLatLng.js

@@ -43,15 +43,25 @@ class DisplayLatLng extends React.Component {
     this.map.animateToRegion(this.randomRegion());
   }
 
-  randomRegion() {
-    const { region } = this.state;
+  animateRandomCoordinate() {
+    this.map.animateToCoordinate(this.randomCoordinate());
+  }
+
+  randomCoordinate() {
+    const region = this.state.region;
     return {
-      ...this.state.region,
       latitude: region.latitude + ((Math.random() - 0.5) * (region.latitudeDelta / 2)),
       longitude: region.longitude + ((Math.random() - 0.5) * (region.longitudeDelta / 2)),
     };
   }
 
+  randomRegion() {
+    return {
+      ...this.state.region,
+      ...this.randomCoordinate(),
+    };
+  }
+
   render() {
     return (
       <View style={styles.container}>
@@ -74,13 +84,19 @@ class DisplayLatLng extends React.Component {
             onPress={() => this.jumpRandom()}
             style={[styles.bubble, styles.button]}
           >
-            <Text>Jump</Text>
+            <Text style={styles.buttonText}>Jump</Text>
           </TouchableOpacity>
           <TouchableOpacity
             onPress={() => this.animateRandom()}
             style={[styles.bubble, styles.button]}
           >
-            <Text>Animate</Text>
+            <Text style={styles.buttonText}>Animate (Region)</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => this.animateRandomCoordinate()}
+            style={[styles.bubble, styles.button]}
+          >
+            <Text style={styles.buttonText}>Animate (Coordinate)</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -112,16 +128,20 @@ const styles = StyleSheet.create({
     alignItems: 'stretch',
   },
   button: {
-    width: 80,
-    paddingHorizontal: 12,
+    width: 100,
+    paddingHorizontal: 8,
     alignItems: 'center',
-    marginHorizontal: 10,
+    justifyContent: 'center',
+    marginHorizontal: 5,
   },
   buttonContainer: {
     flexDirection: 'row',
     marginVertical: 20,
     backgroundColor: 'transparent',
   },
+  buttonText: {
+    textAlign: 'center',
+  },
 });
 
 module.exports = DisplayLatLng;

lib/ios/AirGoogleMaps/AIRGoogleMapManager.m

@@ -26,6 +26,7 @@
 #import "RCTConvert+AirMap.h"
 
 #import <MapKit/MapKit.h>
+#import <QuartzCore/QuartzCore.h>
 
 static NSString *const RCTMapViewKey = @"MapView";
 
@@ -75,10 +76,31 @@ - (UIView *)view
     if (![view isKindOfClass:[AIRGoogleMap class]]) {
       RCTLogError(@"Invalid view returned from registry, expecting AIRGoogleMap, got: %@", view);
     } else {
-      [AIRGoogleMap animateWithDuration:duration/1000 animations:^{
-        GMSCameraPosition* camera = [AIRGoogleMap makeGMSCameraPositionFromMap:(AIRGoogleMap *)view andMKCoordinateRegion:region];
-        [(AIRGoogleMap *)view animateToCameraPosition:camera];
-      }];
+      // Core Animation must be used to control the animation's duration
+      // See http://stackoverflow.com/a/15663039/171744
+      [CATransaction begin];
+      [CATransaction setAnimationDuration:duration/1000];
+      AIRGoogleMap *mapView = (AIRGoogleMap *)view;
+      GMSCameraPosition *camera = [AIRGoogleMap makeGMSCameraPositionFromMap:mapView andMKCoordinateRegion:region];
+      [mapView animateToCameraPosition:camera];
+      [CATransaction commit];
+    }
+  }];
+}
+
+RCT_EXPORT_METHOD(animateToCoordinate:(nonnull NSNumber *)reactTag
+                  withRegion:(CLLocationCoordinate2D)latlng
+                  withDuration:(CGFloat)duration)
+{
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    id view = viewRegistry[reactTag];
+    if (![view isKindOfClass:[AIRGoogleMap class]]) {
+      RCTLogError(@"Invalid view returned from registry, expecting AIRGoogleMap, got: %@", view);
+    } else {
+      [CATransaction begin];
+      [CATransaction setAnimationDuration:duration/1000];
+      [(AIRGoogleMap *)view animateToLocation:latlng];
+      [CATransaction commit];
     }
   }];
 }