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

At the moment, the following implementations are supported:

See iOS & Android setup guide for more details on setting RNMapboxMapsImpl

1. On Android we support from version 6 (API 23) upwards
2. Please Sign Up to Mapbox to get the Mapbox Access Token.

• node
• npm
• React Native (0.60+)

# install with Yarn
# yarn add @rnmapbox/maps
yarn add rnmapbox/maps#main


# or install with NPM
# npm install @rnmapbox/maps --save
npm install rnmapbox/maps#main --save

• Android
• iOS
• Expo
• Example

For more information, check out our Getting Started section

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

# Run with yarn
yarn run ios

# or Run with NPM
npm run ios

# Run with yarn
yarn run android

# or Run with NPM
npm run android

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

MapboxGL.setAccessToken('<YOUR_ACCESSTOKEN>');

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.page}>
        <View style={styles.container}>
          <MapboxGL.MapView style={styles.map} />
        </View>
      </View>
    );
  }
}

• MapView
• Light
• StyleSheet
• PointAnnotation
• MarkerView
• Callout
• Camera
• UserLocation
• Images

• VectorSource
• ShapeSource
• RasterSource
• RasterDemSource

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

• Terrain
• Atmosphere

• OfflineManager
• SnapshotManager

• MapboxGL
• CustomHttpHeaders
• Logger

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

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))"
  ]
}

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

Scout To Hunt	Terrain Dance

Have a question or need some help? Join our Gitter developer group!