Skip to main content

​
useAppKit

The useAppKit hook provides functions to control the modal’s visibility. You can use it to programmatically open or close the modal.
  • Wagmi
  • Ethers
  • Ethers v5
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
  • Wagmi
  • Ethers
  • Ethers v5
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.
  • Wagmi
  • Ethers
  • Ethers v5
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
  • Wagmi
  • Ethers
  • Ethers v5
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
  • Wagmi
  • Ethers
  • Ethers v5
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

  • Wagmi
  • Ethers
  • Ethers v5

​
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