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

# React Native

> Embed the Daimo deposit UI in a React Native app

**`DaimoFrameRN`** renders the hosted Daimo deposit, withdraw, or transfer flow
inside a `react-native-webview`, covering chain selection, wallet connection,
signing, and status updates.

<Info>
  If you're not using React Native, see [Native WebView](/guides/webview-native)
  to embed the same flow with a raw iOS `WKWebView`, Android `WebView`, or a
  plain `react-native-webview`.
</Info>

## Install

```bash theme={null}
npm install @daimo/sdk react-native-webview
```

`react-native-webview` is a peer dependency. `@daimo/sdk/native` imports nothing
from the web build, so no `react-dom` or wallet libraries are pulled in.

## Modal layout

Create a session on your server (see [Quickstart](/quickstart)), pass its
`sessionId` and `clientSecret` to the client, then render `DaimoFrameRN`:

```tsx theme={null}
import { DaimoFrameRN } from "@daimo/sdk/native";

function DepositButton({ sessionId, clientSecret }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button title="Deposit" onPress={() => setOpen(true)} />
      {open && (
        <DaimoFrameRN
          layout="modal"
          sessionId={sessionId}
          clientSecret={clientSecret}
          onClose={() => setOpen(false)}
        />
      )}
    </>
  );
}
```

The `modal` layout (default) presents the flow in a dimmed bottom sheet and
sizes itself to the content; you never manage its height. It has a close button;
tapping the dimmed backdrop does **not** dismiss it (too easy to hit by
accident), and Android hardware back does.

<Note>
  Don't close the sheet from `onPaymentCompleted`. The flow shows a completed
  screen (a checkmark), which also appears when you open an already-finished
  session, so let the user dismiss it via the close button (`onClose`).
</Note>

## Embed layout

Use `layout="embed"` to render the flow inline inside your own screen or sheet.
It fills its container's width and follows the content height; you own the
surrounding chrome, dismissal, and keyboard avoidance. Wrap it in a
`KeyboardAvoidingView` if it sits near the bottom of the screen. The `modal`
layout handles the keyboard for you.

```tsx theme={null}
<DaimoFrameRN
  layout="embed"
  sessionId={sessionId}
  clientSecret={clientSecret}
/>
```

## Deeplink schemes

Some payment methods run **outside** the WebView: Apple Pay and bank redirects
open the system browser, and wallet deposits open a wallet app. `DaimoFrameRN`
hands these off with `Linking.openURL`. HTTPS and universal links work with no
setup. To open wallet apps that use custom URL schemes, and to let
`Linking.canOpenURL` detect them, declare those schemes.

<Note>
  This is what keeps Apple Pay working with **no host-app certification**: it
  runs in the system browser under Daimo's merchant identity, never your app's.
</Note>

<Tabs>
  <Tab title="Expo">
    Add the schemes to `app.json` (or `app.config.js`). Expo writes them into
    the native project on `prebuild`:

    ```json theme={null}
    {
      "expo": {
        "ios": {
          "infoPlist": {
            "LSApplicationQueriesSchemes": [
              "metamask",
              "trust",
              "rainbow",
              "tronlink"
            ]
          }
        }
      }
    }
    ```

    On Android 11+, apps you deeplink to must be listed in a `<queries>`
    element; add it with
    [`expo-build-properties`](https://docs.expo.dev/versions/latest/sdk/build-properties/)
    or a small config plugin.
  </Tab>

  <Tab title="Bare (Info.plist)">
    Add the schemes to `ios/<YourApp>/Info.plist`:

    ```xml theme={null}
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>metamask</string>
      <string>trust</string>
      <string>rainbow</string>
      <string>tronlink</string>
    </array>
    ```

    On Android 11+, add a matching `<queries>` element to
    `android/app/src/main/AndroidManifest.xml` for the wallet apps you support.
  </Tab>
</Tabs>

Declare only the wallets you support. Universal (`https`) links, whether to
wallets or to `daimo.com` itself, need no entry.

For an in-app Safari sheet instead of the full system browser, pass
`expo-web-browser`'s `openBrowserAsync` as `onOpenExternalUrl`.

## Props

| Prop                 | Type                    | Default             | Description                                                     |
| -------------------- | ----------------------- | ------------------- | --------------------------------------------------------------- |
| `sessionId`          | `string`                | -                   | Session ID, created server-side. (required)                     |
| `clientSecret`       | `string`                | -                   | Client secret, returned at session creation. (required)         |
| `layout`             | `"modal" \| "embed"`    | `"modal"`           | Daimo-owned bottom sheet, or inline in your UI.                 |
| `onClose`            | `() => void`            | -                   | Called when the user dismisses the flow.                        |
| `onPaymentStarted`   | `() => void`            | -                   | User's deposit transaction was detected.                        |
| `onPaymentCompleted` | `() => void`            | -                   | Funds delivered to the destination.                             |
| `onOpenExternalUrl`  | `(url: string) => void` | `Linking.openURL`   | Override how Apple Pay / wallet / fiat links leave the WebView. |
| `borderRadius`       | `number`                | `42`                | Corner radius of the modal sheet, in points.                    |
| `baseUrl`            | `string`                | `https://daimo.com` | Hosted flow origin. Override only for staging.                  |

## Tracking status

`onPaymentStarted` and `onPaymentCompleted` are notifications only. To get full
session details (tx hash, chain, amounts), poll
[`GET /v1/sessions/{sessionId}`](/api-reference/retrieve-session) after a payment
event.