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

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 { WagmiConfig } from 'wagmi'
import { mainnet, polygon, arbitrum } from 'viem/chains'
import { createWeb3Modal, defaultWagmiConfig, Web3Modal } from '@web3modal/wagmi-react-native'

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

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

// 3. Create modal
createWeb3Modal({
projectId,
chains,
wagmiConfig
})

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

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 custom Wagmi connector. Check here for more detailed information.

  1. Enable Expo Modules in your project running: npx install-expo-modules@latest

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

const coinbaseConnector = new CoinbaseConnector({
chains,
options: {
redirect: 'YOUR_APP_SCHEME://'
}
})

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

Check Coinbase docs for more detailed information.