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>