Skip to content

MapLibre React Native

Free

Starter

Standard

Professional

If you're using React Native to target both iOS and Android, you can take advantage of the MapLibre Native rendering library using this idiomatic wrapper.

Quickstart

Prerequisite: Set up a React Native project

If you don't have an existing React Native project, create one. If you are new to React Native, be sure you have gone through the Environment Setup guide first.

npx react-native init MyApp

Install Package

From your React Native project's root directory, add the package using your favorite package manager (we'll stick to npm for the examples here).

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

Review platform specific info

Review these post-installation guide(s) for additional information about platform-specific setup, quirks, and steps required before running.

Adding a map

Adding a map to your app is easy using the MapLibreGL.MapView component. Here is an example of a complete, minimal App.js file.

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

// Quirky step required on Android. See Android installation notes.
MapLibreGL.setAccessToken(null);

const apiKey = 'YOUR-STADIA-MAPS-API-KEY';
const styleUrl = `https://tiles.stadiamaps.com/styles/alidade_smooth.json?api_key=${apiKey}`;

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

function App(): JSX.Element {
    return (
        <View style={styles.page}>
        <MapLibreGL.MapView style={styles.map} styleURL={styleUrl} />
    </View>
);
}

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

// Quirky step required on Android. See Android installation notes.
MapLibreGL.setAccessToken(null);

const apiKey = 'YOUR-STADIA-MAPS-API-KEY';
const styleUrl = `https://tiles.stadiamaps.com/styles/alidade_smooth.json?api_key=${apiKey}`;

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}>
        <MapLibreGL.MapView
          style={styles.map}
          styleURL={styleUrl}
        />
      </View>
    );
  }
}

Sign up for a Stadia Maps API key

Before you can run this, you'll need a Stadia Maps API key. You can sign up for free, and no credit card is required! After signing up, create a property and an API key (there's a button at the bottom of the property detail page in the dashboard).

Get a Free Account

Run it!

The easiest way to run the app is via the npm scripts that are automatically configured as part of the React Native init. By default, this will run on a simulator/emulator, which may be slow or have rendering artifacts. Refer to the React Native docs to learn how to test on a real device.

npm run ios
npm run android

Next Steps

The MapLibre React Native repository has dozens of examples to inspire your creativity and should cover most common interactive mapping workflows. For details on the finer points, refer to the extensive documentation.