How to Add Google Maps to Your Expo React Native Project

#react #reactnative #beginners

Introduction

React native has taken the mobile development industry by storm since its unveiling in 2015. Since then it has been adopted by some of the world's largest tech companies such as Facebook, Airbnb, Uber, Or Pinterest. With that in mind, it should be a pretty common requirement in many applications to use the world's most popular mapping app, Google Maps. In this blog, I will show you how to use Google Maps in your own react native apps.

Getting Set Up

To complete this task we are going to need to install the component react-native-apps which was created by AirBnB for their own app. This is in addition to our own version of Expo.

Before we begin please make sure you have Node Package Manager or npm as well as Yarn.

To get us started, we are going to need to install Expo onto our machine. To do this we can run the command within our terminal npm install --global expo-cli. After Expo has completed we can go ahead and create our project with expo init <project name>. For this instance, we are going to name our project "test_app". After this, we will be presented with a few options to get our project started. We will then choose the option "blank".

After our project has been successfully created we are then going to change the directory into the project we had just created using cd test_app.

Within our main directory, we are going to run the command:
npm install react-native-maps --save-exact
or
yarn add react-native-maps -E

Note: Expo defaults to using yarn as its package manager. Since it will cause problems to mix package managers make sure you only use one or the other.

After this, we can open our file with any text editor of your choice. In this instance, I will be using VSCode.

Adding Google Maps to Our Created Project

From within our parent directory, there should be a file named App.js. Opening it should look like below.

We are going to import our MapView from the react-native-apps component. To do this we are going to add import MapView from 'react-native-maps'; to line 4. After this, we now have access to the MapView tag

Now within our return statement within our app function, we can add our map to make it show up on our react-native app. We can delete the Text tag from line 10 and add our own tag <MapView></MapView>. Your App.js file should now look something like this.

Now our map is initiated within our app, but you can't see it anywhere. To fix this we are going to need to add a bit of styling to the mix. Within our MapView tag, we are going to go ahead and add style={StyleSheet.absoluteFillObject} which will make the map fill the entire screen of the device. Make sure we also add provider={MapView.PROVIDER_GOOGLE} to make sure our map application defaults to Google Maps.

And there we go! We now have a fully functioning map running within React Native. Further customization of the map can be made with additional styling. Further modification of the map including its initial starting location instructions can also be found here