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

//...
}

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

Wagmi

import { useAppKitState } from '@reown/appkit-wagmi-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.

Wagmi

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

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

useAppKitEventSubscription

Subscribe to modal specific events

Wagmi

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

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

useWalletInfo

Get the metadata information from the connected wallet

Wagmi

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

const { walletInfo } = useWalletInfo()

Ethereum Library

Wagmi

useAccount

Hook that returns the client’s information.

import { useAccount } from "wagmi";

function Components() {
  const { address, status } = useAccount();

  //...
}

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