Get started with React Native and MapLibre GL JS
In this tutorial, you’ll learn how to display a map in React Native using MapLibre GL JS. Together we will make a simple fullscreen map application as an example on how to use MapTiler maps together with React Native and MapLibre GL JS for your own native app.
This app is made with expo-dev-client along with the plugin rnmapbox.
Installation and setting up
- Clone the Get started with React Native and MapLibre GL JS repo
git clone https://github.com/maptiler/get-started-react-native-maplibre-gl-js.git my-react-map
- Navigate to the newly created project folder my-react-map
cd my-react-map
- Install dependencies
npm install
-
Open the
App.js
file. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key or Get your FREE API key here -
Build your project
Android
# Build your native Android project npx expo run:android
iOS
# Build your native iOS project npx expo run:ios
- You will find your app on your virtual device (Emulator) or physical device.