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​