Get started with React Native and MapLibre GL JS

In this tutorial, you’ll learn how to display a map on a mobile device using React Native and MapLibre GL JS. Together, we will make a simple mobile fullscreen map application as an example of how to use MapTiler maps together with React Native and MapLibre GL JS for your native app.

We have made this app using the expo-dev-client and the plugin rnmapbox.

Installation and setting up

  1. Clone the Get started with React Native and MapLibre GL JS repo
     git clone my-react-map
  2. Navigate to the newly created project folder my-react-map
     cd my-react-map
  3. Install dependencies
     npm install
  4. Open the App.js file. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key or Get your FREE API key here

  5. Build your project


       # Build your native Android project 
       npx expo run:android


       # Build your native iOS project
       npx expo run:ios
    • expo run:ios requires Xcode (macOS only) installed on your computer. See the setup guide.
    • expo run:android requires Android Studio and the Android SDK to be installed. See the setup guide.
  6. You will find your app on your virtual device (Emulator) or physical device.

Learn more