---
title: "Mobile applications"
description: "Install SeatLayer for React Native, Flutter, native iOS, or native Android, with typed holds, events, and secure mobile bridges."
---

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

# Mobile applications

SeatLayer offers public React Native, Flutter, iOS, and Android SDK source
alongside the production web SDK. React Native is available as
`@seatlayer/react-native`, Flutter as `seatlayer`, iOS through Swift Package
Manager, and native Android as a Kotlin/JitPack public preview.

> **Native SDK status**
>
> React Native, Flutter, native iOS, and native Android are public previews.
> Pin the exact documented version and validate it with your test event on
> physical devices before production rollout. The JavaScript and React web SDKs
> remain the stable default.

## Choose a mobile surface

- **React Native package** — Install
[`@seatlayer/react-native`](https://github.com/seatlayer/seatlayer-react-native)
for Expo or React Native applications on iOS and Android.
- **Flutter package** — Install [`seatlayer`](https://pub.dev/packages/seatlayer) for a typed Flutter
view, controller, commands, and event streams on iOS and Android.
- **iOS SDK preview** — Evaluate the public
[`seatlayer/seatlayer-ios`](https://github.com/seatlayer/seatlayer-ios)
Swift package from `main` until the first production tag is documented.
- **Android SDK preview** — Use the native Kotlin
[`seatlayer/seatlayer-android`](https://github.com/seatlayer/seatlayer-android)
package with coroutines, typed flows, and an origin-restricted WebKit bridge.
- **Controlled webview** — Host your own page with `@seatlayer/js` when you need the stable web SDK
today or want to own a narrow native-to-web checkout bridge.
- **Mobile web** — Open `SeatPicker` directly in the browser for its responsive bottom sheet,
touch controls, holds, checkout callback, and optional 3D.

## Install a native SDK

### React Native

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

```tsx title="SeatMapScreen.tsx"
import {
  SeatLayerView,
  useSeatLayerController,
} from "@seatlayer/react-native";

export function SeatMapScreen() {
  const controller = useSeatLayerController();

  return (
    <SeatLayerView
      style={{ flex: 1 }}
      controller={controller}
      configuration={{
        event: "ev_your_event_key",
        currency: "USD",
      }}
      onReady={(info) => console.log("SeatLayer ready", info.mode)}
      onLoadError={(error) => console.error(error.code, error.message)}
    />
  );
}
```

The package includes a typed controller, correlated errors, stale-event
protection, and a vendored web runtime. See the
[React Native README](https://github.com/seatlayer/seatlayer-react-native#readme)
and runnable Expo example before adopting the preview.
### Flutter

```bash
flutter pub add seatlayer
```

```dart title="seat_map.dart"
import "package:seatlayer/seatlayer.dart";

final controller = SeatLayerController();

SizedBox(
  height: 640,
  child: SeatLayerView(
    controller: controller,
    configuration: SeatLayerConfiguration(
      event: "ev_your_event_key",
      currency: "USD",
    ),
    onReady: (info) {
      debugPrint("SeatLayer ready: ${info.mode.raw}");
    },
  ),
);
```

Dispose the controller with the host state. See the
[Flutter package README](https://github.com/seatlayer/seatlayer-flutter#readme)
for commands, event streams, the offline example, and preview constraints.
### iOS preview

In Xcode, choose **File → Add Package Dependencies** and enter:

```text
https://github.com/seatlayer/seatlayer-ios.git
```

Select the `main` branch for evaluation until this page documents a stable
tag.

```swift title="SeatMapViewController.swift"
import SeatLayer

let map = SeatLayerView()
map.delegate = self

var configuration = SeatLayerConfiguration(
    event: "ev_your_event_key",
    currency: "USD"
)

let info = try await map.load(configuration)
let hold = try await map.hold()
```

Read the
[iOS SDK README](https://github.com/seatlayer/seatlayer-ios#readme) before
adopting the branch dependency.
### Android preview

Add JitPack to dependency resolution, restricted to the SeatLayer package:

```kotlin title="settings.gradle.kts"
dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven("https://jitpack.io") {
            content {
                includeGroup("com.github.seatlayer")
            }
        }
    }
}
```

Install the exact preview tag:

```kotlin title="app/build.gradle.kts"
dependencies {
    implementation(
        "com.github.seatlayer:seatlayer-android:v0.1.0",
    )
}
```

```kotlin title="CheckoutActivity.kt"
val seatMap = SeatLayerView(this)
setContentView(seatMap)

lifecycleScope.launch {
    seatMap.load(
        SeatLayerConfiguration(
            event = "ev_your_event_key",
            currency = "USD",
        ),
    )
}
```

Collect `seatMap.controller.events`, use its suspending hold and view
commands, and call `seatMap.destroy()` with the screen. Read the
[Android SDK README](https://github.com/seatlayer/seatlayer-android#readme)
and [bridge reference](https://github.com/seatlayer/seatlayer-android/blob/main/docs/bridge.md).
### App webview

Host an immutable integration page using the current `@seatlayer/js`
release. Bridge only the checkout and application events your native shell
needs.

```text title="mobile-webview.txt"
Native screen
  └─ owned WebView
       └─ immutable SeatLayer integration page
            ├─ SeatPicker
            ├─ event inventory over HTTPS/realtime
            └─ narrow validated message bridge
                 └─ native checkout / navigation
```

## Shared native contract

The React Native, iOS, Android, and Flutter SDKs use a versioned bridge and
intentionally mirror the web `SeatingChart` contract:

`hold`, `resumeHold`, `extendHold`, `release`, `releaseLabels`,
`bestAvailable`, `holdGA`, `setSeatTier`, `getSelection`,
`getCurrentHold`, `getGAAreas`, `getFloors`, `setFloor`,
`setColorblindSafe`, view and zoom methods, and `destroy`.

Command failures correlate to the awaited native call with structured errors.
Unknown future events and enum values are retained as unknown values rather than
crashing older applications.

## Security boundary

Keep secret-key booking in your backend. A native binary or webview may receive
a `holdId`, but never the secret.

- The app selects and holds; your trusted server inspects and books.
- Calculate payment from server-inspected hold items, not app input.
- Reuse the host order id as `bookingRef` for retry safety.
- Validate webview bridge source/origin and message schemas.
- Treat hold expiry and inventory conflicts as recoverable buyer states.

## Layout and lifecycle requirements

- Give the map a definite height or make it full-screen.
- Do not nest it inside another gesture-driven scroll or zoom surface.
- Preserve the hold id across checkout navigation and app suspension when your
  product promises restoration.
- Dispose or destroy the SDK with its native screen.
- Test safe areas, rotation, back navigation, keyboards, process suspension,
  and resume.
- Test 2D fallback when the target environment cannot support optional 3D.

## Preview verification checklist

- [ ] The dependency resolves from its registry or exact documented release.
- [ ] The package version or Git revision is pinned intentionally.
- [ ] No secret key exists in the native binary, WebView, or logs.
- [ ] A test event renders and receives live inventory.
- [ ] Select, hold, checkout, expiry, release, and conflict paths work.
- [ ] Gestures do not conflict with parent scrolling.
- [ ] iOS and Android physical-device smoke tests pass.
- [ ] The backend books with a stable `bookingRef`.

Explore the [live buyer demo](https://app.seatlayer.io/demo/play), continue with
[holds and checkout](/buyer-sdk/holds-and-checkout), or give an agent the
[SeatLayer AI Toolkit](https://github.com/seatlayer/seatlayer-ai-toolkit).

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