DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on • Updated on

React Native Mapbox (rnmapbox/maps v10) Integration


I have worked on react native maps and react native mapbox. From my experience for basic funtionality react native map can be used but for advance and heavy map use, mapbox will be suitable. My requirements was showing multiple markers with feature of updating it on press also showing polygons of regions at same time. This was achieved using mapbox only as the react native map was crashing or the app was freezing very often on latest devices also.
Secondly react native mapbox api's are also cheaper than of google maps.


In this article, we are going to learn the basics of using Mapbox(v10) as a tool for integrating maps in React Native. While Google Maps is probably the most famous mapping system, RNMapBox is best and smoothest in performance. I prefer mapbox as it works perfectly on both iOS and android.

Let's Get Started

In order to use Mapbox, make sure to sign up for an account here. Click on the "Start mapping for free" button which will navigate you to the sign-up page. But if you already have an account, you can alternatively login with your username or email.

After signing in, create a private key, which you will need to go ahead. Refer to the picture below:

Image description

Make a private key and also make sure to enable DOWNLOADS:READ.

Github Url


Step 1 - Install Package:
Using yarn
Install the latest source from git(yarn is Preferred to avoid build error):
yarn add rnmapbox/maps#main

Using npm
Install the latest source from git:
npm install --save rnmapbox/maps#main

Step 2 - Installation Guides - iOS:

Note: xcode version should be 13
Add the following to beginning of your podfile

$RNMapboxMapsImpl = 'mapbox'

Enter fullscreen mode Exit fullscreen mode

Add this also to your ios/Podfile:

  pre_install do |installer|
    ... other pre install hooks
  post_install do |installer|
    ... other post install hooks
Enter fullscreen mode Exit fullscreen mode

Image description

Then do this configuration on system:

Image description

Finally run pod install download the proper mapbox dependency
cd ios && pod install


  1. xcode version should be 13.x or more
  2. If you ever change private key everywhere do again pod install.

iOS configuration finished

Step 3 - Installation Guides - Android:

Setting RNMapboxMapsImpl to v10:

In android/build.gradle do:

buildscript {
    ext {
        // ...
        RNMapboxMapsImpl = "mapbox" // required for v10
        minSdkVersion = 21 // must be 21 or greater
        compileSdkVersion = 31 //should atleast be 31

allprojects {
    repositories {
        // ...other repos
        maven {
            url ''
            authentication {
            credentials {
                // Do not change the username below.
                // This should always be `mapbox` (not your username).
                username = 'mapbox'
                // Use the secret token you stored in as the password
                password =['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
        // ...even more repos?
Enter fullscreen mode Exit fullscreen mode

Configure your secret token
To avoid exposing your secret token, add it as an environment variable:
Find or create a file in your Gradle user home folder. The folder can be found at «USER_HOME»/.gradle. Once you have found or created the file, its path should be «USER_HOME»/.gradle/ Add your secret token your

Go Home-> Show Hidden files using Command+Shift+. -> Open .gradle folder in terminal -> then touch and then press enter will create the file -> Open file and Add your secret token your file:

Enter fullscreen mode Exit fullscreen mode

For compile and target SDK version 30, you can use JDK8 and things will work. If you use compile or target SDK version 31 you must upgrade your tools to JDK11 everywhere. It happens frequently that people think they have done that but their gradle build is using an unexpected version of the JDK and still getting 8. All I can say is: update all places to JDK11 and make sure it is actually in use, and in combination with a compile SDK of 31 and a target SDK of 30 (I can't recommend 31 yet unless you test it thoroughly! many modules are still working or support it) things should work
To change the compilesdkversion = 30 to 31, run this command

brew install --cask adoptopenjdk/openjdk/adoptopenjdk11

Enter fullscreen mode Exit fullscreen mode

Finally sync project and run app.

Android configuration finished


Top comments (2)

hananiradzi profile image
Hanani Radzi

You save my life, man.

fireal1983 profile image

Lifesaver <3