React Native Quickstart

Install

npm install @maplibre/maplibre-react-native
cd ios && pod install && cd ..

Minimum: RN 0.73, iOS 13, Android API 21.

Component

import React from 'react';
import { View, StyleSheet } from 'react-native';
import MapLibreGL from '@maplibre/maplibre-react-native';

MapLibreGL.setAccessToken(null); // we don't use Mapbox tokens

const KEY       = process.env.EXPO_PUBLIC_MFD_PUB_KEY ?? 'mfd_pub_xxx';
const STYLE_URL = `https://api.mapsfordevs.com/styles/standard.json?key=${KEY}`;

export default function MapView() {
  return (
    <View style={styles.container}>
      <MapLibreGL.MapView style={styles.map} styleURL={STYLE_URL}>
        <MapLibreGL.Camera
          zoomLevel={11}
          centerCoordinate={[28.04, -26.20]}
        />
        <MapLibreGL.PointAnnotation
          id="office"
          coordinate={[28.04, -26.20]}
        />
      </MapLibreGL.MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map:       { flex: 1 },
});

Expo

Use the dev-client; the SDK ships native code so the standard Expo Go won't work.

npx expo install expo-dev-client
npx expo run:ios
npx expo run:android

Geocoding

type GeocodeItem = {
  lat: number; lng: number; label: string;
  confidence: number; type: string;
};

export async function geocode(query: string): Promise<GeocodeItem[]> {
  const r = await fetch(
    `https://api.mapsfordevs.com/geocode/forward?q=${encodeURIComponent(query)}&limit=5`,
    { headers: { Authorization: `Bearer ${process.env.EXPO_PUBLIC_MFD_PUB_KEY}` } }
  );
  const body = await r.json();
  if (!body.ok) throw new Error(body.error);
  return body.items;
}

Permissions (location, optional)

iOS — Info.plist:

<key>NSLocationWhenInUseUsageDescription</key>
<string>Show your location on the map</string>

Android — AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Then enable user location:

<MapLibreGL.UserLocation visible={true} />

Bundle ID / package name

Add both to the dashboard against your public key:

• iOS bundle identifier (e.g. com.example.app)
• Android package name (must match applicationId in build.gradle.kts)