@rnmapbox/maps

What is @rnmapbox/maps?

@rnmapbox/maps is a React Native library that provides a comprehensive set of tools for integrating Mapbox maps into mobile applications. It allows developers to add interactive maps, customize map styles, and incorporate various map features such as markers, annotations, and user location tracking.

What are @rnmapbox/maps's main functionalities?

Displaying a Map

This feature allows you to display a basic map using Mapbox. The code sample shows how to render a map view with a camera set to a specific zoom level and center coordinate.

import MapboxGL from '@rnmapbox/maps';

<MapboxGL.MapView style={{ flex: 1 }}>
  <MapboxGL.Camera
    zoomLevel={8}
    centerCoordinate={[-73.970895, 40.723279]}
  />
</MapboxGL.MapView>

Adding Markers

This feature allows you to add markers to the map. The code sample demonstrates how to place a point annotation (marker) at a specific coordinate on the map.

import MapboxGL from '@rnmapbox/maps';

<MapboxGL.MapView style={{ flex: 1 }}>
  <MapboxGL.Camera
    zoomLevel={8}
    centerCoordinate={[-73.970895, 40.723279]}
  />
  <MapboxGL.PointAnnotation
    id="marker1"
    coordinate={[-73.970895, 40.723279]}
  />
</MapboxGL.MapView>

User Location Tracking

This feature enables tracking of the user's location on the map. The code sample shows how to configure the map to follow the user's location and display it on the map.

import MapboxGL from '@rnmapbox/maps';

<MapboxGL.MapView style={{ flex: 1 }}>
  <MapboxGL.Camera
    followUserLocation={true}
    followUserMode="normal"
  />
  <MapboxGL.UserLocation visible={true} />
</MapboxGL.MapView>

Other packages similar to @rnmapbox/maps

react-native-maps

react-native-maps is a popular library for integrating maps into React Native applications. It supports both Google Maps and Apple Maps, providing a wide range of features such as markers, polygons, and custom map styles. Compared to @rnmapbox/maps, react-native-maps is more versatile in terms of map provider support but may lack some of the advanced styling and data visualization capabilities of Mapbox.

react-native-mapbox-gl

react-native-mapbox-gl is another library for using Mapbox maps in React Native applications. It offers similar functionalities to @rnmapbox/maps, such as map rendering, annotations, and user location tracking. However, @rnmapbox/maps is a more recent and actively maintained package, providing better support and more up-to-date features.

README

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

---

News & Discussions

→ Call for additional maintainers discussion thread

---

---

Supported Implementations

At the moment we support Mapbox (v10) and Mapbox (v11) beta. We default to Mapbox (v10).

See iOS & Android setup guide for using v11 beta

Prerequisite

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

Dependencies

• node
• npm
• React Native (0.70+, older versions from 0.64+ might or might not work)

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

• MapView
• StyleImport
• Light
• StyleSheet
• PointAnnotation
• MarkerView
• Callout
• Camera
• UserLocation
• LocationPuck
• Images
• Image
• Models

Sources

• VectorSource
• ShapeSource
• RasterSource
• RasterDemSource

Layers

• BackgroundLayer
• CircleLayer
• FillExtrusionLayer
• FillLayer
• LineLayer
• RasterLayer
• SymbolLayer
• HeatmapLayer
• SkyLayer
• ModelLayer

Terrain

• Terrain
• Atmosphere

Offline

• OfflineManager
• SnapshotManager

Misc

• Mapbox
• CustomHttpHeaders
• Logger

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.

Scout To Hunt	Terrain Dance

---

Developer Group

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