Connect Wallet Button

Button to connect a user’s wallet to your app, with support for MetaMask, Coinbase, Rainbow, TrustWallet and will add all other WalletConnect wallets.

Wallets you provide to the ThirdwebProvider's supportedWallets prop are shown as options to connect to (if not configured, the default options are shown: MetaMask and CoinbaseWallet).

import { ConnectWallet } from "@thirdweb-dev/react-native";

Usage

Render the ConnectWallet component to display the button.

import { ConnectWallet } from "@thirdweb-dev/react-native";

function App() {
  return <ConnectWallet />;
}

Configuration

theme (optional)

You can pass a custom theme object that will control the colors of the button or pass one of our default themes: light or dark.

The default value is "dark".

import { ConnectWallet } from "@thirdweb-dev/react-native";

function App() {
  return (
    <ConnectWallet
      theme="dark"
    />
  );
}

You could also define custom background and text color for the button:

import { ConnectWallet, lightTheme } from "@thirdweb-dev/react-native";

function App() {
  return (
    <ConnectWallet
      theme={lightTheme({
        buttonBackgroundColor: 'black'
        buttonTextColor: 'white'
      })}
    />
  );
}

Or you can fully customize the theme:

import { ConnectWallet, darkTheme } from "@thirdweb-dev/react-native";

const darkThemeCustom = darkTheme();

function App() {
  return (
    <ConnectWallet
      theme={{
        ...darkThemeCustom,
        colors: {
          ...darkThemeCustom.colors,
          backgroundHighlight: "blue",
        },
      }}
    />
  );
}