React Native

Introduction

AppKit has support for Wagmi and Ethers. Choose one of these Ethereum libraries to get started.

Don’t have a project ID?

Head over to Reown Cloud and create a new project now!

Get started

Installation

yarn add @reown/appkit-wagmi-react-native wagmi viem @tanstack/react-query

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

yarn add @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

yarn add @reown/appkit-wagmi-react-native wagmi viem @tanstack/react-query

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

yarn add @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

yarn add @reown/appkit-ethers-react-native ethers

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

yarn add @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

yarn add @reown/appkit-ethers5-react-native ethers@5.7.2

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

yarn add @ethersproject/shims@5.7.0 @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

yarn add @reown/appkit-wagmi-react-native wagmi viem @tanstack/react-query

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

yarn add @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

yarn add @reown/appkit-wagmi-react-native wagmi viem @tanstack/react-query

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

yarn add @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

yarn add @reown/appkit-ethers-react-native ethers

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

yarn add @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

yarn add @reown/appkit-ethers5-react-native ethers@5.7.2

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

yarn add @ethersproject/shims@5.7.0 @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

npx expo install @reown/appkit-wagmi-react-native wagmi viem @tanstack/react-query

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

npx expo 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 expo-application

npx expo install @reown/appkit-wagmi-react-native wagmi viem @tanstack/react-query

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

npx expo 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 expo-application

npx expo install @reown/appkit-ethers-react-native ethers

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

npx expo 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 expo-application

npx expo install @reown/appkit-ethers5-react-native ethers@5.7.2

Additionally add these extra packages to help with async storage, polyfills, and SVG’s.

npx expo install @ethersproject/shims@5.7.0 @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 expo-application

Implementation

Start by importing createAppKit, and wagmi packages, then create your configs as shown below. Finally, pass your configuration to createAppKit.

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 {
  createAppKit,
  defaultWagmiConfig,
  AppKit,
} from "@reown/appkit-wagmi-react-native";

// 0. Setup queryClient
const queryClient = new QueryClient();

// 1. Get projectId at https://cloud.reown.com
const projectId = "YOUR_PROJECT_ID";

// 2. Create config
const metadata = {
  name: "AppKit RN",
  description: "AppKit RN Example",
  url: "https://reown.com/appkit",
  icons: ["https://avatars.githubusercontent.com/u/179229932"],
  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
createAppKit({
  projectId,
  wagmiConfig,
  defaultChain: mainnet, // Optional
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
});

export default function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        // Rest of your app...
        <AppKit />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

To open AppKit modal you can use our default button component or build your own logic using our hooks.

You can use our components to open the modal

import { AppKitButton } from "@reown/appkit-wagmi-react-native";

export default function ConnectView() {
  return (
    <>
      ...rest of your view
      <AppKitButton />
    </>
  );
}

Learn more about the AppKit components here

You can use our components to open the modal

import { AppKitButton } from "@reown/appkit-wagmi-react-native";

export default function ConnectView() {
  return (
    <>
      ...rest of your view
      <AppKitButton />
    </>
  );
}

Learn more about the AppKit components here

You can trigger the modal by calling the open function from useAppKit hook.

import { Pressable, Text } from "react-native";
import { useAppKit } from "@reown/appkit-wagmi-react-native";

export default function ConnectView() {
  const { open } = useAppKit();

  return (
    <>
      <Pressable onClick={() => open()}>
        <Text>Open Connect Modal</Text>
      </Pressable>
    </>
  );
}

Learn more about the AppKit hooks here

Start by importing createAppKit, and wagmi packages, then create your configs as shown below. Finally, pass your configuration to createAppKit.

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 {
  createAppKit,
  defaultWagmiConfig,
  AppKit,
} from "@reown/appkit-wagmi-react-native";

// 0. Setup queryClient
const queryClient = new QueryClient();

// 1. Get projectId at https://cloud.reown.com
const projectId = "YOUR_PROJECT_ID";

// 2. Create config
const metadata = {
  name: "AppKit RN",
  description: "AppKit RN Example",
  url: "https://reown.com/appkit",
  icons: ["https://avatars.githubusercontent.com/u/179229932"],
  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
createAppKit({
  projectId,
  wagmiConfig,
  defaultChain: mainnet, // Optional
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
});

export default function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        // Rest of your app...
        <AppKit />
      </QueryClientProvider>
    </WagmiProvider>
  );
}

To open AppKit modal you can use our default button component or build your own logic using our hooks.

You can use our components to open the modal

import { AppKitButton } from "@reown/appkit-wagmi-react-native";

export default function ConnectView() {
  return (
    <>
      ...rest of your view
      <AppKitButton />
    </>
  );
}

Learn more about the AppKit components here

You can use our components to open the modal

import { AppKitButton } from "@reown/appkit-wagmi-react-native";

export default function ConnectView() {
  return (
    <>
      ...rest of your view
      <AppKitButton />
    </>
  );
}

Learn more about the AppKit components here

You can trigger the modal by calling the open function from useAppKit hook.

import { Pressable, Text } from "react-native";
import { useAppKit } from "@reown/appkit-wagmi-react-native";

export default function ConnectView() {
  const { open } = useAppKit();

  return (
    <>
      <Pressable onClick={() => open()}>
        <Text>Open Connect Modal</Text>
      </Pressable>
    </>
  );
}

Learn more about the AppKit hooks here

Start by importing createAppKit and create your configs as shown below. Finally, pass your configuration to createAppKit.

Make sure you import @walletconnect/react-native-compat before using our package to avoid any issues.

import "@walletconnect/react-native-compat";

import {
  createAppKit,
  defaultConfig,
  AppKit,
} from "@reown/appkit-ethers-react-native";

// 1. Get projectId from https://cloud.reown.com
const projectId = "YOUR_PROJECT_ID";

// 2. Create config
const metadata = {
  name: "AppKit RN",
  description: "AppKit RN Example",
  url: "https://reown.com/appkit",
  icons: ["https://avatars.githubusercontent.com/u/179229932"],
  redirect: {
    native: "YOUR_APP_SCHEME://",
  },
};

const config = defaultConfig({ metadata });

// 3. Define your chains
const mainnet = {
  chainId: 1,
  name: "Ethereum",
  currency: "ETH",
  explorerUrl: "https://etherscan.io",
  rpcUrl: "https://cloudflare-eth.com",
};

const polygon = {
  chainId: 137,
  name: "Polygon",
  currency: "MATIC",
  explorerUrl: "https://polygonscan.com",
  rpcUrl: "https://polygon-rpc.com",
};

const chains = [mainnet, polygon];

// 4. Create modal
createAppKit({
  projectId,
  chains,
  config,
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
});

export default function App() {
  return (
    <>
      // Rest of your app...
      <AppKit />
    </>
  );
}

To open AppKit modal you can use our default button component or build your own logic using our hooks.

You can use our components to open the modal

import { AppKitButton } from "@reown/appkit-ethers-react-native";

export default function ConnectView() {
  return (
    <>
      ...rest of your view
      <AppKitButton />
    </>
  );
}

Learn more about the AppKit components here

You can use our components to open the modal

import { AppKitButton } from "@reown/appkit-ethers-react-native";

export default function ConnectView() {
  return (
    <>
      ...rest of your view
      <AppKitButton />
    </>
  );
}

Learn more about the AppKit components here

You can trigger the modal by calling the open function from useAppKit hook.

import { Pressable, Text } from "react-native";
import { useAppKit } from "@reown/appkit-ethers-react-native";

export default function ConnectView() {
  const { open } = useAppKit();

  return (
    <>
      <Pressable onClick={() => open()}>
        <Text>Open Connect Modal</Text>
      </Pressable>
    </>
  );
}

Learn more about the AppKit hooks here

Start by importing createAppKit and create your configs as shown below. Finally, pass your configuration to createAppKit.

Make sure you import @walletconnect/react-native-compat and @ethersproject/shims before using our package to avoid any issues.

import "@walletconnect/react-native-compat";
import "@ethersproject/shims";

import {
  createAppKit,
  defaultConfig,
  AppKit,
} from "@reown/appkit-ethers5-react-native";

// 1. Get projectId from https://cloud.reown.com
const projectId = "YOUR_PROJECT_ID";

// 2. Create config
const metadata = {
  name: "AppKit RN",
  description: "AppKit RN Example",
  url: "https://reown.com/appkit",
  icons: ["https://avatars.githubusercontent.com/u/179229932"],
  redirect: {
    native: "YOUR_APP_SCHEME://",
  },
};

const config = defaultConfig({ metadata });

// 3. Define your chains
const mainnet = {
  chainId: 1,
  name: "Ethereum",
  currency: "ETH",
  explorerUrl: "https://etherscan.io",
  rpcUrl: "https://cloudflare-eth.com",
};

const polygon = {
  chainId: 137,
  name: "Polygon",
  currency: "MATIC",
  explorerUrl: "https://polygonscan.com",
  rpcUrl: "https://polygon-rpc.com",
};

const chains = [mainnet, polygon];

// 4. Create modal
createAppKit({
  projectId,
  chains,
  config,
  enableAnalytics: true, // Optional - defaults to your Cloud configuration
});

export default function App() {
  return (
    <>
      // Rest of your app...
      <AppKit />
    </>
  );
}

To open AppKit modal you can use our default button component or build your own logic using our hooks.

You can use our components to open the modal

import { AppKitButton } from "@reown/appkit-ethers5-react-native";

export default function ConnectView() {
  return (
    <>
      ...rest of your view
      <AppKitButton />
    </>
  );
}

Learn more about the AppKit components here

You can use our components to open the modal

import { AppKitButton } from "@reown/appkit-ethers5-react-native";

export default function ConnectView() {
  return (
    <>
      ...rest of your view
      <AppKitButton />
    </>
  );
}

Learn more about the AppKit components here

You can trigger the modal by calling the open function from useAppKit hook.

import { Pressable, Text } from "react-native";
import { useAppKit } from "@reown/appkit-ethers5-react-native";

export default function ConnectView() {
  const { open } = useAppKit();

  return (
    <>
      <Pressable onClick={() => open()}>
        <Text>Open Connect Modal</Text>
      </Pressable>
    </>
  );
}

Learn more about the AppKit hooks here

Getting Support 🙋

Reown is committed to delivering the best developer experience.

If you have any questions, feature requests, or bug reports, feel free to open an issue on GitHub!

Enable Wallet Detection

Make sure your have @walletconnect/react-native-compat@2.10.5 or higher.

To enable AppKit to detect wallets installed on the device, you need to make specific changes to the native code of your project.

Open your Info.plist file.
Locate the <key>LSApplicationQueriesSchemes</key> section.
Add the desired wallet schemes as string entries within the <array>. These schemes represent the wallets you want to detect.
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>

Open your Info.plist file.
Locate the <key>LSApplicationQueriesSchemes</key> section.
Add the desired wallet schemes as string entries within the <array>. These schemes represent the wallets you want to detect.
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>

Open your AndroidManifest.xml file.
Locate the <queries> section.
Add the desired wallet package names as <package> entries within the <queries>. These package names correspond to the wallets you want to detect.
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>

Open your Info.plist file.
Locate the <key>LSApplicationQueriesSchemes</key> section.
Add the desired wallet schemes as string entries within the <array>. These schemes represent the wallets you want to detect.
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>

Open your Info.plist file.
Locate the <key>LSApplicationQueriesSchemes</key> section.
Add the desired wallet schemes as string entries within the <array>. These schemes represent the wallets you want to detect.
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>

Open your AndroidManifest.xml file.
Locate the <queries> section.
Add the desired wallet package names as <package> entries within the <queries>. These package names correspond to the wallets you want to detect.
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>

To enable AppKit to detect wallets installed on the device in your Expo project for iOS, follow these steps:

Open your app.json (or app.config.js) file.
Locate the ios section within the configuration.
Add the infoPlist object if it doesn’t exist, and within it, include the LSApplicationQueriesSchemes array. This array will contain the desired wallet schemes you want to detect.
Add the wallet schemes to the LSApplicationQueriesSchemes array.

Your configuration should look like this:

{
  "expo": {
    "ios": {
      "infoPlist": {
        "LSApplicationQueriesSchemes": [
          "metamask",
          "trust",
          "safe",
          "rainbow",
          "uniswap"
          // Add other wallet schemes names here
        ]
      }
    }
  }
}

To enable AppKit to detect wallets installed on the device in your Expo project for iOS, follow these steps:

Open your app.json (or app.config.js) file.
Locate the ios section within the configuration.
Add the infoPlist object if it doesn’t exist, and within it, include the LSApplicationQueriesSchemes array. This array will contain the desired wallet schemes you want to detect.
Add the wallet schemes to the LSApplicationQueriesSchemes array.

Your configuration should look like this:

{
  "expo": {
    "ios": {
      "infoPlist": {
        "LSApplicationQueriesSchemes": [
          "metamask",
          "trust",
          "safe",
          "rainbow",
          "uniswap"
          // Add other wallet schemes names here
        ]
      }
    }
  }
}

To enable AppKit to detect wallets installed on the device in your Expo project for Android, follow these steps:

Open your app.json (or app.config.js) file.
Locate the plugins section within the configuration.
Add queries.js in the plugins array:

{
  "plugins": [
    // other plugins,
    "./queries.js"
  ],
}

Create the file queries.js:

// based on https://github.com/expo/config-plugins/issues/123#issuecomment-1746757954

const {
  AndroidConfig,
  withAndroidManifest,
  createRunOncePlugin,
} = require("expo/config-plugins");

const queries = {
  package: [
    { $: { "android:name": "com.wallet.crypto.trustapp" } },
    { $: { "android:name": "io.metamask" } },
    { $: { "android:name": "me.rainbow" } },
    { $: { "android:name": "io.zerion.android" } },
    { $: { "android:name": "io.gnosis.safe" } },
    { $: { "android:name": "com.uniswap.mobile" } },
    // Add other wallet package names here
  ],
};

/**
 * @param {import('@expo/config-plugins').ExportedConfig} config
 */
const withAndroidManifestService = (config) => {
  return withAndroidManifest(config, (config) => {
    config.modResults.manifest = {
      ...config.modResults.manifest,
      queries,
    };

    return config;
  });
};

module.exports = createRunOncePlugin(
  withAndroidManifestService,
  "withAndroidManifestService",
  "1.0.0"
);

Add the wallet package names you want to be detected by your app.

Enable Coinbase Wallet

Follow these steps to install Coinbase SDK in your project along with our Coinbase package. Check here for more detailed information.

Note: Coinbase SDK is not compatible with Expo Go

Enable Expo Modules in your project running:

npx install-expo-modules@latest

Install Coinbase SDK

yarn add @coinbase/wallet-mobile-sdk react-native-mmkv

Install our custom connector

yarn add @reown/appkit-coinbase-wagmi-react-native

Run pod-install

npx pod-install

Enable Deeplink handling in your project following React Native docs
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>

Add Coinbase response 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();
}, []);

Initialize coinbaseConnector and add it in extraConnectors

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

const coinbase = coinbaseConnector({
  redirect: 'https://your-app-universal-link.com' || 'YOUR_APP_SCHEME://'
})

const wagmiConfig = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  extraConnectors: [coinbase]
})

Prefer universal links over custom schemes to avoid an app verification warning on Coinbase Wallet

Initialize coinbaseConnector and add it in extraConnectors

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

const coinbase = coinbaseConnector({
  redirect: 'https://your-app-universal-link.com' || 'YOUR_APP_SCHEME://'
})

const wagmiConfig = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  extraConnectors: [coinbase]
})

Prefer universal links over custom schemes to avoid an app verification warning on Coinbase Wallet

Initialize CoinbaseProvider and add it in the default config

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

const coinbaseProvider = new CoinbaseProvider({
  redirect: 'https://your-app-universal-link.com' || 'YOUR_APP_SCHEME://'
  rpcUrl: mainnet.rpcUrl
})

const config = defaultConfig({
  metadata,
  coinbase: coinbaseProvider
})

Prefer universal links over custom schemes to avoid an app verification warning on Coinbase Wallet

Initialize CoinbaseProvider and add it in the default config

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

const coinbaseProvider = new CoinbaseProvider({
  redirect: 'https://your-app-universal-link.com' || 'YOUR_APP_SCHEME://'
  rpcUrl: mainnet.rpcUrl
})

const config = defaultConfig({
  metadata,
  coinbase: coinbaseProvider
})

Prefer universal links over custom schemes to avoid an app verification warning on Coinbase Wallet

Check Coinbase docs for more detailed information.

Follow these steps to install Coinbase SDK in your project along with our Coinbase package. Check here for more detailed information.

Note: Coinbase SDK is not compatible with Expo Go

Enable Expo Modules in your project running:

npx install-expo-modules@latest

Install Coinbase SDK

yarn add @coinbase/wallet-mobile-sdk react-native-mmkv

Install our custom connector

yarn add @reown/appkit-coinbase-wagmi-react-native

Run pod-install

npx pod-install

Enable Deeplink handling in your project following React Native docs
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>

Add Coinbase response 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();
}, []);

Initialize coinbaseConnector and add it in extraConnectors

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

const coinbase = coinbaseConnector({
  redirect: 'https://your-app-universal-link.com' || 'YOUR_APP_SCHEME://'
})

const wagmiConfig = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  extraConnectors: [coinbase]
})

Prefer universal links over custom schemes to avoid an app verification warning on Coinbase Wallet

Initialize coinbaseConnector and add it in extraConnectors

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

const coinbase = coinbaseConnector({
  redirect: 'https://your-app-universal-link.com' || 'YOUR_APP_SCHEME://'
})

const wagmiConfig = defaultWagmiConfig({
  chains,
  projectId,
  metadata,
  extraConnectors: [coinbase]
})

Prefer universal links over custom schemes to avoid an app verification warning on Coinbase Wallet

Initialize CoinbaseProvider and add it in the default config

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

const coinbaseProvider = new CoinbaseProvider({
  redirect: 'https://your-app-universal-link.com' || 'YOUR_APP_SCHEME://'
  rpcUrl: mainnet.rpcUrl
})

const config = defaultConfig({
  metadata,
  coinbase: coinbaseProvider
})

Prefer universal links over custom schemes to avoid an app verification warning on Coinbase Wallet

Initialize CoinbaseProvider and add it in the default config

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

const coinbaseProvider = new CoinbaseProvider({
  redirect: 'https://your-app-universal-link.com' || 'YOUR_APP_SCHEME://'
  rpcUrl: mainnet.rpcUrl
})

const config = defaultConfig({
  metadata,
  coinbase: coinbaseProvider
})

Prefer universal links over custom schemes to avoid an app verification warning on Coinbase Wallet

Check Coinbase docs for more detailed information.

Coinbase SDK doesn’t support Expo Projects. More info

here

Examples

AppKit with Wagmi example

Check the React Native example using Wagmi

Test Apps

Want to see AppKit in action? Download our sample AppKit apps below and explore what it can do. Enjoy! 😊

Core

Notifications

Cloud

Installation

React Native

Introduction

Get started

Installation

Implementation

Getting Support 🙋

Enable Wallet Detection

Enable Coinbase Wallet

Examples

AppKit with Wagmi example

AppKit with Wagmi example

AppKit with Ethers example

AppKit with Ethers v5 example

Test Apps

Tutorial

Core

Notifications

Cloud

​React Native

​Introduction

Get started

​Installation

​Implementation

​Trigger the modal

​Trigger the modal

​Trigger the modal

​Trigger the modal

​Getting Support 🙋

​Enable Wallet Detection

​Enable Coinbase Wallet

​Examples

AppKit with Wagmi example

AppKit with Wagmi example

AppKit with Ethers example

AppKit with Ethers v5 example

​Test Apps

​Tutorial

React Native

Introduction

Installation

Implementation

Trigger the modal

Trigger the modal

Trigger the modal

Trigger the modal

Getting Support 🙋

Enable Wallet Detection

Enable Coinbase Wallet

Examples

Test Apps

Tutorial