Skip to main content

​
Mapbox Maps SDK for React Native

A community-supported, open-source React Native library for building maps with the Mapbox Maps SDK for iOS and Mapbox Maps SDK for Android.

Get Started

Create your first map in under 5 minutes

Installation

Install and configure for iOS, Android, and Expo

API Reference

Explore all components and their properties

Examples

Browse interactive examples and code samples

​
Key Features

Native Performance

Built on Mapbox’s native SDKs for smooth 60fps rendering and gesture handling

Rich Components

Full access to sources, layers, annotations, camera controls, and more

Data Visualization

Display GeoJSON, vector tiles, raster sources with customizable styles

3D Terrain

Render elevation data with 3D terrain and building extrusions

Offline Maps

Download map regions for offline use with full caching support

Location Tracking

Built-in user location with customizable pucks and tracking modes

​
Supported Platforms

  • React Native: 0.79+
  • iOS: Mapbox Maps SDK v11.18.2
  • Android: Mapbox Maps SDK v11.18.2
  • Expo: Full support with config plugin
  • Architecture: Built on React Native’s New Architecture (Fabric/TurboModules)
This package requires custom native code and is not available in the Expo Go app. Learn how to use it with custom dev clients.

​
Prerequisites

Before you begin, you’ll need:
  1. A Mapbox account (free tier available)
  2. A Mapbox access token from your account page
  3. Node.js and npm/yarn installed
  4. React Native development environment set up

​
What You Can Build

With @rnmapbox/maps, you can create:
  • Location-based apps with real-time tracking and routing
  • Data visualizations with heatmaps, clusters, and custom markers
  • Interactive maps with tap handlers, gestures, and animations
  • Offline experiences with downloadable map packs
  • 3D environments with terrain, extrusions, and custom models

​
Quick Example

Here’s a simple map to get you started: 
import Mapbox from '@rnmapbox/maps';
import { View, StyleSheet } from 'react-native';

Mapbox.setAccessToken('<YOUR_ACCESS_TOKEN>');

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

const styles = StyleSheet.create({
  page: { flex: 1 },
  map: { flex: 1 }
});

Ready to get started?

Follow the installation guide to set up your project

​
Community & Support

​
License

@rnmapbox/maps is MIT licensed. See the LICENSE file for details.

Build docs developers (and LLMs) love

Get started for freeTalk to us