React Native Seat Map SDK for Reserved Seating

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.

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 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, learn about the SeatLayer reserved-seating platform, or preview the wider buyer experience in the browser seat-map demo. The browser demo is product proof, not a React Native application.

Install the package

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:

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 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.