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:
Using npm:
Install the latest source from 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]:
- From your Mapbox account’s tokens page, click the Create a token button.
- From the token creation page, give your token a name and make sure the box next to the
Downloads:Read
the scope is checked. - Click the Create token button at the bottom of the page to create your token.
- 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(‘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 install
and build your application and Excelsior!! 🎉 You successfully integrated Mapbox into your project! Enjoy creating!!🥂
BONUS TIP:
- Set
scaleBarEnabled
andpitchEnabled
to befalse
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.