> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://docs.yodl.me/api/mcp` to find what you need.

# React Native SDK

[`@yodlpay/react-native`](https://www.npmjs.com/package/@yodlpay/react-native) adds QR payments to a React Native wallet app. The complete payment flow ships with the SDK — localized per country, with no backend of yours involved. Payments work with any token on any supported chain, so users don't have to hold a particular balance.

Three drop-in components, all rendered inside a provider:

| Component | What it does |
| --- | --- |
| `<YodlPayment>` | The payment flow for a scanned QR code |
| `<YodlSignup>` | Hosted onboarding — SIWE, email capture, verification |
| `<YodlDashboard>` | The Yodl account view |

## What a payment looks like

Your app scans and renders; the hosted UI resolves and quotes; the wallet signs. You never touch RPC or payment plumbing.

```mermaid
sequenceDiagram
    autonumber
    actor U as User
    participant App as Your app
    participant Y as Yodl UI
    participant W as Wallet

    U->>App: Scans a merchant QR
    App->>App: isPaymentQr(qrData)
    App->>Y: Renders YodlPayment
    Y->>Y: Resolves across processors, quotes
    Y->>W: Signature or wallet_sendCalls
    W-->>Y: Signed
    Y-->>App: onTransactionSent(txHash)
    Y-->>App: onPaymentDetails(status)
```

The dashed returns are your callbacks — the SDK bridges messages from the UI, it does not fetch payment state itself.

## Requirements

| Requirement | Version |
| --- | --- |
| React | `>= 18` |
| React Native | `>= 0.72` |
| Hermes engine | Enabled (default) |

:::warning
**Not Expo Go.** The SDK uses the native `react-native-webview` module, so it needs a [development build](https://docs.expo.dev/develop/development-builds/introduction/) (`npx expo run:ios` / `run:android`) or bare React Native. Expo Go will crash or render a blank screen.
:::

Hermes is required because the SDK uses `BigInt`. It is on by default from React Native `0.70`. If you disabled it, re-enable it or add a `BigInt` polyfill.

## Install

Install the SDK and its `react-native-webview` peer dependency, then rebuild the native app.

:::code-group
```bash [Expo]
npx expo install @yodlpay/react-native react-native-webview
npx expo run:ios   # or: npx expo run:android
```

```bash [Bare React Native]
npm install @yodlpay/react-native react-native-webview
npx pod-install    # iOS
```
:::

Expo's installer resolves the WebView version against your Expo SDK, which is why it is preferred over a plain `npm install` there. After installing, rebuild the app — that is the whole install.

## Where to go next

* **[Quickstart](/sdk/react-native/quickstart)** — from install to a completed payment.
* **[Signup flow](/sdk/react-native/signup)** — onboard users who don't have a Yodl account yet.
* **[Theming](/sdk/react-native/theming)** — apply your palette to the hosted UI.
* **[API reference](/sdk/react-native/api)** — every export, prop and callback.
* **[Security model](/sdk/react-native/security)** — origin locking and what the bridge does and doesn't do.
* **[Troubleshooting](/sdk/react-native/troubleshooting)** — symptoms and fixes.

Wallets that can't batch calls natively may also want the [EIP-7702 provider](/sdk/eip-7702-provider) — read that page before installing it, since most integrations don't need it.