Package Exports

@rnmapbox/maps
@rnmapbox/maps/lib/commonjs/index.js
@rnmapbox/maps/lib/module/index.js
@rnmapbox/maps/src/index.web.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rnmapbox/maps) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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, the following implementations are supported:

RNMapboxMapsImpl	Notes
mapbox	New Mapbox v10 implementation - recommended
maplibre	MapLibre opensource fork of Mapbox SDKs - will be dropped in next version
mapbox-gl	Legacy mapbox implementation iOS Android - legacy, will be dropped in next version

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

Prerequisite

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

Dependencies

Installation

Step 1 - Install Package:

Using `yarn`

Install the latest source from git:

yarn add rnmapbox/maps#main

Using `npm`

Install the latest source from git:

npm install --save rnmapbox/maps#main

Installing other versions

Replace rnmapbox/maps#main with the following to install other versions:

@rnmapbox/maps installs the latest release

Using `expo`

Please follow the Expo Guide.

Step 2 - Installation Guides:

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

Developer Group

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

@rnmapbox/maps