---
title: "Get started with React Native and MapLibre GL JS | React native"
description: "Display mobile maps with React Native and MapLibre GL JS."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# 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](https://docs.expo.dev/development/getting-started/#installing--expo-dev-client--in-your-project) and the plugin [MapLibre React Native](https://maplibre.org/maplibre-react-native/).

## Installation and setting up

1.  Clone the [Get started with React Native and MapLibre GL JS](https://github.com/maptiler/get-started-react-native-maplibre-gl-js) repo

```sh
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**

```sh
cd my-react-map
```

1.  Install dependencies

```sh
npm install
```

1.  Open the `App.js` file. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.
    
    ```js
    export default function App() {
        MapLibreGL.setWellKnownTileServer(MapLibreGL.TileServers.MapLibre);
        MapLibreGL.setAccessToken(null);
       
        const MAPTILER_API_KEY = "YOUR_MAPTILER_API_KEY_HERE";
       
        return (
          <View style={styles.page}>
            <View style={styles.container}>
              <MapLibreGL.MapView
                style={styles.map}
                styleURL={`https://api.maptiler.com/maps/{{site.map-styles.streets}}/style.json?key=${MAPTILER_API_KEY}`}
                logoEnabled={false}
                attributionPosition={{bottom: 8, right: 8}}>
                <MapLibreGL.Camera
                  defaultSettings={{centerCoordinate: [2, 41.5], zoomLevel: 8}}
                />
              </MapLibreGL.MapView>
            </View>
          </View>
        );
      }
    ```
    
2.  Build your project
    
    **Android**
    
    ```sh
    # Build your native Android project
      npx expo run:android
    ```
    
    **iOS**
    
    ```sh
    # 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](https://reactnative.dev/docs/environment-setup).
    -   `expo run:android` requires Android Studio and the Android SDK to be installed. See the [setup guide](https://reactnative.dev/docs/environment-setup).
    
3.  You will find your app on your virtual device (Emulator) or physical device.
    

## Learn more

-   [Expo Development builds](https://docs.expo.dev/development/getting-started/#installing--expo-dev-client--in-your-project)
-   [Adding custom native code](https://docs.expo.dev/workflow/customizing/#generate-native-projects-with-prebuild)
-   [MapLibre React Native documentation](https://maplibre.org/maplibre-react-native/docs/setup/getting-started)