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.
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.
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!