Flow React Native SDK

The easiest way to build React Native apps on Flow. A lightweight, TypeScript-first library that makes Flow blockchain interactions feel native to React Native development.

Quick Start

1. Install

_10

npm install @onflow/react-native-sdk

2. Wrap Your App

Create a provider wrapper component:

_28

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

_28

import flowJSON from "../flow.json";

_28

_28

export function FlowProviderWrapper({ children }: { children: React.ReactNode }) {

_28

return (

_28

<FlowProvider

_28

config={{

_28

// Network configuration

_28

accessNodeUrl: "https://rest-testnet.onflow.org",

_28

discoveryWallet: "https://fcl-discovery.onflow.org/testnet/authn",

_28

discoveryAuthnEndpoint: "https://fcl-discovery.onflow.org/api/testnet/authn",

_28

flowNetwork: "testnet",

_28

_28

// App metadata (displayed in wallet)

_28

appDetailTitle: "My Flow App",

_28

appDetailUrl: "https://myapp.com",

_28

appDetailIcon: "https://myapp.com/icon.png",

_28

appDetailDescription: "A Flow blockchain app built with Expo",

_28

_28

// WalletConnect project ID (get one at https://cloud.walletconnect.com)

_28

walletconnectProjectId: "YOUR_PROJECT_ID",

_28

}}

_28

flowJson={flowJSON}

_28

>

_28

{children}

_28

</FlowProvider>

_28

);

_28

}

Then wrap your app in the root layout:

_15

import { FlowProviderWrapper } from "@/components/flow-provider-wrapper";

_15

import { Stack } from "expo-router";

_15

import { StatusBar } from "expo-status-bar";

_15

import { View } from "react-native";

_15

_15

export default function RootLayout() {

_15

return (

_15

<FlowProviderWrapper>

_15

<View style={{ flex: 1, backgroundColor: "#fff" }}>

_15

<Stack screenOptions={{ headerShown: false }} />

_15

</View>

_15

<StatusBar style="dark" />

_15

</FlowProviderWrapper>

_15

);

_15

}

3. Start Building

_42

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

_42

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

_42

_42

function MyApp() {

_42

const { user } = useFlowCurrentUser();

_42

_42

const { data: balance, isLoading, refetch } = useFlowQuery({

_42

cadence: `

_42

import FlowToken from 0x7e60df042a9c0868

_42

_42

access(all) fun main(address: Address): UFix64 {

_42

let account = getAccount(address)

_42

let vaultRef = account.capabilities

_42

.get<&FlowToken.Vault>(/public/flowTokenBalance)

_42

.borrow()

_42

?? panic("Could not borrow Balance reference")

_42

return vaultRef.balance

_42

}

_42

`,

_42

args: (arg, t) => [arg(user?.addr, t.Address)],

_42

query: { enabled: !!user?.addr },

_42

});

_42

_42

return (

_42

<View>

_42

<Connect />

_42

{user?.loggedIn && (

_42

<View>

_42

<Text>Welcome, {user.addr}!</Text>

_42

{isLoading ? (

_42

<Text>Loading balance...</Text>

_42

) : (

_42

<Text>Balance: {balance ? String(balance) : "0.00"} FLOW</Text>

_42

)}

_42

<Pressable onPress={() => refetch()}>

_42

<Text>Refresh</Text>

_42

</Pressable>

_42

</View>

_42

)}

_42

</View>

_42

);

_42

}

Starter Template

Get started quickly with the flow-react-native-sdk-starter template which includes a pre-configured Expo project with wallet connection, balance queries, and transaction examples.

---

Configuration Options

The FlowProvider accepts the following configuration:

Property	Description
accessNodeUrl	REST endpoint for blockchain access (e.g., https://rest-testnet.onflow.org)
discoveryWallet	URL for wallet discovery/selection UI
discoveryAuthnEndpoint	API endpoint for authentication
flowNetwork	Network selection: "testnet" or "mainnet"
appDetailTitle	App name displayed in wallet
appDetailUrl	App URL displayed in wallet
appDetailIcon	App icon URL displayed in wallet
appDetailDescription	App description displayed in wallet
walletconnectProjectId	WalletConnect Cloud project ID

Mainnet Configuration:

_10

config={{

_10

accessNodeUrl: "https://rest-mainnet.onflow.org",

_10

discoveryWallet: "https://fcl-discovery.onflow.org/authn",

_10

discoveryAuthnEndpoint: "https://fcl-discovery.onflow.org/api/authn",

_10

flowNetwork: "mainnet",

_10

// ... other options

_10

}}

---

Hooks

Cadence Hooks for native Flow interactions:

• Authentication & user management
• Account details & balances
• Block & transaction queries
• Real-time event subscriptions
• Script execution & mutations

Cross-VM Hooks for bridging Cadence ↔ Flow EVM:

• Atomic batch transactions
• Token & NFT bridging
• Cross-chain balance queries

→ View all hooks

---

Components

Native UI components for React Native:

• <Connect /> – Wallet authentication with balance display
• <Profile /> – Standalone wallet information display

→ View all components

---

Why Choose React Native SDK?

Developer Experience First

• TypeScript-native with full type safety
• Familiar React Native patterns and conventions
• Comprehensive error handling and loading states

Production Ready

• Built on battle-tested libraries (TanStack Query)
• Automatic retries, caching, and background updates
• Cross-VM support for hybrid Cadence/EVM applications

Mobile Native

• Native mobile wallet integrations via WalletConnect
• React Native components that feel native
• Expo and bare React Native support

---

Need Help?

• Hooks Documentation – Detailed API reference for all hooks
• Components Documentation – UI components guide
• Configuration Guide – Learn about configuring flow.json