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

---

---

Well, this post is a one-stop guide to help you setup React Native Mapbox for your React Native CLI project in a simple and efficient manner.

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

---

Once you are done with the installation, do the following:

• Open your terminal in the root directory of your system.
• Run the commands as follows:

[Command-line] > touch .netrc > open .netrc [Command-line]

This will open a text editor into which you have to paste the following:

[Text editor] machine api.mapbox.com login mapbox password YOUR_SECRET_MAPBOX_ACCESS_TOKEN (You need to manually update the password based on the env flavour) [Text editor]

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 add the following lines in the podfile:

[React-Native] $RNMapboxMapsImpl = ‘mapbox’ ……….target ‘YOUR_PROJECT_NAME’ do pod ‘MapboxMaps’, ‘10.8.1’ end ………. ……….pre_install do |installer| $RNMapboxMaps.pre_install(installer) end ………. ……….post_install do |installer| $RNMapboxMaps.post_install(installer) …. …. end [React-Native]

Now the final step is to add the map to your source file and see the magic xD!!

So, in your file(such as App.tsx) follow the snippet below:

[React-Native] import React,{useEffect} from ‘react’; import { StyleSheet, View } from ‘react-native’; import MapboxGL from ‘@rnmapbox/maps’; const App = () => { useEffect(()=>{ MapboxGL.setAccessToken(‘‘); },[]) return ( ); } export default App; const styles = StyleSheet.create({ root: { 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 pod install and build your application and voila!! 🎉 You successfully integrated mapbox into your project! Cheers!!🥂

BONUS TIP:

• Set attributionEnabled and logoEnabled to be false in order to hide the Mapbox logo and “i” button from the map 😉.
  Credit: Shreya Kalra.