React Native Mapbox (rnmapbox/maps v10) Integration
Tags: reactnative, map, reactnativemaps, javascript
Published: 2022-10-17 14:21:24

## 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](https://account.mapbox.com) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmc2nmrbsz1nzzjulymo.png)

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

[Github Url](https://github.com/rnmapbox/maps)

## 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
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jt8s0r1rsrsjg4gvwm2i.png)

Then do this configuration on system:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d22bl41cvwnv9ngwh2fb.png)
[Refer](https://stackoverflow.com/a/67247291/9377254)


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](https://dev.to/ajmal_hasan/react-native-mapbox-v10-usage-4gbp)