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 MapLibre React Native.

Installation and setting up

  1. 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
  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 own API key. Make sure to protect the key before publishing your map app!

  5. Build your project

    Android

       # Build your native Android project 
   npx expo run:android

    iOS

       # 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