Hooks

useAppKit

Control the modal with the useAppKit hook

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

export default function Component() {
  const { open, close } = useAppKit()

open()

//...
}

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

export default function Component() {
  const { open, close } = useAppKit()

open()

//...
}

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

export default function Component() {
  const { open, close } = useAppKit()

  open()

  //...
}

import { useAppKit } from '@reown/appkit-ethers5-react-native'

export default function Component() {
  const { open, close } = useAppKit()

open()

//...
}

You can also select the modal’s view when calling the open function

open({ view: 'Account' })

// to connect and show multi wallets view
open({ view: 'Connect'})

// to connect and show only solana wallets
open({ view: 'Connect', namespace: 'solana' })

// to connect and show only bitcoin wallets
open({ view: 'Connect', namespace: 'bip122' })

// to connect and show only ethereum wallets
open({ view: 'Connect', namespace: 'eip155' })

List of views you can select

Variable	Description
`Connect`	Principal view of the modal - default view when disconnected. A `namespace` can be selected to connect to a specific network (solana, bip122 or eip155).
`Account`	User profile - default view when connected.
`Networks`	List of available networks - you can select and target a specific network before connecting.
`WhatIsANetwork`	”What is a network” onboarding view.
`WhatIsAWallet`	”What is a wallet” onboarding view.

useAppKitState

Get the current value of the modal’s state

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

const { open, selectedNetworkId } = useAppKitState()

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

const { open, selectedNetworkId } = useAppKitState()

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

const { open, selectedNetworkId } = useAppKitState()

import { useAppKitState } from '@reown/appkit-ethers5-react-native'

const { open, selectedNetworkId } = useAppKitState()

The modal state consists of two reactive values:

State	Description	Type
`open`	Open state will be true when the modal is open and false when closed.	`boolean`
`selectedNetworkId`	The current chain id selected by the user.	`number`

useAppKitEvents

Get the last tracked modal event. The hook accepts an optional callback function that is executed when the event is triggered.

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

const event = useAppKitEvents(event => {
  // your code here
})

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

const event = useAppKitEvents(event => {
  // your code here
})

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

const event = useAppKitEvents(event => {
  // your code here
})

import { useAppKitEvents } from '@reown/appkit-ethers5-react-native'

const event = useAppKitEvents(event => {
  // your code here
})

useAppKitEventSubscription

Subscribe to modal specific events

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

useAppKitEventSubscription('MODAL_OPEN', newEvent => {
  // your code here
});

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

useAppKitEventSubscription('MODAL_OPEN', newEvent => {
  // your code here
});

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

useAppKitEventSubscription('MODAL_OPEN', newEvent => {
  // your code here
});

import { useAppKitEventSubscription } from '@reown/appkit-ethers5-react-native'

useAppKitEventSubscription('MODAL_OPEN', newEvent => {
  // your code here
});

useWalletInfo

Get the metadata information from the connected wallet

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

const { walletInfo } = useWalletInfo()

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

const { walletInfo } = useWalletInfo()

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

const { walletInfo } = useWalletInfo()

import { useWalletInfo } from '@reown/appkit-ethers5-react-native'

const { walletInfo } = useWalletInfo()

Ethereum Library

useAppKitAccount

Hook that returns the client’s information.

import { useAppKitAccount } from "@reown/appkit/react";

function Components() {
  const { address, caipAddress, isConnected } = useAppKitAccount();

  //...
}

useSignMessage

Hook for signing messages with connected account.

import { View, Text, Pressable } from "react-native";
import { useSignMessage } from "wagmi";

function App() {
  const { data, isError, isPending, isSuccess, signMessage } = useSignMessage();

  return (
    <View>
      <Pressable
        disabled={isPending}
        onPress={() => signMessage({ message: "hello world" })}
      >
        <Text>Sign message</Text>
      </Pressable>
      {isSuccess && <Text>Signature: {data}</Text>}
      {isError && <Text>Error signing message</Text>}
    </View>
  );
}

useReadContract

Hook for calling a read method on a Contract.

import { View, Text } from "react-native";
import { useReadContract } from "./abi";

function App() {
  const { data, isError, isPending, isSuccess } = useReadContract({
    abi,
    address: "0x6b175474e89094c44da98b954eedeac495271d0f",
    functionName: "totalSupply",
  });

  return (
    <View>
      {isPending && <Text>Loading</Text>}
      {isSuccess && <Text>Response: {data?.toString()}</Text>}
      {isError && <Text>Error reading contract</Text>}
    </View>
  );
}

Learn More

useAppKitAccount

Hook that returns the client’s information.

import { useAppKitAccount } from "@reown/appkit/react";

function Components() {
  const { address, caipAddress, isConnected } = useAppKitAccount();

  //...
}

useSignMessage

Hook for signing messages with connected account.

import { View, Text, Pressable } from "react-native";
import { useSignMessage } from "wagmi";

function App() {
  const { data, isError, isPending, isSuccess, signMessage } = useSignMessage();

  return (
    <View>
      <Pressable
        disabled={isPending}
        onPress={() => signMessage({ message: "hello world" })}
      >
        <Text>Sign message</Text>
      </Pressable>
      {isSuccess && <Text>Signature: {data}</Text>}
      {isError && <Text>Error signing message</Text>}
    </View>
  );
}

useReadContract

Hook for calling a read method on a Contract.

import { View, Text } from "react-native";
import { useReadContract } from "./abi";

function App() {
  const { data, isError, isPending, isSuccess } = useReadContract({
    abi,
    address: "0x6b175474e89094c44da98b954eedeac495271d0f",
    functionName: "totalSupply",
  });

  return (
    <View>
      {isPending && <Text>Loading</Text>}
      {isSuccess && <Text>Response: {data?.toString()}</Text>}
      {isError && <Text>Error reading contract</Text>}
    </View>
  );
}

Learn More

useAppKitAccount

Hook that returns the client’s information.

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

function Components() {
  const { address, chainId, isConnected } = useAppKitAccount();

  //...
}

useAppKitProvider

Hook that returns the walletProvider and the WalletProviderType.

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

function Components() {
  const { walletProvider } = useAppKitProvider();

  async function onSignMessage() {
    const ethersProvider = new BrowserProvider(walletProvider);
    const signer = await ethersProvider.getSigner();
    const message = "hello appkit rn + ethers";
    const signature = await signer.signMessage(message);
    console.log(signature.toString());
  }

  return <button onClick={() => onSignMessage()}>Sign Message</button>;
}

useAppKitError

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

function Components() {
  const { error } = useAppKitError();

  //...
}

Learn More About Ethers

useAppKitAccount

Hook that returns the client’s information.

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

function Components() {
  const { address, chainId, isConnected } = useAppKitAccount();

  //...
}

useAppKitProvider

Hook that returns the walletProvider and the WalletProviderType.

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

function Components() {
  const { walletProvider } = useAppKitProvider();

  async function onSignMessage() {
    const provider = new ethers.providers.Web3Provider(walletProvider);
    const signer = provider.getSigner();
    const signature = await signer?.signMessage("Hello AppKit Ethers");
    console.log(signature);
  }

  return <button onClick={() => onSignMessage()}>Sign Message</button>;
}

useAppKitError

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

function Components() {
  const { error } = useAppKitError();

  //...
}

Fundamentals

Authentication

Notifications

Cloud

useAppKit

useAppKitState

useAppKitEvents

useAppKitEventSubscription

useWalletInfo

Ethereum Library

useAppKitAccount

useSignMessage

useReadContract

Learn More

useAppKitAccount

useSignMessage

useReadContract

Learn More

useAppKitAccount

useAppKitProvider

useAppKitError

Learn More About Ethers

useAppKitAccount

useAppKitProvider

useAppKitError

Learn More About Ethers v5

Fundamentals

Authentication

Notifications

Cloud

​useAppKit

​useAppKitState

​useAppKitEvents

​useAppKitEventSubscription

​useWalletInfo

​Ethereum Library

​useAppKitAccount

​useSignMessage

​useReadContract

Learn More

​useAppKitAccount

​useSignMessage

​useReadContract

Learn More

​useAppKitAccount

​useAppKitProvider

​useAppKitError

Learn More About Ethers

​useAppKitAccount

​useAppKitProvider

​useAppKitError

Learn More About Ethers v5

useAppKit

useAppKitState

useAppKitEvents

useAppKitEventSubscription

useWalletInfo

Ethereum Library

useAppKitAccount

useSignMessage

useReadContract

useAppKitAccount

useSignMessage

useReadContract

useAppKitAccount

useAppKitProvider

useAppKitError

useAppKitAccount

useAppKitProvider

useAppKitError