@maplibre/maplibre-react-native

---

MapLibre GL SDK for React Native

A React Native library for building maps with
the MapLibre GL Native SDK for iOS & Android.

This project originated as a fork of rnmapbox, a community-maintained React Native Library for building maps with the Mapbox iOS and Android mobile SDKs. The original product supported both Mapbox and MapLibre for some time, but as the MapLibre and Mapbox SDKs have diverged, it has become necessary to separate the projects into specific wrappers by underlying renderer.

This project is in the process of being onboarded and prepared for broad use by the MapLibre community. PRs and tickets welcomed. Track the status over at: https://github.com/maplibre/maplibre/issues/134

---

TODO: update NPM badge

---

Quickstart for app developers

Prerequisites

1. On Android we support from version 6 (API 23) upwards
2. You will need a vector tile source (such as Stadia Maps or MapTiler) for production use; a demonstration URL is used in the below example.

Dependencies

• node
• npm
• React Native (0.60+)

Installation

Step 1 - Install Package:

# install with Yarn
yarn add @maplibre/maplibre-react-native


# or install with NPM
npm install @maplibre/maplibre-react-native --save

Step 2 - Installation Guides:

• Android
• iOS
• Expo
• Example

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

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  map: {
    flex: 1,
    alignSelf: 'stretch',
  },
});

export default class App extends Component {
  render() {
    return (
      <View style={styles.page}>
        <MapboxGL.MapView
          style={styles.map}
          logoEnabled={false}
          styleURL="https://demotiles.maplibre.org/style.json"
        />
      </View>
    );
  }
}

Documentation

Components

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

Sources

• VectorSource
• ShapeSource
• RasterSource

Layers

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

Offline

• OfflineManager
• SnapshotManager

Misc

• MapboxGL
• CustomHttpHeaders
• Logger

Expo Support

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

Quickstart for contributors

Environment Setup

This project includes .nvmrc. You should use nvm so that you're always developing for the correct version of Node.

This project uses yarn as a package manager. DO NOT install yarn using npm as that will install the outdated 1.x branch. Full instructions are in the yarn docs, but here's the quick checklist at the time of this writing.

1. corepack enable
2. corepack prepare yarn@stable --activate
3. On first install, the above may change your yarn config away from pnp; check your git working copy for changes and revert if necessary.
4. yarn install

JetBrains IDE Setup

Your JetBrains IDE (such as IntelliJ) needs to be set to use yarn under Preferences > Languages & Frameworks > Node.js. This may require a manual change if you did not have yarn previously installed.

Testing with Jest

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

Example:

"jest": {
  "preset": "react-native",
  "setupFilesAfterEnv": ["@maplibre/maplibre-react-native/setup-jest"]
}

Optional: Local development with yalc

When developing locally, it is often desirable to test in the context of an external project. However, it's not easy to do this out of the box with yarn or npm. yalc can mitigate some of the pain with this.

Community

Join the #maplibre-native Slack channel at OSMUS: get an invite at https://slack.openstreetmap.us/ Read the CONTRIBUTING.md guide in order to get familiar with how we do things around here.

Changelog

8.6.0-beta.0

fix: add TypeScript type for MapViews's preferredFramesPerSecond prop (#1717) fix(example): update /example project (iOS only) to work with ARM-based Macs (#1703)