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 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 actual MapTiler API key or Get your FREE API key here

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

• Expo Development builds
• Adding custom native code
• rnmapbox documentation