Skip to main content

React Native

Introduction

With Web3Modal React Native, we work with the Wagmi library which is a collection of React Hooks to make your dapp development flow easier. You can sign messages, interact with smart contracts, and much more.

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 viem

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>