Setup

Baato works with 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.

Install the dependencies

npm install @maplibre/maplibre-react-native @mapbox/polyline
npm install -D @types/mapbox__polyline

yarn add @maplibre/maplibre-react-native @mapbox/polyline
yarn add -D @types/mapbox__polyline

pnpm add @maplibre/maplibre-react-native @mapbox/polyline
pnpm add -D @types/mapbox__polyline

@mapbox/polyline decodes the route geometry the Directions API returns. Skip it if you are not drawing routes.

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 or the bare workflow guide.

Store your access token

Get a token from your Baato dashboard and read it from the environment rather than committing it:

// app.config.js
export default {
  expo: {
    extra: {
      baatoToken: process.env.BAATO_ACCESS_TOKEN,
    },
  },
};

import Constants from "expo-constants";

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

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.

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:

baato.js

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

Display a map

Render Baato vector tiles with MapLibre.

Search and autocomplete

Search-as-you-type place suggestions.

Reverse geocoding

Turn a long-press into an address.

Directions

Fetch a route and draw it on the map.

The Baato_in_React_Native repository has a complete app wiring all of these together.

Get started

Guides by platform

Server SDKs

Resources

A shared request helper

What’s next

Display a map

Search and autocomplete

Reverse geocoding

Directions

​A shared request helper

​What’s next

Display a map

Search and autocomplete

Reverse geocoding

Directions

A shared request helper

What’s next