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.

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

{
  "dependencies": {
    // Remove the following code lines
    "@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",

    // Add the following code lines
    "@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

// Remove the following code lines
import { createWeb3Modal } from "@web3modal/wagmi-react-native";

// Add the following code lines
import { createAppKit } from "@reown/appkit-wagmi-react-native";

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

// Remove the following code lines
import {
  useWeb3Modal,
  useWeb3ModalState,
  useWeb3ModalEvents,
  useWalletInfo,
} from "@web3modal/wagmi-react-native";

// Add the following code lines
import {
  useAppKit,
  useAppKitState,
  useAppKitEvents,
  useWalletInfo,
} from "@reown/appkit-wagmi-react-native";

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

// Remove the following code lines
import {
  W3mAccountButton,
  W3mButton,
  W3mConnectButton,
  W3mNetworkButton,
  Web3Modal,
} from "@web3modal/wagmi-react-native";

// Add the following code lines
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:

// Remove the following code lines
import { emailConnector } from "@web3modal/email-wagmi-react-native";

// Add the following code lines
import { authConnector } from "@reown/appkit-auth-wagmi-react-native";

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

// Remove the following code lines
import { coinbaseConnector } from "@web3modal/coinbase-wagmi-react-native";

// Add the following code lines
import { coinbaseConnector } from "@reown/appkit-coinbase-wagmi-react-native";

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

{
  "dependencies": {
    // Remove the following code lines
    "@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",

    // Add the following code lines
    "@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

// Remove the following code lines
import { createWeb3Modal } from "@web3modal/wagmi-react-native";

// Add the following code lines
import { createAppKit } from "@reown/appkit-wagmi-react-native";

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

// Remove the following code lines
import {
  useWeb3Modal,
  useWeb3ModalState,
  useWeb3ModalEvents,
  useWalletInfo,
} from "@web3modal/wagmi-react-native";

// Add the following code lines
import {
  useAppKit,
  useAppKitState,
  useAppKitEvents,
  useWalletInfo,
} from "@reown/appkit-wagmi-react-native";

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

// Remove the following code lines
import {
  W3mAccountButton,
  W3mButton,
  W3mConnectButton,
  W3mNetworkButton,
  Web3Modal,
} from "@web3modal/wagmi-react-native";

// Add the following code lines
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:

// Remove the following code lines
import { emailConnector } from "@web3modal/email-wagmi-react-native";

// Add the following code lines
import { authConnector } from "@reown/appkit-auth-wagmi-react-native";

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

// Remove the following code lines
import { coinbaseConnector } from "@web3modal/coinbase-wagmi-react-native";

// Add the following code lines
import { coinbaseConnector } from "@reown/appkit-coinbase-wagmi-react-native";

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": {
    // Remove the following code lines
    "@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",

    // Add the following code lines
    "@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

// Remove the following code lines
import { createWeb3Modal } from "@web3modal/ethers-react-native";

// Add the following code lines
import { createAppKit } from "@reown/appkit-ethers-react-native";

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

// Remove the following code lines
import {
  useWeb3Modal,
  useWeb3ModalState,
  useWeb3ModalEvents,
  useWeb3ModalAccount,
  useWeb3ModalProvider,
  useWeb3ModalError,
  useWalletInfo,
} from "@web3modal/ethers-react-native";

// Add the following code lines
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:

// Remove the following code lines
import {
  W3mAccountButton,
  W3mButton,
  W3mConnectButton,
  W3mNetworkButton,
  Web3Modal,
} from "@web3modal/ethers-react-native";

// Add the following code lines
import {
  AccountButton,
  AppKitButton,
  ConnectButton,
  NetworkButton,
  AppKit,
} from "@reown/appkit-ethers-react-native";

Step 5. Update email wallet specific imports as follows:

// Remove the following code lines
import { EmailProvider } from "@web3modal/email-ethers-react-native";

// Add the following code lines
import { AuthProvider } from "@reown/appkit-auth-ethers-react-native";

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

// Remove the following code lines
import { CoinbaseProvider } from "@web3modal/coinbase-ethers-react-native";

// Add the following code lines
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

Getting Started

Features

Network

Authentication

Guides

Upgrade

Migration

Upgrade from Web3Modal to Reown AppKit for React Native

Final notes

Getting Started

Features

Network

Authentication

Guides

Upgrade

Migration

​Final notes

Final notes