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.

App.tsxApp.js

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>
    );
  }
}

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.

iOSAndroid

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.