[react-native] Install react-native-maps

This post is recording the steps involved in installing react-native-maps on both iOS and android on the latest version of react-native.

My package.json dependencies:

“react”: “16.3.1”,
“react-native”: “~0.55.2”,
“react-native-maps”: “⁰.21.0”,

Following official instruction:

You first need to install the latest version of react-native-maps library:

$ npm install react-native-maps --save

Configure installation for iOS:

$ cd ios  
add Podfile (replace all references to _YOUR_PROJECT_TARGET_ with your project target)
$ pod install

Very important message comes up after pod install:

Please close any current Xcode sessions and use yourAppName.xcworkspace (NOT .xcproject), which is actually mentioned clearly in Doc as well — “Please make sure to use .xcworkspace, not .xcproject after that”.

Then open .xcworkspace in Xcode

React Native project folder

Add AirGoogleMaps to the project:

Its location:

Two ways to add AirGoogleMaps:

Add files to project

Or drag it to your root project.

Please make sure ‘Create groups’ is checked.

AirGoogleMaps has added to your project

Next, add AirMaps.xcodeproj to the Libraries folder:

And then click your project file, go to Build Phases-> add libAirMaps.a

Add libAirMaps.a

Navigate to the Build Settings, click Header Search Paths, add this by click ‘+’ sign, and set to recursive.

$(SRCROOT)/../node_modules/react-native-maps/lib/ios/AirMaps

To be able to use Google maps, you need to add to ios/YOUR_PROJECT_NAME/AppDelegate.m:

+ @import GoogleMaps; //add this line if you want to use Google Maps

@implementation AppDelegate
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
+  [GMSServices provideAPIKey:@"_YOUR_API_KEY_"]; // add this line using the api key obtained from Google Console
...

Get Google Map API key (for iOS):

maps SDK fro iOS

Add the your API Key to the updated AppDelegate.m file in above.

Configure installation for Android:

Just do what the Doc tells you to do, but please make sure to get the Google Map API Key for Android this time rather than iOS:

Maps SDK for android

How to implement react-native-maps API in your project seems not very difficult after successful installation. I hope this post can help people like me having many failures for using maps in the latest react-native.

This post is inspired by a post named “React Native Google Map with react-native-maps” by Kirsten Swanson. Many thanks.

Useful resources:

AirGoogleMaps directory in Official Doc.

https://gist.github.com/nazrdogan/87c63e89a2bfd4cefee24990e4e7ed0e