Ultimate Guide to Integrating React Native with MapboxGL- A Google Map Alternative

Mapbox comes bundled with a lot of services. These services includes:

• Directions
• Matrix
• Geocoding
• Optimization

Mapbox is one of the great alternatives to Google maps out there. Mapbox was built on the OpenStreetMap API with amazing cool features. If you are looking for a cheap map service aside from Google, take a good look at Mapbox. To get started, visit Mapbox Official Website

To create an account, click on start mapping for free. This would take you to signup page to create an account.

If you already have an account, you could sign in with your login details(username or email and password)

On signing in, you get to see your beautiful dashboard with your default public token as shown below:

Mapbox offers a free plan which is reasonable as far as you don’t exceed the limit provided. The limits can be seen on the right hand side of the dashboard. The default public token would be used to make requests to Mapbox API.

Next, We need to create our react native app. To create a react native app, visit this link for directions on how to setup your machine for React Native. Visit React Native Official Website
To create a new React native app, Run this on your terminal

npx react-native init ReactNativeMapbox 

Change directory(cd) into the ReactNativeMapbox folder. To do that, run the command below on your terminal.

cd ReactNativeMapbox

Run the application on your simulator. For this article, I would be running on ios simulator.( I would not be focusing on setting up on for Android in this article). To run the react native app on ios, Run the command below on your terminal

yarn ios

This command would open the app on the default iOS simulator. As shown below

Next, we are going to setup Mapbox on our React Native application. To do that we would be installing the Mapbox npm package. The npm package is found here: Mapbox React Native package for Maps.

Run the following command to install Mapbox on the React Native app

yarn add @react-native-mapbox-gl/maps

As part of the installation process, we would need to click on iOS setup on the repository for an extra setup. As shown in the image below:

Next, Add the following line to your Podfile as shown in the iOS section of the installation guide.

pod 'react-native-mapbox-gl', :path => '../node_modules/@react-native-mapbox-gl/maps'

As shown in the image below:

Next, cd to ios folder and run pod install on your terminal as shown below.
(If you get the error pod not found, run the command gem install cocoapods to install cocoapods and get access to the pod command )

cd ios
pod install

Next, cd back to your root directory using the command.

cd ..

Next, we would go to App.js file and clear the default contents that comes with the react native initialization process. We should have black screen.

Next, we would be importing our libraries to create our map. As shown below

import React, { useEffect, useRef  } from "react";
import { StyleSheet, View, Image, Platform } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";

Next, let's set the access token on MapboxGL. The Mapbox token is our default public token from our mapbox dashboard. The code is shown below:

MapboxGL.setAccessToken("MAPBOX_TOKEN_GOES_HERE");

Next, we would be creating the App component. As shown below

export default App = () => {

}

Next, we need to add the component elements as shown below.

  return (
    <View style={{flex: 1, height: "100%", width: "100%" }}>
      <MapboxGL.MapView
        styleURL={MapboxGL.StyleURL.Street}
        zoomLevel={16}
        centerCoordinate={[3.3362400, 6.5790100]}
        showUserLocation={true}
        style={{flex: 1}}>
          <MapboxGL.Camera
            zoomLevel={16}
            centerCoordinate={[3.3362400, 6.5790100]}
          >
          </MapboxGL.Camera>
      </MapboxGL.MapView>
    </View>
  )

From the code snippet above, we are wrapping the mapbox component in a View component with height and width of 100% to fill the entire container. (It is important we have a height and width for the View component container). We also need to add a style of flex: 1 to the mapbox component as props. (This is also important else you would be getting a white screen). The zoom props ensures the map shows little or more detail depending on what you want to achieve. A large zoom number means you want more detail about an area, a smaller zoom number means less detail.
Another addition Mapbox component is the Camera component. The Camera component also ensure that the map is brought to focus by specifying the same coordinates as shown in the MapView component.

One clear difference between Google Maps and Mapbox is in the way the coordinates are used. For Google maps, it is latitude before longitude but with Mapbox, the longitude comes first before the latitude. This is a very important point to note while working with Mapbox.

Putting everything together, this is the entire component for App.js

import React from "react";
import { View } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";

MapboxGL.setAccessToken("MAPBOX_TOKEN_GOES_HERE");

export default App = () => {
  return (
    <View style={{flex: 1, height: "100%", width: "100%" }}>
      <MapboxGL.MapView
        styleURL={MapboxGL.StyleURL.Street}
        zoomLevel={16}
        centerCoordinate={[3.3362400, 6.5790100]}
        style={{flex: 1}}>
           <MapboxGL.Camera
              zoomLevel={16}
              centerCoordinate={[3.3362400, 6.5790100]}
              animationMode={'flyTo'}
              animationDuration={0}
          	>
          </MapboxGL.Camera>
      </MapboxGL.MapView>
    </View>
  )
}

This is how the simulator looks for IOS and Android

And that is it!!!. 🎉 🎉 🎉 🎉 🎉 🎉. In my next article, I would be showing you how we can add annotations(Points on the map) and in the subsequent article, we would be dealing with Polylines and how to make them work with Mapbox.

PART II - Guide to adding point annotations to Mapbox

PART III - Guide to adding polylines to Mapbox