# Export Wallet on React Native (/wallets/react-native/export-wallet)

> For the complete documentation index, see [llms.txt](/llms.txt)



The web export hooks, `useExportWallet` and `useExportPrivateKey`, are **not available on React Native**.

Export can't go through a plain hook — the secret must never touch your JS. Use `ZeroDevExportWebView` instead: it renders Turnkey's export iframe inside an isolated WebView, so the plaintext stays in the iframe's context.

<Callout type="info">
  This flow requires an [Expo development build](https://docs.expo.dev/develop/development-builds/expo-go-to-dev-build/) — see the [quickstart](/wallets/react-native/quickstart#5-switch-to-an-expo-development-build).
</Callout>

<div className="fd-steps">
  <div className="fd-step">
    ## Install peer dependencies [#install-peer-dependencies]

    It needs `react-native-webview` and `uuid` (native module — rebuild the dev client afterwards):

    <Tabs items="[&#x22;npm&#x22;,&#x22;yarn&#x22;,&#x22;pnpm&#x22;,&#x22;bun&#x22;]">
      <Tab value="npm">
        ```bash
        npx expo install react-native-webview uuid
        npx expo run:android   # or: npx expo run:ios
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn expo install react-native-webview uuid
        yarn expo run:android   # or: yarn expo run:ios
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm expo install react-native-webview uuid
        pnpm expo run:android   # or: pnpm expo run:ios
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx expo install react-native-webview uuid
        bunx expo run:android   # or: bunx expo run:ios
        ```
      </Tab>
    </Tabs>
  </div>

  <div className="fd-step">
    ## Add the component [#add-the-component]

    ```tsx
    import { ZeroDevExportWebView } from "@zerodev/wallet-react/react-native/export/webview";
    import { useState } from "react";
    import { Button, Text } from "react-native";

    export function ExportWallet() {
      const [show, setShow] = useState(false);
      const [ready, setReady] = useState(false);
      const [error, setError] = useState<string | null>(null);

      return (
        <>
          <Button title="Export wallet" onPress={() => setShow(true)} />

          {show && !ready && !error ? <Text>Loading…</Text> : null}
          {error ? <Text style={{ color: "red" }}>{error}</Text> : null}

          {show && !error ? (
            <ZeroDevExportWebView
              kind="wallet"
              onReady={() => setReady(true)}
              onError={(message) => setError(message)}
              style={ready ? { height: 240 } : { height: 0 }}
            />
          ) : null}
        </>
      );
    }
    ```

    * `onReady` fires once the secret is on screen → flips `ready`, which clears the "Loading…" line and gives the WebView its height.
    * `onError` captures the message → the `!error` guard unmounts the WebView and the red error line shows instead.
    * The loading message shows while mounted-but-not-yet-ready (`show && !ready && !error`).
    * Use `kind="privateKey"` to export the account's private key instead of the seed phrase.
  </div>
</div>

## How it stays secure [#how-it-stays-secure]

Mounting the component starts the export; unmounting it dismisses the secret. The decrypted seed phrase or private key is only ever rendered inside Turnkey's export iframe within the WebView — it never crosses into your app's JavaScript context.