Skip to content
Make with

MapLibre React NativeOfficial

React Native wrapper for MapLibre Native

Maintained by MapLibre

Documentation ↗Source ↗

MapLibre React Native provides a comprehensive React Native wrapper around MapLibre Native, supporting both iOS and Android platforms with full feature parity.

Quick start

npm install @maplibre/maplibre-react-native
import { Camera, Map } from "@maplibre/maplibre-react-native";

export default function App() {
  return (
    <Map mapStyle="https://tiles.openfreemap.org/styles/liberty">
      <Camera initialViewState={{ center: [0, 20], zoom: 2 }} />
    </Map>
  );
}
›Setup noteschecked with v11.4.0

@maplibre/maplibre-react-native 11.4.0 (v11). v11 renamed MapView to Map (mapStyle prop), renamed Camera defaultSettings to initialViewState ({center: [lng, lat], zoom}), and supports only the New Architecture. It requires React Native >=0.80, React >=19.1 and Android API 23+. It wraps MapLibre Native Android 13.6.1 and iOS 6.31.0. Map fills its parent by default (style defaults to {flex: 1}). Expo: run npx expo install @maplibre/maplibre-react-native, add "@maplibre/maplibre-react-native" to expo.plugins in app.json, then rebuild (Expo >=54, a development build; Expo Go is not supported). Bare React Native: add $MLRN.post_install(installer) to the post_install block of ios/Podfile, run pod install in ios/, then rebuild. Android needs no extra setup.

More platforms on Get started.

Used by 2 products

The map in VeloPlanner

VeloPlanner

Cycling

VeloPlanner provides detailed guides for official cycling routes and an advanced route planner. It uses MapLibre GL JS on the web and MapLibre Native in its React Native mobile apps, with vector tiles served by Martin.

GL JS + Native · Web, Android, iOS

SmartGuide

Travel

Digital audio travel guide displaying offline maps.

Native · Android, iOS