Skip to main content

React Native


Web3Modal SDK has support for Wagmi v1 and Ethers v5. Choose one of these Ethereum libraries to get started.

Don't have a project ID?

Head over to WalletConnect Cloud and create a new project now!

Get startedcloud illustration


npm install @web3modal/wagmi-react-native wagmi@1.4.13 viem@1.21.4

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

npm install @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


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


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

import '@walletconnect/react-native-compat'
import { WagmiConfig } from 'wagmi'
import { mainnet, polygon, arbitrum } from 'viem/chains'
import { createWeb3Modal, defaultWagmiConfig, Web3Modal } from '@web3modal/wagmi-react-native'

// 1. Get projectId at
const projectId = 'YOUR_PROJECT_ID'

// 2. Create config
const metadata = {
name: 'Web3Modal RN',
description: 'Web3Modal RN Example',
url: '',
icons: [''],
redirect: {
native: 'YOUR_APP_SCHEME://',
universal: ''

const chains = [mainnet, polygon, arbitrum]

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

// 3. Create modal
enableAnalytics: true // Optional - defaults to your Cloud configuration

export default function App() {
return (
<WagmiConfig config={wagmiConfig}>
// Rest of your app...
<Web3Modal />

Trigger the modal​

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

You can use default components to open the modal

import { W3mButton } from '@web3modal/wagmi-react-native'

export default function ConnectView() {
return (
<> of your view
<W3mButton />

Learn more about the Web3Modal components here

Enable Wallet Detection​


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

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

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


<!-- Add other wallet schemes names here -->

For Android:​

  1. Open your AndroidManifest.xml file.
  2. Locate the <queries> section.
  3. Add the desired wallet package names as <package> entries within the <queries>. These package names correspond to the wallets you want to detect.
  4. Refer to our AndroidManifest.xml example file for detailed guidance.


<package android:name="io.metamask"/>
<package android:name="com.wallet.crypto.trustapp"/>
<package android:name=""/>
<package android:name="me.rainbow"/>
<!-- Add other wallet package names here -->

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
npm install @coinbase/wallet-mobile-sdk react-native-mmkv
  1. Install our custom connector

bash npm2yarn npm install @web3modal/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

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

<!-- other schemes -->
  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 CoinbaseWagmiConnector and add it in extraConnectors
import { CoinbaseConnector } from '@web3modal/coinbase-wagmi-react-native'

const coinbaseConnector = new CoinbaseConnector({
options: {
redirect: 'YOUR_APP_SCHEME://'

const wagmiConfig = defaultWagmiConfig({
extraConnectors: [coinbaseConnector]

Check Coinbase docs for more detailed information.