Skip to main content

React Native

Introduction

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

Installation

npm install @web3modal/wagmi-react-native@alpha wagmi viem @tanstack/react-query

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

Implementation

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

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 { createWeb3Modal, defaultWagmiConfig, Web3Modal } from '@web3modal/wagmi-react-native'

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

// 1. Get projectId at https://cloud.walletconnect.com
const projectId = 'YOUR_PROJECT_ID'

// 2. Create config
const metadata = {
name: 'Web3Modal RN',
description: 'Web3Modal RN Example',
url: 'https://web3modal.com',
icons: ['https://avatars.githubusercontent.com/u/37784886'],
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
createWeb3Modal({
projectId,
chains,
wagmiConfig,
enableAnalytics: true // Optional - defaults to your Cloud configuration
})

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

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 (
<>
...rest of your view
<W3mButton />
</>
)
}

Learn more about the Web3Modal components here

Enable Wallet Detection

Note

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.

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>

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.

Example:

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

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

<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 '@web3modal/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