How to setup Mapbox for Android in a React-Native project

---

Well in the earlier post we learnt how to set up Mapbox for iOS, in this one we’ll be learning the same for Android. The steps for installation are pretty similar to iOS more or less

Install Package:

Using yarn: Install the latest source from git:

[Git] > yarn add rnmapbox/maps#main [Git]

Using npm: Install the latest source from git:

[Git] > npm install –save rnmapbox/maps#main [Git]

Installing other versions

Replace rnmapbox/maps#main with the following to install other versions:

• @rnmapbox/maps installs the latest release.

---

Adding Mapbox maven repo to your projects:

You will need to authorize your download of the Maps SDK via a secret access token with the DOWNLOADS:READ scope. In order to configure your secret token, follow along below:

In order to get the secret key [YOUR_SECRET_MAPBOX_ACCESS_TOKEN]:

1. From your Mapbox account’s tokens page, click the Create a token button.
2. From the token creation page, give your token a name and make sure the box next to the Downloads:Read the scope is checked.
3. Click the Create token button at the bottom of the page to create your token.
4. The token you’ve created is a secret token, which means you will only have one opportunity to copy it somewhere secure.

Now once the token[YOUR_SECRET_MAPBOX_ACCESS_TOKEN] is generated, keep it handy.

Next up, go to android/build.gradle file and add the following lines of code:

[React-Native] buildscript{ ext{ …. …. RNMapboxMapsImpl = “mapbox” } …. …. } [React-Native]

In the same file, under allprojects, add the following:

[React-Native] allprojects{ repositories{ …. …. google() …. 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 generated in the last step. password = YOUR_SECRET_MAPBOX_ACCESS_TOKEN } } …. …. } [React-Native]

---

Alternatively you can also store the sceret key in android/gradle.properties and use it from there in the project by adding the key as follows:

[React-Native] MAPBOX_DOWNLOADS_TOKEN = YOUR_SECRET_MAPBOX_ACCESS_TOKEN [React-Native]

And in the last step, pass the token as follows:

[React-Native] credentials { // Do not change the username below. // This should always be `mapbox` (not your username). username = ‘mapbox’ // Use the secret token you generated in the last step. password = project.properties[‘MAPBOX_DOWNLOADS_TOKEN’] ?: “” } [React-Native]

---

Once you are done with the above steps, the final step is to add the map to your source file and see our beautiful earth in action xD!!

Adding the map:

[React-Native] import React from ‘react’; import { StyleSheet, View } from ‘react-native’; import MapboxGL from ‘@rnmapbox/maps’; MapboxGL.setAccessToken(‘‘); const App = () => { useEffect(()=>{ MapboxGL.setAccessToken(‘‘); },[]) return ( ); } export default App; const styles = StyleSheet.create({ page: { flex: 1, justifyContent: ‘center’, alignItems: ‘center’, }, container: { height: 300, width: 300, }, map: { flex: 1 } }); [React-Native]

In order to get the public access token [YOUR_PUBLIC_MAPBOX_ACCESS_TOKEN]:

• From your account’s tokens page, you can either copy your default public token or click the Create a token button to create a new public token.

Do yarn install/npm installand build your application and Excelsior!! 🎉 You successfully integrated Mapbox into your project! Enjoy creating!!🥂

BONUS TIP:

• Set scaleBarEnabled and pitchEnabled to be false in order to hide the scalebar at the top and to stop pitch gestures in the map 😉.
  Credit: Shreya Kalra
• If you see 2 files found with path 'lib/arm64-v8a/libc++_shared.so' from inputs issue after installing the library, see possible workaround.