When it’s time to integrate a maps in your React Native app, you would see there is some tutorials that might give you some hard time to implement. Let’s try to build a simple map app step by step with less confusion possible.

Step 1 — Create your RN project

Let’s start by creating a React Native application from scratch using react-native-cli (If you just want to integrate react-native-maps for your existing app, please skip this step).

If it happens that you don’t have already installed React Native Command Line Interface, go ahead and run:

npm install -g react-native-cli

Once React Native Command Line Interface installed, you can create your project by running:

react-native init MyRNMapProject

To try your app on the iOS Simulator, please run:

react-native run-ios

To run the app on Android, you need to make sure to have the Emulator already open. To do so, you will need to run the app through Android Studio (by dragging dropping MyRNMapProject/Android folder and click on the run button once it’s compiled). Once the Emulator opens up you would be able to use:

react-native run-android

The app should look like this:

Step 2 — Integrate the react-native-maps

To do so, we will use react-native-maps. Let’s add it to our project using this command:

npm add react-native-maps

Adding react-native-maps requires to link the library by using:

react-native link react-native-maps

It also requires to run pod install under ./ios folder

If you miss this last step you will hit this error:

Step 3 — Display iOS Maps

As you know it’s possible to display a map on iOS using the native Apple Maps or Google Maps. We will start by integrating the Apple Maps. Please, skip this step if your aim is to have an app working on iOS and Android, it’s better to integrate the Google one.

Let’s render the maps in App.js. You will need to import the component MapView from react-native-maps to be able to render the MapView component. In this example, Facebook HQ geocoordinate are used, feel free to set the coordinate that you want.

Once done, you can run the app again and you will be prompted to allow the app to access location before to display the Facebook HQ. Success!!

Step 4 — Create your Google Maps Api Key

In order to use Google Maps in your app (iOS and Android), you will need to subscribe your App on Google Cloud Platform. Google Apis will act as your Back-End Apis

To get the Google Maps Api Key, you will need to create your app project. Please follow these steps. The Api key should look like this:

You will also need to enable the Maps SDK for iOS and Maps SDK for Android in your new project.

Step 5 — Display Google Maps on iOS

iOS provides Apple Maps by default. To use Google Maps, you will need to add Google Maps pod (provided by cocoapods) to your Podfile that can be found under ./ios:

pod ‘GoogleMap’

Once added, you should run pod install on your terminal under ./ios:

$ pod install

Once the pod installed, some settings need to be done on your iOS Project. First open your project .xcworkspace project that can be found under ./ios.

As mentioned in react-native-maps package installation, you will also need to drag and drop the library folder ./node_modules/react-native-maps/lib/ios/AirGoogleMaps to your project by making sure the Copy items if needed and Create groups are set:

One last setting still needs to be added! Under Preprocessor Macro in you iOS Project Build Settings, please add HAVE_GOOGLE_MAPS=1 flag:

Then, you will be able to complete the integration by referencing you Google Api Key in ./ios/AppDelegate.m file. See bold lines:

#import “AppDelegate.h”

#import <React/RCTBridge.h>

#import <React/RCTBundleURLProvider.h>

#import <React/RCTRootView.h>

#import <GoogleMaps/GoogleMaps.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

[GMSServices provideAPIKey:@”AIzaSyDn3MZrAy-qcxmLvPmO40H7OBPRNZI2E0I”];

RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge

moduleName:@”RecycleMTL”

initialProperties:nil];

rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

UIViewController *rootViewController = [UIViewController new];

rootViewController.view = rootView;

self.window.rootViewController = rootViewController;

[self.window makeKeyAndVisible];

return YES;

}

To display the Google Maps your will need to alter you MapView element in your App.js and set the provider as a PROVIDER_GOOGLE, provider={PROVIDER_GOOGLE}, after importing it from react-native-maps:

Step 6 — Display Google Maps on Android

Google Maps integration for the Android app is pretty simple! You will just need to reference your Google Api Key in the ./android/app/main/AndroidManifest.xml

<manifest xmlns:android=”http://schemas.android.com/apk/res/android"

package=”com.myrnmapproject”>

<uses-permission android:name=”android.permission.INTERNET” />

<application

android:name=”.MainApplication”

android:label=”@string/app_name”

android:icon=”@mipmap/ic_launcher”

android:roundIcon=”@mipmap/ic_launcher_round”

android:allowBackup=”false”

android:theme=”@style/AppTheme”>

<activity

android:name=”.MainActivity”

android:label=”@string/app_name”

android:configChanges=”keyboard|keyboardHidden|orientation|screenSize”

android:windowSoftInputMode=”adjustResize”>

<intent-filter>

<action android:name=”android.intent.action.MAIN” />

<category android:name=”android.intent.category.LAUNCHER” />

</intent-filter>

</activity>

<activity android:name=”com.facebook.react.devsupport.DevSettingsActivity” />

<meta-data

android:name=”com.google.android.geo.API_KEY”

android:value=”AIzaSyDn3MZrAy-qcxmLvPmO40H7OBPRNZI2E0I”

/>

</application>

</manifest>

Run you app (react-native run-ios and react-native run-android) on both simulator and emulator, the Google Maps will be displayed centered on Facebook HQ:

Et voilà!

Hope this tutorial was helpful. All the source code is available here. Keep up the good work!