Setup React-Native-Maps in iOS with Google Maps in React Native 0.60+

Learn how to install the react-native-maps package in iOS complete with the Google Maps integration for React Native v0.60+ in this step-by-step introductory guide.

google mapview

Tested on React Native 0.60.5.

The react-native-maps docs mention that they only support the latest version of React Native:

Due to the rapid changes being made in the React Native ecosystem, we are not officially going to support this module on anything but the latest version of React Native.

However, the React Native ecosystem can be fragile, and newer versions can result in breaking changes to other dependencies.

So the workaround here is explicitly configuring a version of react-native-maps that has been shown to work in older versions. Stability over features.

Note that this guide only focuses on the react-native-maps iOS integrations for React Native versions beyond v0.60.

Let's get to it.

Step 0: Rebuild

If you ever run into any errors, first try rebuilding the project.

Run this after installing any new npm package.

  1. Stop Metro (terminal)
  2. Exit simulator
  3. Run script
rm -rf node_modules && npm install &&
cd ios &&
pod deintegrate &&
pod install &&
cd .. &&
npx react-native run-ios

If the application is not building on your physical device, try cleaning the build folder in Xcode located in Product -> Clean Build Folder.

Step 1: react-native init

In my case, I chose to initialize the typescript template of the project for v0.60.5.

npx react-native init MyApp --template react-native-template-typescript@6.2.0

cd into the project.

cd MyApp

Step 2: react-native-maps

npm install react-native-maps@git+https://github.com/react-community/react-native-maps.git#cc12beecc71363f68d9beebb00b5885ed6d3912c

Step 3: Setup Google Cloud

Prerequisites:

Note that it is possible to create an API key before enabling the Maps SDK for iOS. This will cause the map to show as blank. So, make sure to enable the SDK beforehand.

Step 4: Alter ./ios/MyApp/AppDelegate.m

Note the highlighted lines. Those are the lines that you have to add.

./ios/MyApp/AppDelegate.m
#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:@"_YOUR_API_KEY_"]; // add this line using the api key obtained from Google Console
...

Step 5: Alter ./ios/Podfile

Note the highlighted lines. Those are the lines that you have to add.

./ios/Podfile
...
# React Native Maps dependencies
rn_maps_path = '../node_modules/react-native-maps'
pod 'react-native-google-maps', :path => rn_maps_path
pod 'GoogleMaps', '3.2.0'
pod 'Google-Maps-iOS-Utils'
use_native_modules!
end

Step 6: Rebuild and Run

  1. Stop Metro (terminal)
  2. Exit simulator
  3. Run script
rm -rf node_modules && npm install &&
cd ios &&
pod deintegrate &&
pod install &&
cd .. &&
npx react-native run-ios

After running the script, the application should load without errors.

Step 7: Test Installation with a MapView

To test the installation, try replacing the contents of ./App.tsx with this example code:

./App.tsx
import React from "react";
import { StyleSheet } from "react-native";
import MapView from "react-native-maps";
const App = () => {
return (
<MapView
style={{
...StyleSheet.absoluteFillObject,
}}
provider="google"
initialRegion={{
latitude: 37.422,
longitude: -122.0841,
latitudeDelta: 0.04,
longitudeDelta: 0.04,
}}
/>
);
};
export default App;

You should see a result similar to this (except vertical):

google mapview

Thanks for reading, I hope you found this helpful.