Skip to main content



Control the modal with the useWeb3Modal hook

  import { useWeb3Modal } from '@web3modal/wagmi-react-native'

export default function Component() {

const { open, close } = useWeb3Modal()



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

open({ view: 'Account' })

List of views you can select

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


Get the current value of the modal's state

  import { useWeb3ModalState } from '@web3modal/wagmi-react-native'

const { open, selectedNetworkId } = useWeb3ModalState()

The modal state consists of two reactive values:

openOpen state will be true when the modal is open and false when closed.
selectedNetworkIdThe current chain id selected by the user


Get the last tracked modal event

  import { useWeb3ModalEvents } from '@web3modal/wagmi-react-native'

const event = useWeb3ModalEvents()

Ethereum Library

You can use Wagmi hooks to sign messages, interact with smart contracts, and much more.


Hook for accessing account data and connection status.

import { Text } from 'react-native'
import { useAccount } from 'wagmi'

function App() {
const { address, isConnecting, isDisconnected } = useAccount()

if (isConnecting) return <Text>Connecting…</Text>
if (isDisconnected) return <Text>Disconnected</Text>
return <Text>{address}</Text>


Hook for signing messages with connected account.

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

function App() {
const { data, isError, isLoading, isSuccess, signMessage } = useSignMessage({
message: 'gm wagmi frens'

return (
<Pressable disabled={isLoading} onPress={() => signMessage()}>
<Text>Sign message</Text>
{isSuccess && <Text>Signature: {data}</Text>}
{isError && <Text>Error signing message</Text>}


Hook for calling a read method on a Contract.

import { View, Text } from 'react-native'
import { useContractRead } from 'wagmi'

function App() {
const { data, isError, isLoading, isSuccess } = useContractRead({
address: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
abi: wagmigotchiABI,
functionName: 'getHunger'

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