adding onMyLocationChange event

docs/mapview.md

@@ -46,6 +46,7 @@ To access event data, you will need to use `e.nativeEvent`. For example, `onPres
 | `onMapReady` |  | Callback that is called once the map is fully loaded.
 | `onRegionChange` | `Region` | Callback that is called continuously when the region changes, such as when a user is dragging the map.
 | `onRegionChangeComplete` | `Region` | Callback that is called once when the region changes, such as when the user is done moving the map.
+| `onMyLocationChange` | `{ coordinate: LatLng }` | Callback that is called when the underlying map figures our users current location. Make sure **showsUserLocation** is set to *true* and that the provider is `"google"`.
 | `onPress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user taps on the map.
 | `onPanDrag` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user presses and drags the map. **NOTE**: for iOS `scrollEnabled` should be set to false to trigger the event
 | `onLongPress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user makes a "long press" somewhere on the map.

example/android/app/src/main/AndroidManifest.xml

@@ -3,6 +3,8 @@
 
     <uses-sdk android:minSdkVersion="16" />
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_COURSE_LOCATION"/>
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 
     <application
       android:allowBackup="true"

example/examples/EventListener.js

@@ -9,7 +9,7 @@ import {
   ScrollView,
 } from 'react-native';
 // eslint-disable-next-line max-len
-import MapView, { Marker, ProviderPropType, Polygon, Polyline, Callout } from 'react-native-maps';
+import MapView, { PROVIDER_GOOGLE, Marker, ProviderPropType, Polygon, Polyline, Callout } from 'react-native-maps';
 import PriceMarker from './PriceMarker';
 
 const { width, height } = Dimensions.get('window');
@@ -81,12 +81,22 @@ class EventListener extends React.Component {
   }
 
   render() {
+    // Events that are dependent on
+    let googleProviderProps = {};
+    if (this.props.provider === PROVIDER_GOOGLE) {
+      googleProviderProps = {
+        onMyLocationChange: this.recordEvent('Map::onMyLocationChange'),
+      };
+    }
+
     return (
       <View style={styles.container}>
         <MapView
           provider={this.props.provider}
           style={styles.map}
           initialRegion={this.state.region}
+          showsUserLocation
+          showsMyLocationButton
           onRegionChange={this.recordEvent('Map::onRegionChange')}
           onRegionChangeComplete={this.recordEvent('Map::onRegionChangeComplete')}
           onPress={this.recordEvent('Map::onPress')}
@@ -96,6 +106,7 @@ class EventListener extends React.Component {
           onMarkerSelect={this.recordEvent('Map::onMarkerSelect')}
           onMarkerDeselect={this.recordEvent('Map::onMarkerDeselect')}
           onCalloutPress={this.recordEvent('Map::onCalloutPress')}
+          {...googleProviderProps}
         >
           <Marker
             coordinate={{

lib/android/src/main/java/com/airbnb/android/react/maps/AirMapManager.java

@@ -309,6 +309,7 @@ public Map getExportedCustomDirectEventTypeConstants() {
     );
 
     map.putAll(MapBuilder.of(
+        "onMyLocationChange", MapBuilder.of("registrationName", "onMyLocationChange"),
         "onMarkerDragStart", MapBuilder.of("registrationName", "onMarkerDragStart"),
         "onMarkerDrag", MapBuilder.of("registrationName", "onMarkerDrag"),
         "onMarkerDragEnd", MapBuilder.of("registrationName", "onMarkerDragEnd"),

lib/android/src/main/java/com/airbnb/android/react/maps/AirMapView.java

@@ -18,6 +18,7 @@
 import android.widget.ImageView;
 import android.widget.ProgressBar;
 import android.widget.RelativeLayout;
+import android.location.Location;
 
 import com.facebook.react.bridge.LifecycleEventListener;
 import com.facebook.react.bridge.ReactApplicationContext;
@@ -170,6 +171,24 @@ public void onMapReady(final GoogleMap map) {
 
     final AirMapView view = this;
 
+    map.setOnMyLocationChangeListener(new GoogleMap.OnMyLocationChangeListener() {
+      @Override
+      public void onMyLocationChange(Location location){
+        WritableMap event = new WritableNativeMap();
+
+        WritableMap coordinate = new WritableNativeMap();
+        coordinate.putDouble("latitude", location.getLatitude());
+        coordinate.putDouble("longitude", location.getLongitude());
+        coordinate.putDouble("altitude", location.getAltitude());
+        coordinate.putFloat("accuracy", location.getAccuracy());
+        coordinate.putFloat("altitude_accuracy", location.getVerticalAccuracyMeters());
+        coordinate.putFloat("speed", location.getSpeed());
+        event.putMap("coordinate", coordinate);
+
+        manager.pushEvent(context, view, "onMyLocationChange", event);
+      }
+    });
+
     map.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
       @Override
       public boolean onMarkerClick(Marker marker) {

lib/components/MapView.js

@@ -367,6 +367,11 @@ const propTypes = {
    */
   onLongPress: PropTypes.func,
 
+  /**
+   * Callback that is called when the underlying map figures our users current location.
+   */
+  onMyLocationChange: PropTypes.func,
+
   /**
    * Callback that is called when user makes a "drag" somewhere on the map
    */

lib/ios/AirGoogleMaps/AIRGoogleMap.h

@@ -22,6 +22,7 @@
 @property (nonatomic, copy) RCTBubblingEventBlock onMapReady;
 @property (nonatomic, copy) RCTBubblingEventBlock onPress;
 @property (nonatomic, copy) RCTBubblingEventBlock onLongPress;
+@property (nonatomic, copy) RCTBubblingEventBlock onMyLocationChange;
 @property (nonatomic, copy) RCTBubblingEventBlock onMarkerPress;
 @property (nonatomic, copy) RCTBubblingEventBlock onChange;
 @property (nonatomic, copy) RCTDirectEventBlock onRegionChange;

lib/ios/AirGoogleMaps/AIRGoogleMap.m

@@ -55,9 +55,22 @@ - (instancetype)init
     _initialRegionSetOnLoad = false;
     _didCallOnMapReady = false;
     _didMoveToWindow = false;
+
+    // Listen to the myLocation property of GMSMapView.
+    [self addObserver:self
+           forKeyPath:@"myLocation"
+              options:NSKeyValueObservingOptionNew
+              context:NULL];
   }
   return self;
 }
+
+- (void)dealloc {
+  [self removeObserver:self
+            forKeyPath:@"myLocation"
+               context:NULL];
+}
+
 - (id)eventFromCoordinate:(CLLocationCoordinate2D)coordinate {
 
   CGPoint touchPoint = [self.projection pointForCoordinate:coordinate];
@@ -389,4 +402,30 @@ + (GMSCameraPosition*) makeGMSCameraPositionFromMap:(GMSMapView *)map andMKCoord
   return [map cameraForBounds:bounds insets:UIEdgeInsetsZero];
 }
 
+#pragma mark - KVO updates
+
+- (void)observeValueForKeyPath:(NSString *)keyPath
+                      ofObject:(id)object
+                        change:(NSDictionary *)change
+                       context:(void *)context {
+  if ([keyPath isEqualToString:@"myLocation"]){
+    CLLocation *location = [object myLocation];
+
+    id event = @{@"coordinate": @{
+                    @"latitude": @(location.coordinate.latitude),
+                    @"longitude": @(location.coordinate.longitude),
+                    @"altitude": @(location.altitude),
+                    @"accuracy": @(location.horizontalAccuracy),
+                    @"altitude_accuracy": @(location.verticalAccuracy),
+                    @"speed": @(location.speed),
+                    }
+                };
+
+  if (self.onMyLocationChange) self.onMyLocationChange(event);
+  } else {
+    // This message is not for me; pass it on to super.
+    [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
+  }
+}
+
 @end

lib/ios/AirGoogleMaps/AIRGoogleMapManager.m

@@ -64,6 +64,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(onMapReady, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onLongPress, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onMyLocationChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onMarkerPress, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTDirectEventBlock)