On this page

    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
    1. Navigate to the newly created project folder my-react-map
    
  cd my-react-map
    1. Install dependencies
    
  npm install

    1. Open the App.js file. Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to protect the key before you publish it!

    2. Build your project

      Android

      
  # Build your native Android project
  npx expo run:android

      iOS

      
  # Build your native iOS project
  npx expo run:ios

      Warning

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

    3. You will find your app on your virtual device (Emulator) or physical device.

    Learn more

    Was this helpful?

    Get started with React Native and MapLibre GL JS
    Get started