React Native

@maplibre/maplibre-react-native renders MapLibre Native maps in React Native apps. It loads the Maptoolkit community style URL directly, with no API key.

Installation

npm install @maplibre/maplibre-react-native

Then install the native dependencies and rebuild:

• iOS: run pod install in the ios/ directory.
• Android: no extra steps; the module autolinks.

Basic setup

Pass the community style URL as the mapStyle of a MapView and set the initial view with a Camera.

import { MapView, Camera } from '@maplibre/maplibre-react-native';

export default function Map() {
  return (
    <MapView
      style={{ flex: 1 }}
      mapStyle="https://styles.maptoolkit.org/summer.json"
    >
      <Camera
        defaultSettings={{ centerCoordinate: [13.405, 52.52], zoomLevel: 11 }}
      />
    </MapView>
  );
}

Coordinates are [longitude, latitude], the same order as MapLibre GL JS.

Attribution

Every map must show the Maptoolkit logo and the © Maptoolkit © OSM copyright line, both as tappable links. Keep them visible and unobstructed. See Quick Start - Add attribution.