Skip to main content

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 startedcloud illustration

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 @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.

Note

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

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

Enable Wallet Detection

Note

Make sure your have @walletconnect/react-native-compat@2.10.5 or higher.

To enable AppKit to detect wallets installed on the device, you need to 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

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 reponse 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: 'YOUR_APP_SCHEME://'
})

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

Check Coinbase docs for more detailed information.

Tutorial