Skip to main content
This document outlines the steps to migrate from the old @web3modal packages to the new @reown/appkit packages in your React Native project.
  • Wagmi
  • Ethers
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";

​
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
⌘I