React Native Mapbox (rnmapbox/maps v10) Integration

Need:

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.

Introduction

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:

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

Github Url

Installation:

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'

Add this also to your ios/Podfile:

  pre_install do |installer|
    $RNMapboxMaps.pre_install(installer)
    ... other pre install hooks
  end
  post_install do |installer|
    $RNMapboxMaps.post_install(installer)
    ... other post install hooks
  end

Then do this configuration on system:

Refer

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

Note:

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 'https://api.mapbox.com/downloads/v2/releases/maven'
            authentication {
                basic(BasicAuthentication)
            }
            credentials {
                // Do not change the username below.
                // This should always be `mapbox` (not your username).
                username = 'mapbox'
                // Use the secret token you stored in gradle.properties as the password
                password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
            }
        }
        // ...even more repos?
    }
}

Configure your secret token
To avoid exposing your secret token, add it as an environment variable:
Find or create a gradle.properties 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/gradle.properties. Add your secret token your gradle.properties.

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

MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN 

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

Finally sync project and run app.

Android configuration finished

---

USAGE

Comments

[Hanani Radzi]

You save my life, man.

[Fireal]

Lifesaver <3