Flow React Native SDK

The easiest way to build React Native apps on Flow. A lightweight, TypeScript-first library for seamless Flow blockchain integration in your React Native apps.

note

This SDK shares the same hooks as the Flow React SDK, so if you're familiar with the web version, you'll feel right at home. The main differences are the React Native-specific components (Connect, Profile) and mobile wallet integrations.

Quick Start

1. Install

_10

npm install @onflow/react-native-sdk

2. Wrap Your App

Create a provider wrapper component:

_33

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

_33

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

_33

_33

export function FlowProviderWrapper({

_33

children,

_33

}: {

_33

children: React.ReactNode;

_33

}) {

_33

return (

_33

<FlowProvider

_33

config={{

_33

// Network configuration

_33

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

_33

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

_33

discoveryAuthnEndpoint:

_33

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

_33

flowNetwork: 'testnet',

_33

_33

// App metadata (displayed in wallet)

_33

appDetailTitle: 'My Flow App',

_33

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

_33

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

_33

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

_33

_33

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

_33

walletconnectProjectId: 'YOUR_PROJECT_ID',

_33

}}

_33

flowJson={flowJSON}

_33

>

_33

{children}

_33

</FlowProvider>

_33

);

_33

}

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

_50

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

_50

import {

_50

Connect,

_50

useFlowCurrentUser,

_50

useFlowQuery,

_50

} from '@onflow/react-native-sdk';

_50

_50

function MyApp() {

_50

const { user } = useFlowCurrentUser();

_50

_50

const {

_50

data: balance,

_50

isLoading,

_50

refetch,

_50

} = useFlowQuery({

_50

cadence: `

_50

import FlowToken from 0x7e60df042a9c0868

_50

_50

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

_50

let account = getAccount(address)

_50

let vaultRef = account.capabilities

_50

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

_50

.borrow()

_50

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

_50

return vaultRef.balance

_50

}

_50

`,

_50

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

_50

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

_50

});

_50

_50

return (

_50

<View>

_50

<Connect />

_50

{user?.loggedIn && (

_50

<View>

_50

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

_50

{isLoading ? (

_50

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

_50

) : (

_50

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

_50

)}

_50

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

_50

<Text>Refresh</Text>

_50

</Pressable>

_50

</View>

_50

)}

_50

</View>

_50

);

_50

}

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