Installation

React Native

Introduction

AppKit has support for Wagmi and Ethers. Choose one of these Ethereum libraries to get started.

Don’t have a project ID?

Head over to Reown Dashboard and create a new project now!

Get started

Installation

React Native CLI

Wagmi

yarn add @reown/appkit-wagmi-react-native wagmi viem @tanstack/react-query

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

yarn add @react-native-async-storage/async-storage react-native-get-random-values react-native-svg react-native-modal@14.0.0-rc.1 @react-native-community/netinfo @walletconnect/react-native-compat

On iOS, use CocoaPods to add the native modules to your project:

npx pod-install

Implementation

Wagmi

Start by importing createAppKit, and wagmi packages, then create your configs as shown below. Finally, pass your configuration to createAppKit.

Make sure you import @walletconnect/react-native-compat before wagmi to avoid any issues.

createAppKit must be called before rendering the <AppKit /> component or any other AppKit UI components. Make sure to call createAppKit at the module level, outside of your React components.

import "@walletconnect/react-native-compat";
import { WagmiProvider } from "wagmi";
import { mainnet, polygon, arbitrum } from "@wagmi/core/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
  createAppKit,
  defaultWagmiConfig,
  AppKit,
} from "@reown/appkit-wagmi-react-native";

// 0. Setup queryClient
const queryClient = new QueryClient();

// 1. Get projectId at https://dashboard.reown.com
const projectId = "YOUR_PROJECT_ID";

// 2. Create config
const metadata = {
  name: "AppKit RN",
  description: "AppKit RN Example",
  url: "https://reown.com/appkit",
  icons: ["https://avatars.githubusercontent.com/u/179229932"],
  redirect: {
    native: "YOUR_APP_SCHEME://",
    universal: "YOUR_APP_UNIVERSAL_LINK.com",
  },
};

const chains = [mainnet, polygon, arbitrum] as const;

const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });

// 3. Create modal
createAppKit({
  projectId,
  metadata,
  wagmiConfig,
  defaultChain: mainnet, // Optional
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
});

export default function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        // Rest of your app...
        <AppKit />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Trigger the modal

To open AppKit modal you can use our default button component or build your own logic using our hooks.

Components

You can use our components to open the modal

import { AppKitButton } from "@reown/appkit-wagmi-react-native";

export default function ConnectView() {
  return (
    <>
      ...rest of your view
      <AppKitButton />
    </>
  );
}

Learn more about the AppKit components here

Getting Support 🙋

Reown is committed to delivering the best developer experience.

If you have any questions, feature requests, or bug reports, feel free to open an issue on GitHub!

Enable Wallet Detection (Optional)

This is an optional feature that enhances the user experience by:

• Showing a green checkmark next to installed wallets
• Prioritizing installed wallets at the top of the list

All 430+ wallets in the AppKit ecosystem work via WalletConnect protocol regardless of this configuration. You only need to add the wallets your users most commonly have installed.

To enable AppKit to detect wallets installed on the device, you can make specific changes to the native code of your project.

React Native CLI

iOS

1. Open your Info.plist file.
2. Locate the <key>LSApplicationQueriesSchemes</key> section.
3. Add the desired wallet schemes as string entries within the <array>. These schemes represent the wallets you want to detect.
4. Refer to our Info.plist example file for a detailed illustration.

Example:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>metamask</string>
  <string>trust</string>
  <string>safe</string>
  <string>rainbow</string>
  <string>uniswap</string>
  <!-- Add other wallet schemes names here -->
</array>

Enable Coinbase Wallet (Optional)

Coinbase Wallet support is optional. Unlike other wallets that use the WalletConnect protocol, Coinbase Wallet uses its own proprietary SDK. If you skip this setup, Coinbase Wallet simply won’t appear in your wallet list, but all other wallets will work normally.

Follow these steps to install Coinbase SDK in your project along with our Coinbase package. Check here for more detailed information.

Expo Compatibility: Coinbase SDK works with Expo Prebuild but not with Expo Go. You’ll need to use expo prebuild to generate native code before building your app.

1. Enable Expo Modules in your project running:

npx install-expo-modules@latest

2. Install Coinbase SDK

yarn add @coinbase/wallet-mobile-sdk react-native-mmkv

3. Install our custom connector

Wagmi

yarn add @reown/appkit-coinbase-wagmi-react-native

4. Run pod-install

npx pod-install

5. Enable Deeplink handling in your project following React Native docs

6. Add Coinbase package in your AndroidManifest.xml and Info.Plist

// AndroidManifest.xml

<queries>
  <!-- other queries -->
  <package android:name="org.toshi" />
</queries>

// Info.plist

<key>LSApplicationQueriesSchemes</key>
<array>
  <!-- other schemes -->
  <string>cbwallet</string>
</array>

7. Add Coinbase response handler in your app. More info here

import { handleResponse } from "@coinbase/wallet-mobile-sdk";

// Your app's deeplink handling code
useEffect(() => {
  const sub = Linking.addEventListener("url", ({ url }) => {
    const handledBySdk = handleResponse(new URL(url));
    if (!handledBySdk) {
      // Handle other deeplinks
    }
  });

  return () => sub.remove();
}, []);

Wagmi

8. Initialize coinbaseConnector and add it in extraConnectors

import { coinbaseConnector } from '@reown/appkit-coinbase-wagmi-react-native'
import { MMKV } from 'react-native-mmkv'

const coinbase = coinbaseConnector({
  redirect: 'https://your-app-universal-link.com' || 'YOUR_APP_SCHEME://',
  storage: new MMKV() // needed if using react native new architecture
})

const wagmiConfig = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  extraConnectors: [coinbase]
})

• Prefer universal links over custom schemes to avoid an app verification warning on Coinbase Wallet

Check Coinbase docs for more detailed information.

Examples

Wagmi

AppKit with Wagmi example

Check the React Native example using Wagmi

Test Apps

Want to see AppKit in action? Download our sample AppKit apps below and explore what it can do. Enjoy! 😊

• Android Build (Firebase)
• iOS Build (Testflight)

Tutorial