MapLibre React Native¶

Note

This document is not a comprehensive introduction to React Native, and assumes you already have basic proficiency.

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¶

Warning

All mobile and desktop applications involve making requests using an API key. You must take care to secure this, especially if your app reaches end user outside your organization. See our authentication docs for more details.

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

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, and extensive documentation.

And of course, don't forget to sign up for a free Stadia Maps account, so you can try this on your own device!

Get Started With a Free Account