Support Google Maps on iOS #548

gilbox · 2016-09-07T21:56:07Z

Setup

# cd into example/
npm install

# cd into example/ios/
pod install
open AirMapsExplorer.xcworkspace

Screenshot

spikebrehm · 2016-09-08T00:23:03Z

Looks like you need to rebase.

spikebrehm · 2016-09-08T00:23:45Z

.gitignore

@@ -33,3 +33,4 @@ local.properties
 #
 node_modules/
 npm-debug.log
+Pods/


add trailing newline

jrichardlai · 2016-09-08T00:56:56Z

Wow this looks interesting :)! Thanks for making an early PR!

fkoester · 2016-09-13T19:05:18Z

The PR title kind of confused me. Maybe rename it to "Google Maps on iOS"? 😉

gilbox · 2016-09-15T00:02:14Z

Far from feature parity, but I think that this is ready.

2ducanhpham · 2016-09-19T04:14:51Z

when feature release? @gilbox

lelandrichardson

Wow. This was a ton of work and is looking great! Overall, the architecture of all of this seems good to me. I had several pretty small changes that I'm hoping you can make, then after that I think we will be ready to merge!

lelandrichardson · 2016-09-19T23:45:45Z

components/MapView.js


 const viewConfig = {
-  uiViewClassName: 'AIRMap',
+  uiViewClassName: 'AIR?Map',


Since we are using one component for two possible different bridged components, this would be AIRMap or AIRGoogleMap. I added the ? to indicate to the user that we don't know which one it is.

Rather than using the arbitrary name in the viewConfig, how about we actually add the correct viewConfig to the component in decorateMapComponent?

lelandrichardson · 2016-09-19T23:46:21Z

components/MapView.js

+   */
+  mapProvider: PropTypes.oneOf([
+    null,
+    undefined,


is this needed? Doesn't not having .isRequired on the end of this already allow these values?

lelandrichardson · 2016-09-19T23:57:14Z

components/MapView.js

+import {
+  contextTypes,
+  airMapName,
+  AIRGoogleMapIsInstalled,


can we get rid of the AIR prefix here?

Can we do this before merging? I don't think AIR prefixes should really make it to JS user-land code...

lelandrichardson · 2016-09-19T23:57:30Z

components/MapView.js

+const airMaps = {
+  default: nativeComponent('AIRMap'),
+};
+if (Platform.OS === 'android') {


Platform.select might be cleaner here...

but it would mean evaluating both cases

lelandrichardson · 2016-09-19T23:58:19Z

components/MapView.js

+  airMaps.google = airMaps.default;
+} else {
+  airMaps.google = AIRGoogleMapIsInstalled ? nativeComponent('AIRGoogleMap') :
+    createNotSupportedComponent('react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS.'); // eslint-disable-line max-len


let's bring in the dedent module and use a template string for this. I've been using that in some other places and it is really nice.

lelandrichardson · 2016-09-20T00:32:02Z

components/MapView.js

+   * Any value other than "google" will default to using
+   * MapKit in iOS or GoogleMaps in android as the map provider.
+   */
+  mapProvider: PropTypes.oneOf([


can we rename this to just provider instead of mapProvider?

lelandrichardson · 2016-09-20T00:33:50Z

example/ios/AirMapsExplorer/AppDelegate.m

 @implementation AppDelegate

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
  NSURL *jsCodeLocation;

+  [GMSServices provideAPIKey:@"AIzaSyAeHIC4IG7XKT2Ls5Ti_YZV-6DHQk6dVHE"];


i assume this is safe to put in here?

Pretty sure it's safe. However, this is a key I generated from my personal account. Do you want to use a key from whatever account you used to generate the android key?

Let's use the same key we're using for the Android example app:

https://github.com/airbnb/react-native-maps/blob/2b88e76c7bf2fc3112a892ecc86bec2d8ca63560/example/android/app/src/main/AndroidManifest.xml#L24

@spikebrehm that key didn't work because it's not configured to allow this iOS app

Interesting. Would the key you generated work with Android? It would be nice to just have one key for the whole example app.

lelandrichardson · 2016-09-20T00:34:13Z

example/ios/Podfile

+use_frameworks!
+
+target 'AirMapsExplorer' do
+	pod 'React', path: '../node_modules/react-native', :subspecs => [


strange indenting

lelandrichardson · 2016-09-20T00:38:24Z

ios/AirGoogleMaps/AIRGoogleMap.m

+    marker.realMarker.map = nil;
+    [self.markers removeObject:marker];
+  }
+  [_reactSubviews removeObject:(UIView *)subview];


what happens if we call [super removeReactSubview:subview] are we intentionally not calling it here?

we're also not calling [super insertReactSubview:subview] above. I'm not sure the best way to handle this, but markers aren't added the way normal views are added as subviews.

lelandrichardson · 2016-09-20T00:41:31Z

ios/AirGoogleMaps/AIRGoogleMap.m

+  CLLocationCoordinate2D b = CLLocationCoordinate2DMake(initialRegion.center.latitude - latitudeDelta,
+                                                         initialRegion.center.longitude - longitudeDelta);
+  GMSCoordinateBounds *bounds = [[GMSCoordinateBounds alloc] initWithCoordinate:a coordinate:b];
+  GMSCameraPosition *camera = [self cameraForBounds:bounds insets:UIEdgeInsetsZero];


it really seems like we should have a pulled out and reusable function to convert an MKCoordinateRegion to a GMSCoordinateBounds

spikebrehm · 2016-09-20T01:38:15Z

components/common.js

+export const USES_DEFAULT_IMPLEMENTATION = 'USES_DEFAULT_IMPLEMENTATION';
+export const NOT_SUPPORTED = 'NOT_SUPPORTED';
+
+export function airMapName(mapProvider) {


Can we prefix each of these getters with get? It's nice for functions to be named as verbs, and non-function variables to be nouns.

spikebrehm · 2016-09-20T01:40:34Z

components/MapView.js


 const viewConfig = {
-  uiViewClassName: 'AIRMap',
+  uiViewClassName: 'AIR?Map',


Rather than using the arbitrary name in the viewConfig, how about we actually add the correct viewConfig to the component in decorateMapComponent?

spikebrehm · 2016-09-20T01:50:58Z

components/common.js

+
+export const AIRGoogleMapIsInstalled = !!NativeModules.UIManager[airMapName('google')];
+
+export function decorateMapComponent(Component, { componentType, providers }) {


How about rather than naming this file common.js, this is decorateMapComponent.js, and we do:

export default function decorateMapComponent(Component, { componentType, providers }) {

👍 I agree. I don't like naming the file common.js

spikebrehm · 2016-09-20T01:51:38Z

components/common.js

+export const NOT_SUPPORTED = 'NOT_SUPPORTED';
+
+export function airMapName(mapProvider) {
+  if (mapProvider === 'google') return 'AIRGoogleMap';


Let's pull the providers out to constants, i.e. PROVIDER_GOOGLE.

spikebrehm · 2016-09-20T01:52:44Z

components/common.js

+  mapProvider: PropTypes.string,
+};
+
+export const createNotSupportedComponent = message => () => console.error(message) || null;


Why || null? Is this just a clever shorthand for:

() => { console.error(message); return null; }

spikebrehm · 2016-09-20T02:08:06Z

components/MapView.js

-        NativeModules.AIRMapManager[name].apply(
-          NativeModules.AIRMapManager[name],
+        this._mapManagerCommand(name).apply(
+          this._mapManagerCommand(name),


This seems a bit fishy. It calls the method with that same method that's being called as the this context?

spikebrehm · 2016-09-20T02:08:41Z

components/MapView.js

@@ -468,14 +499,25 @@ class MapView extends React.Component {

 MapView.propTypes = propTypes;
 MapView.viewConfig = viewConfig;
+MapView.childContextTypes = contextTypes;


Name this local variable childContextTypes.

spikebrehm · 2016-09-20T02:15:06Z

example/App.js

@@ -56,18 +58,36 @@ class App extends React.Component {
    );
  }

+  renderGoogleSwitch() {


We should only render this on iOS, right?

spikebrehm · 2016-09-20T02:17:55Z

example/App.js

+        [Callouts, 'Custom Callouts'],
+        [Overlays, 'Circles, Polygons, and Polylines (ios error)'],
+        [DefaultMarkers, 'Default Markers'],
+        [TakeSnapshot, 'Take Snapshot (incomplete)'],


Perhaps instead of rendering a different list of examples, what do you think about adding a third element to the array indicating whether or not Google Maps is supported, and I guess also a fourth element indicating google-specific caption?

this.renderExamples([ [StaticMap, 'Static map', true], [DisplayLatLng, 'Tracking Position', true, '(incomplete)'], // ... [PolylineCreator, 'Polyline Creator', false], ]);

spikebrehm · 2016-09-20T02:20:12Z

example/examples/StaticMap.js

+          style={StyleSheet.absoluteFill}
+          contentContainerStyle={styles.scrollview}
+        >
+          <Text>Clicking</Text>


Why put each of these in its own <Text>?

Oh... to make it long.

spikebrehm

Wow, thanks for your hard work, @gilbox! This is great. 🍻

At some point can you provide a list of TODOs for what features are not yet working, or what needs to be followed-up on to achieve parity with MapKit?

spikebrehm · 2016-09-20T02:21:55Z

example/ios/Podfile.lock

+  - GoogleMaps/Base (2.0.1)
+  - GoogleMaps/Maps (2.0.1):
+    - GoogleMaps/Base (= 2.0.1)
+  - React/Core (0.32.1):


Elsewhere in the codebase expects 0.32.0 to be installed. Can you make these 0.32.0?

Sure. I will change the version in examples/package.json from ^0.32.0 --> 0.32.0 so this doesn't happen.

spikebrehm · 2016-09-20T02:23:59Z

ios/AirGoogleMaps/AIRGoogleMapCalloutManager.m

+{
+  AIRGoogleMapCallout *callout = [AIRGoogleMapCallout new];
+  //  UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(_handleTap:)];
+  //  // setting this to NO allows the parent MapView to continue receiving marker selection events


I'm going to delete this since I'm not clear on the intended behavior.

spikebrehm · 2016-09-20T02:24:20Z

ios/AirGoogleMaps/AIRGoogleMapManager.m

+RCT_EXPORT_VIEW_PROPERTY(region, MKCoordinateRegion)
+RCT_EXPORT_VIEW_PROPERTY(showsBuildings, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsCompass, BOOL)
+//RCT_EXPORT_VIEW_PROPERTY(showsScale, BOOL)


not supported?

That's correct, it's not supported.

spikebrehm · 2016-09-20T02:24:47Z

ios/AirGoogleMaps/AIRGoogleMapMarker.h

+@interface AIRGoogleMapMarker : UIView
+
+@property (nonatomic, weak) RCTBridge *bridge;
+//@property (nonatomic, weak) AIRGoogleMap *map;


spikebrehm · 2016-09-20T02:25:29Z

ios/AirGoogleMaps/AIRGoogleMapMarkerManager.h

+//  AirMaps
+//
+//  Created by Gil Birman on 9/2/16.
+//  Copyright © 2016 Christopher. All rights reserved.


Who's Christopher?

spikebrehm · 2016-09-21T19:59:33Z

components/decorateMapComponent.js

-  const components = {
-    default: requireNativeComponent(getAirComponentName(null, componentType), Component),
-  };
+  let components = {};


This can be const

spikebrehm · 2016-09-21T20:01:02Z

components/decorateMapComponent.js

+
+  Component.contextTypes = contextTypes;
+  Component.prototype.getAirComponent = function() {
+    const provider = this.context.provider || PROVIDER_DEFAULT;


Up here could we just

if (provider === PROVIDER_DEFAULT) { return getDefaultComponent(); }

the problem with this is it will cause us to call getDefaultComponent 2x instead of 1x

spikebrehm · 2016-09-21T20:02:52Z

example/App.js

 class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Component: null,
-      useGoogleMaps: false,
+      showGoogleMapsSwitch: Platform.OS === 'ios',


Not a big deal, but this doesn't have to be in this.state because it never changes.

spikebrehm · 2016-09-21T20:05:56Z

ios/AirGoogleMaps/AIRGoogleMapMarkerManager.m

+//  AirMaps
+//
+//  Created by Gil Birman on 9/2/16.
+//  Copyright © 2016 Christopher. All rights reserved.


Each of these files has the phantom "Christopher" copyright.

spikebrehm · 2016-09-21T20:43:47Z

components/decorateMapComponent.js

+export const USES_DEFAULT_IMPLEMENTATION = 'USES_DEFAULT_IMPLEMENTATION';
+export const NOT_SUPPORTED = 'NOT_SUPPORTED';
+
+export const PROVIDER_DEFAULT = 'default';


Let's also export these on MapView, so people can do:

<MapView provider={MapView.PROVIDER_GOOGLE}> ... </MapView>

Perhaps we should pull these out to a ProviderConstants.js or similar.

spikebrehm · 2016-09-21T20:44:00Z

components/decorateMapComponent.js

+export const googleMapIsInstalled = !!NativeModules.UIManager[getAirMapName(PROVIDER_GOOGLE)];
+
+export default function decorateMapComponent(Component, { componentType, providers }) {
+  let components = {};


This can be const

spikebrehm · 2016-09-21T21:06:30Z

Smoke tested on iOS, it works great!!!

gilbox · 2016-09-21T22:23:01Z

I think I've addressed all the comments that I could. This code review system is way confusing compared to GHE.

spikebrehm · 2016-09-21T22:41:31Z

components/decorateMapComponent.js

@@ -0,0 +1,81 @@
+/* eslint-disable */


Let's not disable this for the whole file. Can we just fix the violations?

spikebrehm · 2016-09-21T22:43:30Z

example/examples/AnimatedMarkers.js

@@ -67,6 +68,10 @@ class AnimatedMarkers extends React.Component {
  }
 }

+AnimatedMarkers.propTypes = {
+  provider: PropTypes.string,


Ideally this would specify PropTypes.oneOf([...]), but NBD really.

Perhaps we could expose MapView.ProviderPropType!!

julien-rodrigues · 2016-09-22T15:25:50Z

AMAZING. I came across the Google Places API policies and I saw I can't put Places data on other than Google's maps so this PR saves my life and the life of our iOS version. Can we hope to see these additions landing in the coming month? :D

spikebrehm · 2016-09-22T17:02:40Z

Wooo 🎉 🍻 let's do this!

In #548, we added Google Maps support for iOS. We changed the example app to list examples based on whether they support Google Maps on iOS. The logic was such that on Android it only showed the examples that are iOS + Google Map compatible, however on Android this condition is irrelevant, this commit changes it to show all examples on Android, regardless.

julien-rodrigues · 2016-09-22T20:41:25Z

This was unexpected haha 🎉 🍻 congrats

* commit '7a5083cbb820faec0bb684c010e15c222ce7e533': (22 commits) Add an options argument Update README with example Add edgePadding example Add default arguments to fitToCoordinates -Set constant for baseMapPadding used in newLatLngBounds calls -Remove extraenous comment -Port fitToCoordinates functionality over to Android Add example Update docs Add fitToCoordinates method Fix list of examples on Android Support Google Maps on iOS (react-native-maps#548) fix react-native-maps#453 Make MAP_TYPES constant, don't pass `none` mapType to iOS Fix some changes missed in rebase renamed the 'url' property to 'urlTemplate' for consistency with ios added support for tile overlays (MKTileOverlay) changed url template to use {x} {y} {z} pattern replacement initial support for tile overlays Updated Mapview onRegionChange events notes Adding support for Android lite mode ...

stereodenis · 2016-10-04T20:25:38Z

@gilbox @spikebrehm is it possible to use it without cocoapods?

rops · 2016-10-05T15:45:17Z

Has anyone noticed a performance regression on Android with this change? I'm still investigating, but it seems like calling animateToRegion on Android got slower with this commit.

gilbox · 2016-10-06T06:06:05Z

@stereodenis unfortunately GoogleMaps SDK for iOS only supports install with cocoapods

In react-native-maps#548, we added Google Maps support for iOS. We changed the example app to list examples based on whether they support Google Maps on iOS. The logic was such that on Android it only showed the examples that are iOS + Google Map compatible, however on Android this condition is irrelevant, this commit changes it to show all examples on Android, regardless.

spikebrehm reviewed Sep 8, 2016
View reviewed changes

.gitignore

@@ -33,3 +33,4 @@ local.properties

#

node_modules/

npm-debug.log

Pods/

Copy link

spikebrehm Sep 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add trailing newline

gilbox force-pushed the gil/google branch from 47acf34 to 476474b Compare September 14, 2016 19:15

gilbox changed the title ~~GoogleMaps support~~ GoogleMaps support for iOS Sep 14, 2016

gilbox changed the title ~~GoogleMaps support for iOS~~ [WIP] GoogleMaps support for iOS Sep 14, 2016

gilbox changed the title ~~[WIP] GoogleMaps support for iOS~~ GoogleMaps support for iOS Sep 15, 2016

lelandrichardson changed the title ~~GoogleMaps support for iOS~~ Support Google Maps on iOS Sep 19, 2016

lelandrichardson requested changes Sep 20, 2016

View reviewed changes

spikebrehm reviewed Sep 20, 2016

View reviewed changes

spikebrehm suggested changes Sep 20, 2016

View reviewed changes

gilbox force-pushed the gil/google branch from 8f55b76 to bed2ddd Compare September 20, 2016 21:48

spikebrehm reviewed Sep 21, 2016

View reviewed changes

[google] initial google map support

ee57a01

gilbox force-pushed the gil/google branch from a8467cf to ee57a01 Compare September 21, 2016 22:15

spikebrehm reviewed Sep 21, 2016

View reviewed changes

gilbox added 5 commits September 21, 2016 15:55

[google] ProviderPropType

2d37a79

[google] decorateMapComponent - don't ignore entire file w/eslint

4640109

[google] remove accidental file ProviderPropType

ffdd901

[google] rmv dead code

1ff25b5

[google] avoid warning when AIRMapLite doesn't exist

1a3c819

gilbox added 2 commits September 21, 2016 16:23

[google] rmv dead imports in examples

ce65670

[google] eslint-disable-next-line

623945c

spikebrehm approved these changes Sep 22, 2016

View reviewed changes

gilbox merged commit f78c0ee into master Sep 22, 2016

gilbox deleted the gil/google branch September 22, 2016 17:03

spikebrehm mentioned this pull request Sep 22, 2016

Fix list of examples on Android #597

Merged

lelandrichardson mentioned this pull request Sep 23, 2016

Google Maps support for iOS #35

Closed

rops mentioned this pull request Oct 3, 2016

Xcode 7.3.1 Compatibility (or not?) #629

Closed

jgkim mentioned this pull request Oct 6, 2016

When running for IOS, support for Google maps is on its way? #633

Closed

kfiroo pushed a commit to kfiroo/react-native-maps that referenced this pull request Oct 13, 2016

Support Google Maps on iOS (react-native-maps#548)

dc8981c

rops mentioned this pull request Oct 21, 2016

Performance regression on Android #716

Closed

mlanter mentioned this pull request Oct 25, 2016

[marker flicker] Fix flicker of map pins on state change #728

Merged


		export const AIRGoogleMapIsInstalled = !!NativeModules.UIManager[airMapName('google')];

		export function decorateMapComponent(Component, { componentType, providers }) {

Support Google Maps on iOS #548

Support Google Maps on iOS #548

Conversation

gilbox commented Sep 7, 2016 • edited

Setup

Screenshot

spikebrehm commented Sep 8, 2016

Choose a reason for hiding this comment

jrichardlai commented Sep 8, 2016

fkoester commented Sep 13, 2016

gilbox commented Sep 15, 2016

2ducanhpham commented Sep 19, 2016

lelandrichardson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

spikebrehm left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

spikebrehm Sep 21, 2016 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

spikebrehm commented Sep 21, 2016

gilbox commented Sep 21, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julien-rodrigues commented Sep 22, 2016

spikebrehm commented Sep 22, 2016

julien-rodrigues commented Sep 22, 2016

stereodenis commented Oct 4, 2016

rops commented Oct 5, 2016

gilbox commented Oct 6, 2016

gilbox commented Sep 7, 2016 •

edited

spikebrehm Sep 21, 2016 •

edited