---
title: "React Native seat map"
description: "Install @seatlayer/react-native, render live seating charts in your app with a typed TypeScript API, create holds, and hand booking to a trusted server."
---

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

# React Native seat map

The official SeatLayer React Native seat map SDK adds an interactive seating
chart and seat picker to reserved-seating apps on iOS and Android. The
[`@seatlayer/react-native` package](https://www.npmjs.com/package/@seatlayer/react-native)
provides a typed component, ref-based commands, structured errors, and event
callbacks for live availability, seat selection, temporary holds, and
best-available seating — with TypeScript definitions included.

[Inspect the React Native source and example app](https://github.com/seatlayer/seatlayer-react-native),
learn about the [SeatLayer reserved-seating platform](https://seatlayer.io/), or
preview the wider buyer experience in the
[browser seat-map demo](https://app.seatlayer.io/demo/play). The browser demo
is product proof, not a React Native application.

> **The app selects and holds; your server books**
>
> Never put a SeatLayer secret key in an app binary or WebView. Send the opaque
> hold id to your trusted backend, inspect the hold there, calculate the charge
> from server data, and book with a stable `bookingRef`.

## Install the package

```bash
npm install @seatlayer/react-native react-native-webview
```

The only native dependency is the `react-native-webview` peer. Supported
floors: React 18.2+, React Native 0.72+, react-native-webview 13+. Expo works
— `react-native-webview` is included in Expo Go, and development builds and
bare React Native behave the same way.

## Render a seating chart

Give the seat map a definite height or a full-screen container, and drive
buyer actions through the ref:

```tsx
import { SeatLayerView, type SeatLayerViewRef } from '@seatlayer/react-native';

function SeatMapScreen() {
  const mapRef = useRef<SeatLayerViewRef>(null);

  return (
    <View style={{ flex: 1 }}>
      <SeatLayerView
        ref={mapRef}
        configuration={{ event: 'ev_your_event_key', currency: 'USD' }}
        onReady={(info) => console.log('mode', info.mode)}
        onHoldExpired={() => returnBuyerToMap()}
      />
    </View>
  );
}
```

Do not nest the view inside a scrolling container — the buyer canvas owns pan
and pinch gestures.

## Understand the hosted runtime boundary

The component hosts the buyer experience in `react-native-webview`. Production
views load the immutable, version-pinned mobile runtime from
`https://cdn.seatlayer.io`; application code stays in TypeScript and
communicates through typed commands, callbacks, payloads, and structured
errors. Commands carry a deadline and late replies are discarded; protocol
negotiation fails clearly when an app update is required; unknown future enum
values and events remain forward-compatible.

Access tokens stay in memory and are never placed in page URLs. For private
channel inventory, provide a short-lived token from your backend through the
buyer-access provider in the configuration.

## Select, hold, and hand off checkout

Keep the security boundary explicit:

- The app selects seats and creates a temporary hold.
- Your backend inspects the hold and derives the amount to charge.
- Your payment and order workflow stays outside the WebView.
- Your backend books with a stable `bookingRef` so retries are safe.
- Expiry and inventory conflicts return buyers to a recoverable selection
  state.

Continue with [holds and checkout](/buyer-sdk/holds-and-checkout) before
connecting a production order flow.

## Commands and events

Common commands include `hold`, `resumeHold`, `extendHold`, `release`,
`bestAvailable`, `getSelection`, `selectObjects`, `clearSelection`,
`getCurrentHold`, `setFloor`, `setViewMode`, `zoomIn`, `zoomOut`, `zoomToFit`,
and `destroy` — all returning promises with typed failures.

Event callbacks cover readiness, selection changes, selection validity,
buyer-access expiry, hold changes, hold restoration, hold expiry, checkout,
general-admission taps, seat hover, errors, and unknown future events.

## React Native seat-map checklist

- Give the seat map a definite height or a full-screen route.
- Keep the ref for one view lifecycle.
- Preserve the hold id across checkout navigation or app suspension if your
  product promises restoration.
- Test rotation, safe areas, back navigation, suspension, and resume on both
  platforms.
- Verify selection, hold, expiry, release, conflict, and booking with a test
  event.
- Smoke-test supported physical iOS and Android devices before rollout.

## Frequently asked questions

### Is this a native component or a WebView?

Rendering runs in `react-native-webview` on SeatLayer's immutable,
version-pinned buyer runtime, and application code never touches the web
layer: commands, payloads, errors, and events are all typed TypeScript.

### Does it work with Expo?

Yes. The only native dependency is `react-native-webview`, which is included
in Expo Go and documented by Expo. Development builds and bare React Native
work the same way.

### Do TypeScript types ship with the package?

Yes. Type definitions are built into the package for both ESM and CommonJS —
no separate `@types` package is needed.

### How do temporary seat holds work?

Selecting seats creates a temporary hold that reserves inventory against
concurrent buyers for a limited window. The hold expires automatically if
checkout does not complete — `onHoldExpired` tells the app to return the buyer
to the map — and `extendHold` and `resumeHold` cover longer checkouts and app
restarts.

### Can I use my own payment provider?

Yes. SeatLayer never processes payment inside the seat map. The app hands the
hold id to your backend, and your backend charges through any payment provider
you already use before booking the hold.

## Next steps

- [Install @seatlayer/react-native on npm](https://www.npmjs.com/package/@seatlayer/react-native)
- [Run or inspect the React Native SDK source](https://github.com/seatlayer/seatlayer-react-native)
- [Understand the SeatLayer platform](https://seatlayer.io/)
- [Compare every mobile SDK](/buyer-sdk/mobile)
- [Connect holds to secure checkout](/buyer-sdk/holds-and-checkout)

Source: https://docs.seatlayer.io/buyer-sdk/react-native/index.mdx