SkillAgentSearch skills...

Maps

A Mapbox react native module for creating custom maps

Install / Use

/learn @rnmapbox/Maps
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

Mapbox Maps SDK for React Native

<table style="border: none; border-width: 0px"> <tr style="border: none; border-width: 0px"> <td style="border: none; border-width: 0px"> <img src="./assets/mapbox_logo.png" height="75"> </td> <td style="border: none; border-width: 0px"> <img src="./assets/React-icon.svg" height="75"> </td> </tr> </table>

| npm version | iOS & Android Build | |---|---|

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


News & Discussions

<span style="color:red"></span> Call for additional maintainers discussion thread


<table> <tr> <td colspan="2" align="center"> <img src="./assets/intro-examples.png"/> </td> </tr> <tr> <td> <img src="./assets/beta-maps-example-point-annotation-960-d280759f6a3d8d75458f399c7a044926.webp" width="1200"/> </td> </tr> <tr> <td> <img src="./assets/beta-maps-guides-migrate-3d-terrain-960-48b1080117817ccfd92e434d0df7546f.webp" width="1200"/> </td> </tr> <tr> <td> <img src="./assets/maps-examples-building-extrusions-960-aaa140cce77da4e8b2dd216032b191b6.webp" width="1200"/> </td> </tr> <tr> <td> <img src="./assets/maps-examples-data-driven-symbols-960-2e2061a6b8127ef305c1b6c159f8dc65.webp" width="1200"/> </td> </tr> </table>

Supported Implementations

We support Mapbox Maps SDK v11. See iOS & Android setup guides.

Prerequisite

  1. Please Sign Up to Mapbox to get the Mapbox Access Token.

Dependencies

Installation

Check our Installation instructions

Getting Started

For more information, check out our Getting Started section

Run Project

Before you run your project be sure you have completed the Installation Guides for Android or iOS.

Run iOS Simulator

# Run with yarn
yarn run ios

# or Run with NPM
npm run ios

Run Android Emulator

# Run with yarn
yarn run android

# or Run with NPM
npm run android

Adding a map

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

Mapbox.setAccessToken('<YOUR_ACCESSTOKEN>');

const App = () => {
  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Mapbox.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
  }
});

Documentation

Components

Sources

Layers

Terrain

Offline

Misc

Expo Support

This package is not available in the Expo Go app. Learn how you can use it with custom dev clients.

Testing with Jest

This library provides some mocks which are necessary for running tests.

Example:

"jest": {
  "preset": "react-native",
  "setupFilesAfterEnv": ["@rnmapbox/maps/setup-jest"],
  "transformIgnorePatterns": [
      "node_modules/(?!(...|@rnmapbox))"
  ]
}

Sponsors

Help drive this repo forward - be a sponsor. Add a comment here to discuss your sponsorship.

<table style="border: none; border-width: 0px"> <tr> <td align="center"> <a href="https://scouttohunt.com/" target="_blank"> <img src="./assets/sponsors/sth.png" alt="Scout To Hunt" height="60" /> </td> <td align="center"> <a href="https://terrain.dance/" target="_blank"> <img src="./assets/sponsors/terrain.dance.png" alt="Terrain Dance LLC" height="60" /> </a> </td> </tr> <tr> <td align="center"></a>

<a href="https://scouttohunt.com/" target="_blank">Scout To Hunt</a></td>

<td align="center"><a href="https://terrain.dance/" target="_blank">Terrain Dance</a></td> </tr> </table>

Developer Group

Have a question or need some help? Use Github discussions or the react-native channel in the mapbox discord.

View on GitHub
GitHub Stars2.8k
CategoryDevelopment
Updated8h ago
Forks936

Languages

Kotlin

Security Score

100/100

Audited on Apr 5, 2026

No findings