Skip to main content

​
Overview

Mapbox requires an access token to authenticate API requests. This guide walks you through obtaining a Mapbox access token and setting it up in your React Native application.

​
Prerequisites

  • A Mapbox account (free to create)
  • Installed @rnmapbox/maps package

​
Obtaining Your Access Token

1

Create a Mapbox account

If you don’t have a Mapbox account yet, sign up for free.
2

Access your tokens page

Navigate to your Mapbox account page to view and manage your access tokens.
3

Copy your default token

Mapbox automatically creates a default public token for you. Copy this token - you’ll need it to configure your app.
You can also create new tokens with specific scopes if needed. For most React Native applications, the default public token is sufficient.

​
Setting the Access Token in Your App

Once you have your access token, you need to set it in your React Native application. Add this code early in your app’s lifecycle, typically in your main App.js or App.tsx file: 
import Mapbox from '@rnmapbox/maps';

Mapbox.setAccessToken('<YOUR_ACCESSTOKEN>');

​
Complete Example

Here’s a complete example showing where to place the access token configuration: 
import React from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox, { MapView } from '@rnmapbox/maps';

// Set your Mapbox access token
Mapbox.setAccessToken('<YOUR_ACCESSTOKEN>');

const App = () => {
  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <MapView style={styles.map} />
      </View>
    </View>
  );
};

export default App;

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

​
Best Practices

Never commit your access token directly to version control. Use environment variables or a configuration file that’s excluded from your repository.

​
Using Environment Variables

For better security, store your access token in an environment variable: 
import Mapbox from '@rnmapbox/maps';
import Config from 'react-native-config';

Mapbox.setAccessToken(Config.MAPBOX_ACCESS_TOKEN);

​
Additional Configuration

​
Disabling Telemetry

By default, Mapbox collects telemetry data. If you want to disable this: 
import Mapbox from '@rnmapbox/maps';

Mapbox.setAccessToken('<YOUR_ACCESSTOKEN>');
Mapbox.setTelemetryEnabled(false);
For more information about Mapbox telemetry, visit mapbox.com/telemetry.

​
Android: Setting Connection Status

If you’re hosting styles and sources on localhost during development, you may need to manually set the connection status: 
import Mapbox from '@rnmapbox/maps';

Mapbox.setConnected(true);
This bypasses Android’s ConnectivityManager checks. Set to true for connected, false for disconnected, or null to let ConnectivityManager determine the state.

​
Next Steps

Now that you’ve set up your access token, you’re ready to:
  • Complete platform-specific setup for iOS or Android
  • Learn about Expo setup if using Expo
  • Explore the example code and start building your map application

Build docs developers (and LLMs) love

Get started for freeTalk to us