useAppKit

The useAppKit hook provides functions to control the modal’s visibility. You can use it to programmatically open or close the modal.
import { useAppKit } from '@reown/appkit-wagmi-react-native'
import { Button } from 'react-native';

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

  return (
    <>
      <Button title="Open Modal" onPress={() => open()} />
      <Button title="Open Account View" onPress={() => open({ view: 'Account' })} />
      <Button title="Close Modal" onPress={() => close()} />
    </>
  );
}

You can also select the modal’s view when calling the open function
open({ view: 'Account' })
List of views you can select
VariableDescription
ConnectPrincipal view of the modal - default view when disconnected.
AccountUser profile - default view when connected.
NetworksList 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.
SwapSwap tokens seamlessly - users can trade tokens directly in your app with transparent pricing.
OnRampBuy crypto with fiat - users can purchase crypto directly in your app using their preferred payment method.

useAppKitState

Get the current value of the modal’s state
import { useAppKitState } from '@reown/appkit-wagmi-react-native'
import { Text, View } from 'react-native';

export default function Component() {
  const { open, selectedNetworkId } = useAppKitState();

  return (
    <View>
      <Text>Modal Open: {String(open)}</Text>
      <Text>Selected Network ID: {selectedNetworkId}</Text>
    </View>
  );
}
The modal state consists of two reactive values:
StateDescriptionType
openOpen state will be true when the modal is open and false when closed.boolean
selectedNetworkIdThe 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'
import { useEffect } from 'react';

export default function Component() {
  const event = useAppKitEvents(newEvent => {
    console.log('New AppKit Event:', newEvent);
    // Example: Handle a specific event type
    if (newEvent?.type === 'MODAL_CLOSED') {
      // Do something when the modal is closed
    }
  });

  useEffect(() => {
    if (event) {
      console.log('Last AppKit Event:', event);
    }
  }, [event]);

  return null; // Or your component JSX
}

useAppKitEventSubscription

Subscribe to modal specific events
import { useAppKitEventSubscription } from '@reown/appkit-wagmi-react-native'
import { useEffect } from 'react';

export default function Component() {
  useAppKitEventSubscription('MODAL_OPEN', newEvent => {
    console.log('Modal Opened Event:', newEvent);
    // Perform actions when the modal opens
  });

  useAppKitEventSubscription('MODAL_CLOSED', newEvent => {
    console.log('Modal Closed Event:', newEvent);
    // Perform actions when the modal closes
  });
  
  return null; // Or your component JSX
}

useWalletInfo

Get the metadata information from the connected wallet
import { useWalletInfo } from '@reown/appkit-wagmi-react-native'
import { Text, View } from 'react-native';

export default function Component() {
  const { walletInfo } = useWalletInfo();

  if (!walletInfo) {
    return <Text>No wallet connected or info unavailable.</Text>;
  }

  return (
    <View>
      <Text>Wallet Name: {walletInfo.name}</Text>
      <Text>Wallet Icon: {walletInfo.icon}</Text> 
    </View>
  );
}

Ethereum Library

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