Hooks

useAppKit

Control the modal with the useAppKit hook

Wagmi

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

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

  open()

  //...
}

Ethers

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

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

  open()

  //...
}

Ethers v5

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' })

List of views you can select

Variable	Description
Connect	Principal view of the modal - default view when disconnected
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

Wagmi

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

const { open, selectedNetworkId } = useAppKitState()

Ethers

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

const { open, selectedNetworkId } = useAppKitState()

Ethers v5

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

Wagmi

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

const event = useAppKitEvents()

Ethers

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

const event = useAppKitEvents()

Ethers v5

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

const event = useAppKitEvents()

useWalletInfo

Get the metadata information from the connected wallet

Wagmi

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

const { walletInfo } = useWalletInfo()

Ethers

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

const { walletInfo } = useWalletInfo()

Ethers v5

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

const { walletInfo } = useWalletInfo()

Ethereum Library

Wagmi

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

Ethers

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

Ethers v5

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()

  //...
}

Learn More About Ethers v5