​
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 Cloud and create a new project now!

Get started

​
Installation

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

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://cloud.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,
  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.
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.
  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.
  1. Enable Expo Modules in your project running:
npx install-expo-modules@latest
  1. Install Coinbase SDK
yarn add @coinbase/wallet-mobile-sdk react-native-mmkv
  1. Install our custom connector
yarn add @reown/appkit-coinbase-wagmi-react-native
  1. Run pod-install
npx pod-install
  1. Enable Deeplink handling in your project following React Native docs
  2. 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>
  1. 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();
}, []);
  1. Initialize coinbaseConnector and add it in extraConnectors
import { coinbaseConnector } from '@reown/appkit-coinbase-wagmi-react-native'

const coinbase = coinbaseConnector({
  redirect: 'https://your-app-universal-link.com' || 'YOUR_APP_SCHEME://'
})

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

​
Test Apps

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

​
Tutorial