How To Integrate Google Maps into React Native via Expo 2021

There are many articles on the internet that explain how to integrate Google Maps’ notoriously finickity API into a React Native project — not least React Native’s own excellent documentation — but the pace of change is so rapid in this industry that very few are relevant today even if they were written <12 months ago. So here is a guide to setting up a React Native Expo project from scratch with Google Maps API integration that should be useful to you if it’s 2021.

Step 1: Install Expo and Start your Project

The first step is to install React Native and Expo to create your project. You absolutely don’t need to use Expo but it is an extremely effective and efficient way to build a React Native app — especially if you’re new to the language.

$ npm install -g expo-cli
$ expo init ProjectName

Feel free to name your project as you wish but we’ll refer to it as ProjectName from here on. It will ask if you want to start with a blank project — choose yes and let it build your app. Next you want to move into your project and then run the Expo development server in your browser.

$ cd ProjectName
$ expo start

This will launch a window in your browser with a few options and a QR code. You can press a to launch an Android Emulator, i for iOS simulator or w to run on the web browser — It is important to note that Google Maps will not run run via the web browser so this option is currently not available — though is planned in future updates.

A successful start

Alternatively, you can download the mobile app Expo Go from the App Store or Play Store and scan the QR code to automatically load the app directly onto your phone. We’ll be using the iOS simulator for this project so press i and wait for it to load.

Once the simulator is running we can start to set up the map. To do this we will need to add our first dependency — React Native Maps.

$ expo install react-native-maps

Install it and import it by typing:

 import MapView from ‘react-native-maps’;

into the top of your App.js file. Now if you just add the line:

 <MapView style={{height: ’50%’, width: ‘100%’}} /> 

inside of the View tags the Map is added and visible! You can vary the percentage of the height and width to whatever you like.

This is how your App.js file should look

It is currently displaying Apple Maps, to get our Google Map to load requires a few more steps.

Good but not Google

1. You need to go to the Google API Manager and create a project and then enable the Google Maps SDK for iOS.
2. Click the Credentials tab and then API Key.
3. Copy your API Key and go into the app.json folder and add it into the iOS object inside a config tag like so:

“ios”: {
“supportsTablet”: true,
“bundleIdentifier”: “com.example.ProjectName”,
“config”: {
“googleMapsApiKey”: “YOUR_API_KEY”
}
},

1. You also want to add a bundleIdentifier, this should be a unique description of your app like the line above. Replace example with your name or company name and ProjectName with whatever you wish your project to be called.
2. Go back to the Google API credentials page and click Restrict API Key and and choose the iOS radio button under the Key restriction heading.
3. Under the Add an Item button, add your iOS.bundleIdentifier into the bundle ID field. Doing this will mean that only an app with your specific identifier name will be able to use this key.
4. Finally import { PROVIDER_GOOGLE } from react-native-maps in your App.js file and add the line inside of your MapView tag below the size.

provider={PROVIDER_GOOGLE}

Bonus: If you want to see your current location displayed on the map as well, add below the provider line inside of the MapView tag as well.

showsUserLocation={true}

Et voila!

Our Map is Working!

Our app is now displaying a Google Maps component with location visible and a restrictions applied. Play around with it to see how it functions and enjoy your new mastery of maps and React Native!

Your final App.js file should looks like this