> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baato.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup

> Install MapLibre React Native and configure your Baato token.

Baato works with [MapLibre React Native](https://github.com/maplibre/maplibre-react-native)
in both Expo and bare React Native apps. There is no Baato-specific native module to
install — map styles are URLs and the APIs are plain HTTP, so `fetch` is enough.

<Steps>
  <Step title="Install the dependencies">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @maplibre/maplibre-react-native @mapbox/polyline
      npm install -D @types/mapbox__polyline
      ```

      ```bash yarn theme={null}
      yarn add @maplibre/maplibre-react-native @mapbox/polyline
      yarn add -D @types/mapbox__polyline
      ```

      ```bash pnpm theme={null}
      pnpm add @maplibre/maplibre-react-native @mapbox/polyline
      pnpm add -D @types/mapbox__polyline
      ```
    </CodeGroup>

    `@mapbox/polyline` decodes the route geometry the
    [Directions API](/services/directions) returns. Skip it if you are not drawing routes.
  </Step>

  <Step title="Finish the native setup">
    MapLibre React Native needs a config plugin on Expo and a pod install on bare React
    Native. Follow the
    [official Expo setup guide](https://maplibre.org/maplibre-react-native/docs/setup/expo)
    or the [bare workflow guide](https://maplibre.org/maplibre-react-native/docs/setup/).
  </Step>

  <Step title="Store your access token">
    Get a token from your [Baato dashboard](https://baato.io/account) and read it from the
    environment rather than committing it:

    ```javascript theme={null}
    // app.config.js
    export default {
      expo: {
        extra: {
          baatoToken: process.env.BAATO_ACCESS_TOKEN,
        },
      },
    };
    ```

    ```javascript theme={null}
    import Constants from "expo-constants";

    export const baatoToken = Constants.expoConfig.extra.baatoToken;
    ```

    <Warning>
      A token shipped inside a mobile app is readable by anyone who inspects the bundle.
      Environment variables keep it out of source control, not out of the binary. For
      production, proxy Baato requests through your own backend or restrict the token in the
      dashboard — see [Authentication](/about/authentication).
    </Warning>
  </Step>
</Steps>

## A shared request helper

Every example in this section builds on the same tiny wrapper, which handles the `key`
parameter and unwraps Baato's [response envelope](/about/concepts#the-response-envelope):

```javascript baato.js theme={null}
import { baatoToken } from "./config";

const BASE_URL = "https://api.baato.io/api/v1";

export async function baatoRequest(path, params = {}) {
  const query = new URLSearchParams({ key: baatoToken, ...params });
  const response = await fetch(`${BASE_URL}${path}?${query}`);

  if (!response.ok) {
    throw new Error(`Baato ${path} failed with ${response.status}`);
  }

  const { data } = await response.json();
  return data;
}
```

## What's next

<Columns cols={2}>
  <Card title="Display a map" icon="map" href="/examples/react-native/display-map">
    Render Baato vector tiles with MapLibre.
  </Card>

  <Card title="Search and autocomplete" icon="magnifying-glass" href="/examples/react-native/search">
    Search-as-you-type place suggestions.
  </Card>

  <Card title="Reverse geocoding" icon="location-crosshairs" href="/examples/react-native/reverse">
    Turn a long-press into an address.
  </Card>

  <Card title="Directions" icon="route" href="/examples/react-native/directions">
    Fetch a route and draw it on the map.
  </Card>
</Columns>

<Note>
  The [Baato\_in\_React\_Native](https://github.com/baato/Baato_in_React_Native) repository has
  a complete app wiring all of these together.
</Note>