Flow React Native SDK Starter

A minimal React Native / Expo starter template for building mobile apps on the Flow blockchain.

Features

• Wallet connection via WalletConnect
• Execute Cadence scripts (read from the blockchain)
• Send transactions (write to the blockchain)
• Testnet and Mainnet support

Prerequisites

• Node.js 18+
• Expo CLI
• iOS Simulator / Android Emulator or physical device
• A Flow wallet (e.g., Flow Wallet)

Getting Started

1. Install dependencies:

npm install

2. Start the development server:

npm start

3. Run on your device:
   • Press i for iOS Simulator
   • Press a for Android Emulator
   • Scan the QR code with Expo Go on your phone

Configuration

Changing Network

Edit config/flow.ts to switch between testnet and mainnet:

export const currentNetwork = "testnet"; // Change to 'mainnet' for production

Customizing App Details

Update the app details in config/flow.ts:

"app.detail.title": "Your App Name",
"app.detail.url": "https://your-app.com",
"app.detail.icon": "https://your-icon-url.png",
"app.detail.description": "Your app description",

WalletConnect Project ID

Get your own project ID from WalletConnect Cloud and update:

"walletconnect.projectId": "your-project-id",

Expo Router Integration

The SDK uses wc-redirect as the deeplink path for WalletConnect redirects. To prevent navigation flashes when the wallet redirects back to your app, this project includes a +native-intent.tsx file that intercepts the redirect:

// app/+native-intent.tsx
export function redirectSystemPath({
  path,
  initial,
}: {
  path: string;
  initial: boolean;
}): string {
  if (path.includes("wc-redirect")) {
    return "/";
  }
  return path;
}

This ensures the app stays on the current screen when returning from a wallet instead of briefly showing a navigation flash.

For more details, see Expo Router Native Intent documentation.

Learn More

• Flow Documentation
• FCL Documentation
• Cadence Language
• Expo Documentation