Mapbox Maps SDK for React Native

An unofficial React Native library for building maps with
the Mapbox Maps SDK for iOS and Mapbox Maps SDK for Android

We also support MapLibre flavors of Mapbox SDKs now 🎉

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:

# install with Yarn
yarn add @react-native-mapbox-gl/maps


# or install with NPM
npm install @react-native-mapbox-gl/maps --save

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 completeded 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, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/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>
    );
  }
}

Documentation

Components

Sources

Layers

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": ["@react-native-mapbox-gl/maps/setup-jest"]
}

Developer Group

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

sedot42 / maps Goto Github PK

maps's Introduction