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:

> yarn add rnmapbox/maps#main

Using npm: Install the latest source from git:

> npm install --save rnmapbox/maps#main

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:

> touch .netrc
> open .netrc

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

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

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:

$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

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:

import React,{useEffect} from 'react';
import { StyleSheet, View } from 'react-native';
import MapboxGL from '@rnmapbox/maps';

const App = () => {
  useEffect(()=>{
   MapboxGL.setAccessToken('<YOUR_PUBLIC_MAPBOX_ACCESS_TOKEN>');
  },[])
  return (
    <View style={styles.root}>
      <View style={styles.container}>
        <MapboxGL.MapView style={styles.map} />
      </View>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  root: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    height: 300,
    width: 300,
  },
  map: {
    flex: 1
  }
});

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!!🥂

Mapbox view on iOS simulator

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.