Recipe · Integration · React Native

React Native integration

Mobile is a wallet-shape variant, WalletConnect over QR for warm wallets, embedded private-key signer for app-controlled flows. Everything else (SDK + encryptor) works identically to web.

Path A · WalletConnect (user's wallet)#

Use Reown / WalletConnect AppKit for the wallet UI. The SDK doesn't need to know, once wagmi has a wallet client, every hook works.

App.tsx
tsx
// App.tsx
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createAppKit } from "@reown/appkit-wagmi-react-native";
import { sepolia } from "viem/chains";
import { wagmiConfig } from "./wagmi";

const queryClient = new QueryClient();

createAppKit({
  projectId: WC_PROJECT_ID,
  wagmiConfig,
  defaultChain: sepolia,
});

export default function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <RootStack />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Path B · Embedded private-key signer (app-controlled)#

For agent-style flows where your app owns the key (custodied claims, compliance bots), use privateKeyToAccountfrom viem and wagmi's `mock` connector. The key never leaves device storage; viem hands the SDK a wallet client without prompting.

What changes from web#

Storage is the main one, wagmi's default storage is localStorage (web). On RN, install @react-native-async-storage/async-storage and pass a custom storage adapter to createConfig. Otherwise sessions don't persist between app launches.

See also