Upgrade from Web3Modal to Reown AppKit for React Native

This document outlines the steps to migrate from the old @web3modal packages to the new @reown/appkit packages in your React Native project.

Wagmi

Step 1. Replace the dependencies in your code and package.json

{
  "dependencies": {
    "@web3modal/wagmi-react-native": "2.0.4",
    "@web3modal/email-wagmi-react-native": "2.0.4",
    "@web3modal/coinbase-wagmi-react-native": "2.0.4",
    "@web3modal/siwe-react-native": "2.0.4",
    "@reown/appkit-wagmi-react-native": '1.0.0',
    "@reown/appkit-auth-wagmi-react-native": '1.0.0',
    "@reown/appkit-coinbase-wagmi-react-native": '1.0.0',
    "@reown/appkit-siwe-react-native": "1.0.0",
  }
}

• Run yarn install after replacing the packages

Step 2. Update your AppKit config

import { createWeb3Modal } from '@web3modal/wagmi-react-native';
import { createAppKit } from '@reown/appkit-wagmi-react-native';

Step 3. Update your Hooks usage Update your hook imports as follows:

import {
  useWeb3Modal,
  useWeb3ModalState,
  useWeb3ModalEvents,
  useWalletInfo,
} from '@web3modal/wagmi-react-native';

import {
  useAppKit,
  useAppKitState,
  useAppKitEvents,
  useWalletInfo,
} from '@reown/appkit-wagmi-react-native';

Step 4. Update your Components usage Update your component imports as follows:

import {
  W3mAccountButton,
  W3mButton,
  W3mConnectButton,
  W3mNetworkButton,
  Web3Modal
} from '@web3modal/wagmi-react-native';
import {
  AccountButton,
  AppKitButton,
  ConnectButton,
  NetworkButton,
  AppKit
} from '@reown/appkit-wagmi-react-native';

Step 5. Update your config for Universal Wallets Update email wallet specific imports as follows:

import { emailConnector } from '@web3modal/email-wagmi-react-native';
import { authConnector } from '@reown/appkit-auth-wagmi-react-native';

Step 6. Update your import to support Coinbase Wallet Update coinbase connector import as follows:

import { coinbaseConnector } from '@web3modal/coinbase-wagmi-react-native';
import { coinbaseConnector } from '@reown/appkit-coinbase-wagmi-react-native';

Ethers

• If you are using ethers v5, follow the same steps but replacing ethers with ethers5

Step 1. Replace the dependencies in your code and package.json

{
  "dependencies": {
    "@web3modal/ethers-react-native": "2.0.4",
    "@web3modal/ethers5-react-native": "2.0.4",
    "@web3modal/email-ethers-react-native": "2.0.4",
    "@web3modal/coinbase-ethers-react-native": "2.0.4",
    "@web3modal/siwe-react-native": "2.0.4",
    "@reown/appkit-ethers-react-native": '1.0.0',
    "@reown/appkit-auth-ethers-react-native": '1.0.0',
    "@reown/appkit-coinbase-ethers-react-native": '1.0.0',
    "@reown/appkit-siwe-react-native": "1.0.0",
  }
}

• Run yarn install after replacing the packages

Step 2. Update your AppKit config

import { createWeb3Modal } from '@web3modal/ethers-react-native';
import { createAppKit } from '@reown/appkit-ethers-react-native';

Step 3. Update your Hooks usage Update your hook imports as follows:

import {
  useWeb3Modal,
  useWeb3ModalState,
  useWeb3ModalEvents,
  useWeb3ModalAccount,
  useWeb3ModalProvider,
  useWeb3ModalError,
  useWalletInfo,
} from '@web3modal/ethers-react-native';
import {
  useAppKit,
  useAppKitState,
  useAppKitEvents,
  useAppKitAccount,
  useAppKitProvider,
  useAppKitError,
  useWalletInfo,
} from '@reown/appkit-ethers-react-native';

Step 4. Update your Components usage Update your component imports as follows:

import {
  W3mAccountButton,
  W3mButton,
  W3mConnectButton,
  W3mNetworkButton,
  Web3Modal
} from '@web3modal/ethers-react-native';
import {
  AccountButton,
  AppKitButton,
  ConnectButton,
  NetworkButton,
  AppKit
} from '@reown/appkit-ethers-react-native';

Step 5. Update email wallet specific imports as follows:

import { EmailProvider } from '@web3modal/email-ethers-react-native';
import { AuthProvider } from '@reown/appkit-auth-ethers-react-native';

Step 6. Update your import to support Coinbase Wallet Update coinbase connector import as follows:

import { CoinbaseProvider } from '@web3modal/coinbase-ethers-react-native';
import { CoinbaseProvider } from '@reown/appkit-coinbase-ethers-react-native';

Final notes

• Ensure that you have updated all relevant configurations and imports in your project to reflect the changes from Web3Modal to AppKit.
• Test your application thoroughly to ensure that the migration has been successful and that all functionality is working as expected.
• Check our AppKit example for React Native to compare with your implementation in case you are having issues