Register for Prevent bottlenecks during mobile development on September 13
Register
White arrow point right
App Development

React Native Maps: Tutorial With Examples

Llamdo
Llamdo
React Native Maps: Tutorial With Examples
October 12, 2021
9
min read

Maps are an integral part of a lot of mobile apps nowadays. They are used for everything from finding directions somewhere to tracking one’s location when out for a jog. It’s a good thing, then, that maps are very easy to integrate in a React Native app.

In this post, we will learn how to integrate Google Maps into a React Native app. We are going to use the react-native-maps library developed by Airbnb in this post. There are some other libraries also, but most of them are not well maintained and have bugs.

The prerequisite to develop this app is knowledge of JavaScript, React, and React Native. We are also going to use the awesome no-coding testing tool Waldo to test our app.

Basic Setup

In this project, we will be using Expo CLI to create a React Native app. It is much easier to use than React Native CLI and is very efficient for a small map demonstration like this post. If we want finer control in our production project, we need to go with React Native CLI. As per expo documentation, we need to install Expo CLI globally using the command below.

 
 
npm install -g expo-cli

Now, we will create a new project for our app using the command below.

expo init react-native-gmapsExpo will ask us to choose a template, and we will choose the option to create a minimal app.

React Native Apps image 1

It will take about two to three minutes to create a React Native app, but it depends on the system configurations. If everything is successful, we will see the screen below.

React Native Apps image 2

Getting Started

We will now start with our project and follow the instructions above. We need to change to the directory first with the cd command and then start the project with the npm start command.

React Native Apps image 3

It will open the Metro Bundler in http://localhost:19002/, which will show a QR code at the bottom left. You can run this app on an Android emulator or an iOS simulator, but I personally don’t run on any of them.

React Native Apps image 4

Running an app on emulators requires a top specification system, and they are slow. Instead, you can open the app in your phone by downloading an Expo Go app from the Play Store or the App Store.

After that, open the Expo Go app and click on Scan QR Code.

React Native Apps image 5

It will open the app on your mobile phone and show the start-up text of a React Native Expo app.

React Native Apps image 6

Installation

One thing to notice is that API Keys are only required if we are uploading our app to Google Play Store or App Store. We will not be doing that now, so API Keys won’t be required. We will be installing react-native-maps by running the command below from our project folder.

 
 
npm install react-native-maps --save-exact
React Native Apps image 7

Basic Usage

The starting point of a React Native app is App.js, and for our simple app, we will update it only. Open the App.js file and remove the lines below in it.

React Native Apps image 8

Now we will import MapView, which is used to display the map, in our project. We are using it inside the return statement and giving four props to it. The four props descriptions are described below.

  • style: To give any specific style to the map. Here, we are using StyleSheet.absoluteFillObject, which will make our app launch in full screen mode.
  • provider: We are giving the provider as Google. If we don’t specify it, it will be given the native map framework (i.e., Apple Maps for iOS and Google Maps for Android).
  • mapType: We are taking it as hybrid, which is the default standard. The other options are satellite and terrain.
  • region: We have to give an object containing latitude, longitude, latitudeDelta, and longitudeDelta. Latitude and longitude are the coordinates in which the map will start. The latitudeDelta and longitudeDelta are used for calculating the size of the map.
React Native Apps image 9

Now, a beautiful, full-sized Google Map will be shown in our app.

React Native Apps image 10

Marker for Current Location

We can also display a marker for any location in our application. To display a marker, we need to include Marker component as a child of MapView component. We are using the same coordinates here.

React Native Apps image 11

Now, a nice marker will be shown in our app.

React Native Apps image 12

Customizing the Marker

We can also customize the marker to show anything instead of the current drop pin. First pass any component as a child of Marker component. We are passing a StyledMarker component as a child, which creates a beautiful yellow circle with centered text.

React Native Apps image 13

Now, a yellow marker will be shown instead of the default marker.

React Native Apps image 14

Adding Google API Keys

We want to build an APK file, and for that we need to add Google API keys for Maps SDK. I have followed the process in the official expo documents and created the API keys for Maps SDK for Android. The instructions for that can be found here.

As per the documentation, we have to add the API keys in app.json file.

React Native Apps image 15

Building the APK File

We need the APK file to deploy the app in the Google Play store and also for testing in the next part. Creating an APK file with Expo is very easy. We just have to give the command below from inside the app.

 
 
expo build:android

Next, it will ask us to give a package name. Just press Enter to move ahead.

React Native Apps image 16

Now, it will ask for the build type. Just press Enter, as we need APK only.

React Native Apps image 17

Next, it will ask to upload a keystore or generate a new one. Leave the default option of Generate new keystore and press Enter.

React Native Apps image 18

Now, the APK build process will start. It takes a good 10 to 15 minutes and generates a file of around 60 MB. If the process is successful, we will get a link to download the APK file. Copy the link in a browser and it will start the download.

React Native Apps image 19

Waldo No-Code Testing

We will test our application with the awesome no-code testing platform called Waldo. To test our app, we require the APK file from the previous step.

First create a free Waldo account from this link. Now, we need to upload the APK file. Click on Select your .apk file and select the file from your local system.

React Native Apps image 20

It will take about two to three minutes to upload the file.

React Native Apps image 21

After that, Waldo will verify our app, which will take another minute or two.

React Native Apps image 22

After that, it will prepare our app for testing and show us a nice animation.

React Native Apps image 23

In the next screen, we will be able to perform up to 15 interactions with the app. (This limitation exists in the free version.) After completing the interactions, click the Save test button.

React Native Apps image 24

In the next screen, click the Run Test button.

React Native Apps image 25

It will take one to two minutes to run the tests.

React Native Apps image 26

We’ll also receive an email containing our test results at the registered email address.

React Native Apps image 27

Conclusion

In this post we have learned to add maps in our React Native app. We have implemented a map in our app through the easy-to-use react-native-maps package from Airbnb. We have also learned how to add a marker in the map and how to customize it.

After that we learned to create an APK file easily with Expo. We also did a quick and successful test with the Waldo no-code testing platform.

With Waldo we were able to test our app without writing those complicated unit tests. So, give it a try.

This post was written by Nabendu Biswas. Nabendu has been working in the software industry for the past 15 years, starting as a C++ developer, then moving on to databases. For the past six years he’s been working as a web-developer working in the JavaScript ecosystem, and developing web-apps in ReactJS, NodeJS, GraphQL. He loves to blog about what he learns and what he’s up to.

Automate testing for your mobile app.Start building your first test for free

Subscribe to our newsletter for the latest news and resources

Thank you for subscribing to our blog!