Merge commit '4247d9be4b4ff291737e2f512be3bf8ed16e42da'

* commit '4247d9be4b4ff291737e2f512be3bf8ed16e42da': Fix abi splits on example app Fix null activity crash Update for dependency issues (react-native-maps#1092) Improve documentation for fitToCoordinates (react-native-maps#1037) Add one more tip to Android installation troubleshooting (react-native-maps#1060) Mention rgba option for polygons in docs (react-native-maps#1084) specify `react-native link` command (react-native-maps#1086) Updated Google play services and gradle build plugin (react-native-maps#1023) Improve documentation of customMapStyle (react-native-maps#1085) Conflicts: android/build.gradle android/googlemap/src/main/java/com/airbnb/android/react/maps/googlemap/AirGoogleMapView.java android/src/main/java/com/airbnb/android/react/maps/AirMapManager.java example/android/app/build.gradle
jiaminglu · May 24, 2017 · 6b17888 · 6b17888
2 parents a886397 + 4247d9b
commit 6b17888
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -254,6 +254,24 @@ render() {
   );
 }
 ```
+For iOS, in addition to providing the `mapStyle` you will need to do the following
+
+```jsx
+import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'
+
+// ...
+
+<MapView
+  provider={PROVIDER_GOOGLE}
+  customMapStyle={MapStyle}
+>
+```
+
+Then add the AirGoogleMaps directory:
+
+https://github.com/airbnb/react-native-maps/blob/1e71a21f39e7b88554852951f773c731c94680c9/docs/installation.md#ios
+
+An unoffical step-by-step guide is also available at https://gist.github.com/heron2014/e60fa003e9b117ce80d56bb1d5bfe9e0
 
 ## Examples
 

diff --git a/android/build.gradle b/android/build.gradle
@@ -18,7 +18,7 @@ buildscript {
       }
   }
   dependencies {
-    classpath 'com.android.tools.build:gradle:2.1.0'
+    classpath 'com.android.tools.build:gradle:2.2.3'
   }
 }
 
@@ -39,12 +39,12 @@ allprojects {
 }
 
 android {
-  compileSdkVersion 23
+  compileSdkVersion 25
   buildToolsVersion "23.0.3"
 
   defaultConfig {
     minSdkVersion 16
-    targetSdkVersion 23
+    targetSdkVersion 25
   }
 
   lintOptions {

diff --git a/android/googlemap/build.gradle b/android/googlemap/build.gradle
@@ -22,8 +22,8 @@ android {
 }
 
 dependencies {
-    compile "com.google.android.gms:play-services-base:9.8.0"
-    compile "com.google.android.gms:play-services-maps:9.8.0"
+    compile "com.google.android.gms:play-services-base:10.0.1"
+    compile "com.google.android.gms:play-services-maps:10.0.1"
     compile project(':react-native-maps:common')
     testCompile 'junit:junit:4.12'
 }
diff --git a/.../googlemap/src/main/java/com/airbnb/android/react/maps/googlemap/AirGoogleMapManager.java b/.../googlemap/src/main/java/com/airbnb/android/react/maps/googlemap/AirGoogleMapManager.java
@@ -209,8 +209,8 @@ public void updateExtraData(AirGoogleMapView view, Object extraData) {
         view.updateExtraData(extraData);
     }
 
-    void pushEvent(View view, String name, WritableMap data) {
-        reactContext.getJSModule(RCTEventEmitter.class)
+    void pushEvent(ThemedReactContext context, View view, String name, WritableMap data) {
+        context.getJSModule(RCTEventEmitter.class)
                 .receiveEvent(view.getId(), name, data);
     }
 

diff --git a/...oid/googlemap/src/main/java/com/airbnb/android/react/maps/googlemap/AirGoogleMapView.java b/...oid/googlemap/src/main/java/com/airbnb/android/react/maps/googlemap/AirGoogleMapView.java
@@ -95,6 +95,7 @@ public AirGoogleMapView(ThemedReactContext reactContext, Context appContext, Air
         this.context = reactContext;
 
         super.onCreate(null);
+        // TODO(lmr): what about onStart????
         super.onResume();
         super.getMapAsync(this);
 
@@ -145,7 +146,7 @@ public void onMapReady(final GoogleMap map) {
         this.map.setInfoWindowAdapter(this);
         this.map.setOnMarkerDragListener(this);
 
-        manager.pushEvent(this, "onMapReady", new WritableNativeMap());
+        manager.pushEvent(context, this, "onMapReady", new WritableNativeMap());
 
         final AirGoogleMapView view = this;
 
@@ -158,12 +159,12 @@ public boolean onMarkerClick(Marker marker) {
                 event = makeClickEventData(marker.getPosition());
                 event.putString("action", "marker-press");
                 event.putString("id", airMapMarker.getIdentifier());
-                manager.pushEvent(view, "onMarkerPress", event);
+                manager.pushEvent(context, view, "onMarkerPress", event);
 
                 event = makeClickEventData(marker.getPosition());
                 event.putString("action", "marker-press");
                 event.putString("id", airMapMarker.getIdentifier());
-                manager.pushEvent(markerMap.get(marker), "onPress", event);
+                manager.pushEvent(context, markerMap.get(marker), "onPress", event);
 
                 // Return false to open the callout info window and center on the marker
                 // https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap.OnMarkerClickListener
@@ -181,7 +182,7 @@ public boolean onMarkerClick(Marker marker) {
             public void onPolygonClick(Polygon polygon) {
                 WritableMap event = makeClickEventData(polygon.getPoints().get(0));
                 event.putString("action", "polygon-press");
-                manager.pushEvent(polygonMap.get(polygon), "onPress", event);
+                manager.pushEvent(context, polygonMap.get(polygon), "onPress", event);
             }
         });
 
@@ -190,7 +191,7 @@ public void onPolygonClick(Polygon polygon) {
             public void onPolylineClick(Polyline polyline) {
                 WritableMap event = makeClickEventData(polyline.getPoints().get(0));
                 event.putString("action", "polyline-press");
-                manager.pushEvent(polylineMap.get(polyline), "onPress", event);
+                manager.pushEvent(context, polylineMap.get(polyline), "onPress", event);
             }
         });
 
@@ -201,17 +202,17 @@ public void onInfoWindowClick(Marker marker) {
 
                 event = makeClickEventData(marker.getPosition());
                 event.putString("action", "callout-press");
-                manager.pushEvent(view, "onCalloutPress", event);
+                manager.pushEvent(context, view, "onCalloutPress", event);
 
                 event = makeClickEventData(marker.getPosition());
                 event.putString("action", "callout-press");
                 AirGoogleMapMarker markerView = markerMap.get(marker);
-                manager.pushEvent(markerView, "onCalloutPress", event);
+                manager.pushEvent(context, markerView, "onCalloutPress", event);
 
                 event = makeClickEventData(marker.getPosition());
                 event.putString("action", "callout-press");
                 AirGoogleMapCallout infoWindow = markerView.getCalloutView();
-                if (infoWindow != null) manager.pushEvent(infoWindow, "onPress", event);
+                if (infoWindow != null) manager.pushEvent(context, infoWindow, "onPress", event);
             }
         });
 
@@ -220,7 +221,7 @@ public void onInfoWindowClick(Marker marker) {
             public void onMapClick(LatLng point) {
                 WritableMap event = makeClickEventData(point);
                 event.putString("action", "press");
-                manager.pushEvent(view, "onPress", event);
+                manager.pushEvent(context, view, "onPress", event);
             }
         });
 
@@ -229,7 +230,7 @@ public void onMapClick(LatLng point) {
             public void onMapLongClick(LatLng point) {
                 WritableMap event = makeClickEventData(point);
                 event.putString("action", "long-press");
-                manager.pushEvent(view, "onLongPress", makeClickEventData(point));
+                manager.pushEvent(context, view, "onLongPress", makeClickEventData(point));
             }
         });
 
@@ -653,31 +654,31 @@ public void run() {
     @Override
     public void onMarkerDragStart(Marker marker) {
         WritableMap event = makeClickEventData(marker.getPosition());
-        manager.pushEvent(this, "onMarkerDragStart", event);
+        manager.pushEvent(context, this, "onMarkerDragStart", event);
 
         AirGoogleMapMarker markerView = markerMap.get(marker);
         event = makeClickEventData(marker.getPosition());
-        manager.pushEvent(markerView, "onDragStart", event);
+        manager.pushEvent(context, markerView, "onDragStart", event);
     }
 
     @Override
     public void onMarkerDrag(Marker marker) {
         WritableMap event = makeClickEventData(marker.getPosition());
-        manager.pushEvent(this, "onMarkerDrag", event);
+        manager.pushEvent(context, this, "onMarkerDrag", event);
 
         AirGoogleMapMarker markerView = markerMap.get(marker);
         event = makeClickEventData(marker.getPosition());
-        manager.pushEvent(markerView, "onDrag", event);
+        manager.pushEvent(context, markerView, "onDrag", event);
     }
 
     @Override
     public void onMarkerDragEnd(Marker marker) {
         WritableMap event = makeClickEventData(marker.getPosition());
-        manager.pushEvent(this, "onMarkerDragEnd", event);
+        manager.pushEvent(context, this, "onMarkerDragEnd", event);
 
         AirGoogleMapMarker markerView = markerMap.get(marker);
         event = makeClickEventData(marker.getPosition());
-        manager.pushEvent(markerView, "onDragEnd", event);
+        manager.pushEvent(context, markerView, "onDragEnd", event);
     }
 
     private ProgressBar getMapLoadingProgressBar() {
@@ -770,7 +771,7 @@ public void onPanDrag(MotionEvent ev) {
         Point point = new Point((int) ev.getX(), (int) ev.getY());
         LatLng coords = this.map.getProjection().fromScreenLocation(point);
         WritableMap event = makeClickEventData(coords);
-        manager.pushEvent(this, "onPanDrag", event);
+        manager.pushEvent(context, this, "onPanDrag", event);
     }
 
     @Override

diff --git a/docs/circle.md b/docs/circle.md
@@ -7,8 +7,8 @@
 | `center` | `LatLng` | (Required) | The coordinate of the center of the circle
 | `radius` | `Number` | (Required) | The radius of the circle to be drawn (in meters)
 | `strokeWidth` | `Number` | `1` | The stroke width to use for the path.
-| `strokeColor` | `String` | `#000` | The stroke color to use for the path.
-| `fillColor` | `String` |  | The fill color to use for the path.
+| `strokeColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The stroke color to use for the path.
+| `fillColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The fill color to use for the path.
 | `zIndex` | `Number` | 0 | The order in which this tile overlay is drawn with respect to other overlays. An overlay with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays with the same z-index is arbitrary. The default zIndex is 0. (Android Only)
 | `lineCap` | `String` | `round` | The line cap style to apply to the open ends of the path.
 | `lineJoin` | `Array<LatLng>` |  | The line join style to apply to corners of the path.

diff --git a/docs/installation.md b/docs/installation.md
@@ -10,7 +10,7 @@ Second, install the native dependencies: You can use `rnpm` (now part of `react-
 add native dependencies automatically then continue the directions below depending on your target OS.
 
 ```
-react-native link
+react-native link react-native-maps
 ```
 
    >This installation should work in physical devices. For Genymotion, be sure to check Android installation about Google Play Services
@@ -22,10 +22,12 @@ react-native link
 1. Setup your `Podfile` like the included [example/ios/Podfile](../example/ios/Podfile), replace all references to `AirMapExplorer` with your project name, and then run `pod install`.
    (If you do not need `GoogleMaps` support for iOS, then you can probably completely skip this step.)
 1. Open your project in Xcode workspace
-1. If you need `GoogleMaps` support also 
+1. If you need `GoogleMaps` support also
     - Drag this folder `node_modules/react-native-maps/ios/AirGoogleMaps/` into your project, and choose `Create groups` in the popup window.
     - In `AppDelegate.m`, add `@import GoogleMaps;` before `@implementation AppDelegate`. In `- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions`, add `[GMSServices provideAPIKey:@"YOUR_GOOGLE_MAP_API_KEY"];`
     - In your project's `Build Settings` > `Header Search Paths`, double click the value field. In the popup, add `$(SRCROOT)/../node_modules/react-native-maps/ios/AirMaps` and change `non-recursive` to `recursive`. (Dragging the folder `node_modules/react-native-maps/ios/AirMaps/` into your project introduces duplicate symbols. We should not do it.)
+
+Note:  We recommend using a version of React Native >= .40.  Newer versions (>= .40) require `package.json` to be set to `"react-native-maps": "^0.13.0"`, while older versions require `"react-native-maps": "^0.12.4"`.
 
 ### Option 2: CocoaPods
 This is now considered the **old way** because it will only work if you **don't** have
@@ -63,7 +65,7 @@ After your `Podfile` is setup properly, run `pod install`.
 ## Android
 
 1. In your `android/app/build.gradle` add:
-   >This step is not necessary if you ran "react-native link"
+   >This step is not necessary if you ran "react-native link react-native-maps"
 
    ```groovy
    ...
@@ -72,9 +74,9 @@ After your `Podfile` is setup properly, run `pod install`.
      compile project(':react-native-maps')
    }
    ```
-   
+
    If you have a different play services than the one included in this library, use the following instead (switch 10.0.1 for the desired version):
-   
+
    ```groovy
    ...
    dependencies {
@@ -125,13 +127,13 @@ If you have a blank map issue, ([#118](https://github.com/airbnb/react-native-ma
 
 You have to link dependencies with rnpm and re-run the build:
 
-1. `react-native link`
+1. `react-native link react-native-maps`
 1. `react-native run-ios`
 
 ### On Android:
 
 1. Be sure to have `new MapsPackage()` in your `MainApplication.java` :
-   >This step is not necessary if you ran "react-native link"
+   >This step is not necessary if you ran "react-native link react-native-maps"
 
    ```
    import com.airbnb.android.react.maps.MapsPackage;
@@ -190,7 +192,7 @@ You have to link dependencies with rnpm and re-run the build:
     - Extras / Google Repository
     - Android 6.0 (API 23) / Google APIs Intel x86 Atom System Image Rev. 19
     - Android SDK Build-tools 23.0.3 
-1. Check manual installation steps if you didn't run "react-native link"
+1. Check manual installation steps if you didn't run "react-native link react-native-maps"
 1. Go to [Google API Console](https://console.developers.google.com/flows/enableapi?apiid=maps_android_backend) and select your project, or create one.
 Then, once enabled, select `Go to credentials`.
 Select `Google Maps Android API` and create a new key.
@@ -212,5 +214,7 @@ Enter the name of the API key and create it.
    gradlew clean
    cd ..
   ```
-  
+
 1. If you are using Android Virtual Devices (AVD), ensure that `Use Host GPU` is checked in the settings for your virtual device.
+
+1. If using an emulator and the only thing that shows up on the screen is the message: `[APPNAME] won't run without Google Play services which are not supported by your device.`, you need to change the emulator CPU/ABI setting to a system image that includes Google APIs.  These may need to be downloaded from the Android SDK Manager first.
diff --git a/docs/mapview.md b/docs/mapview.md
@@ -9,6 +9,7 @@
 | `initialRegion` | `Region` |  | The initial region to be displayed by the map.  Use this prop instead of `region` only if you don't want to control the viewport of the map besides the initial region.<br/><br/> Changing this prop after the component has mounted will not result in a region change.<br/><br/> This is similar to the `initialValue` prop of a text input.
 | `liteMode` | `Boolean` | `false` | Enable lite mode. **Note**: Android only.
 | `mapType` | `String` | `"standard"` | The map type to be displayed. <br/><br/> - standard: standard road map (default)<br/> - satellite: satellite view<br/> - hybrid: satellite view with roads and points of interest overlayed<br/> - terrain: (Android only) topographic view
+| `customMapStyle` | `Array` |  | Adds custom styling to the map component. See [README](https://github.com/airbnb/react-native-maps#customizing-the-map-style) for more information. 
 | `showsUserLocation` | `Boolean` | `false` | If `true` the app will ask for the user's location. **NOTE**: You need to add `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation, otherwise it is going to *fail silently*!
 | `followsUserLocation` | `Boolean` | `false` | If `true` the map will focus on the user's location. This only works if `showsUserLocation` is true and the user has shared their location. **Note**: iOS only.
 | `showsMyLocationButton` | `Boolean` | `true` | `Android only` If `false` hide the button to move map to the current user's location.
@@ -56,9 +57,9 @@
 |---|---|---|
 | `animateToRegion` | `region: Region`, `duration: Number` |
 | `animateToCoordinate` | `coordinate: LatLng`, `duration: Number` |
-| `fitToElements` | `animated: Boolean` |
+| `fitToElements` | `animated: Boolean` | 
 | `fitToSuppliedMarkers` | `markerIDs: String[]`, `animated: Boolean` | If you need to use this in `ComponentDidMount`, make sure you put it in a timeout or it will cause performance problems.
-| `fitToCoordinates` | `coordinates: Array<LatLng>, options: { edgePadding: EdgePadding, animated: Boolean }` |
+| `fitToCoordinates` | `coordinates: Array<LatLng>, options: { edgePadding: EdgePadding, animated: Boolean }` | If called in `ComponentDidMount` in android, it will cause an exception. It is recommended to call it from the MapView `onLayout` event. 
 
 
 

diff --git a/docs/polygon.md b/docs/polygon.md
@@ -6,8 +6,8 @@
 |---|---|---|---|
 | `coordinates` | `Array<LatLng>` | (Required) | An array of coordinates to describe the polygon
 | `strokeWidth` | `Number` | `1` | The stroke width to use for the path.
-| `strokeColor` | `String` | `#000` | The stroke color to use for the path.
-| `fillColor` | `String` |  | The fill color to use for the path.
+| `strokeColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The stroke color to use for the path.
+| `fillColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The fill color to use for the path.
 | `lineCap` | `String` | `round` | The line cap style to apply to the open ends of the path.
 | `lineJoin` | `Array<LatLng>` |  | The line join style to apply to corners of the path.
 | `miterLimit` | `Number` |  | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.

diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle
@@ -83,6 +83,14 @@ android {
         }
 
     }
+    splits {
+        abi {
+            reset()
+            enable enableSeparateBuildPerCPUArchitecture
+            universalApk false  // If true, also generate a universal APK
+            include "armeabi-v7a", "x86"
+        }
+    }
     buildTypes {
         release {
             minifyEnabled enableProguardInReleaseBuilds