Components

Connect

A drop-in wallet connection component that handles the entire authentication flow. When disconnected, it displays a "Connect Wallet" button. When connected, it shows the user's address and opens a Profile modal on press.

Props:

• onConnect?: () => void – Callback triggered after successful authentication
• onDisconnect?: () => void – Callback triggered after logout
• balanceType?: "cadence" | "evm" | "combined" – Specifies which balance to display (default: "cadence")
  • "cadence": Shows the token balance from the Cadence side
  • "evm": Shows the token balance from the Flow EVM side
  • "combined": Shows the total combined token balance from both sides
• balanceTokens?: TokenConfig[] – Optional array of token configurations to display in the balance selector
• modalEnabled?: boolean – Whether to show the profile modal on press when connected (default: true)

Basic Usage:

The simplest way to add wallet connection to your app:

_12

import { View, Text } from "react-native";

_12

import { Connect } from "@onflow/react-native-sdk";

_12

_12

function WalletSection() {

_12

return (

_12

<View>

_12

<Text>Connect Wallet</Text>

_12

<Text>Connect your Flow wallet to interact with the blockchain.</Text>

_12

<Connect />

_12

</View>

_12

);

_12

}

With Callbacks:

_10

import { Connect } from "@onflow/react-native-sdk";

_10

_10

<Connect

_10

onConnect={() => console.log("Wallet connected!")}

_10

onDisconnect={() => console.log("Wallet disconnected")}

_10

/>

With Balance Display:

_12

import { Connect } from "@onflow/react-native-sdk";

_12

_12

<Connect

_12

balanceType="combined"

_12

balanceTokens={[

_12

{

_12

symbol: "FLOW",

_12

name: "Flow",

_12

vaultIdentifier: "A.1654653399040a61.FlowToken.Vault",

_12

},

_12

]}

_12

/>

---

Profile

A standalone component for displaying wallet information including account address and balance. Use this when you want to show user details separately from the Connect button.

Props:

• onDisconnect?: () => void – Callback triggered when the user presses the disconnect button
• balanceType?: "cadence" | "evm" | "combined" – Specifies which balance to display (default: "cadence")
  • "cadence": Shows the token balance from the Cadence side
  • "evm": Shows the token balance from the Flow EVM side
  • "combined": Shows the total combined token balance from both sides
• balanceTokens?: TokenConfig[] – Optional array of token configurations to display in the balance selector

Usage:

_19

import { View } from "react-native";

_19

import { Profile, useFlowCurrentUser } from "@onflow/react-native-sdk";

_19

_19

function UserProfile() {

_19

const { user } = useFlowCurrentUser();

_19

_19

if (!user?.loggedIn) {

_19

return null;

_19

}

_19

_19

return (

_19

<View>

_19

<Profile

_19

balanceType="combined"

_19

onDisconnect={() => console.log("User disconnected")}

_19

/>

_19

</View>

_19

);

_19

}