React Native Hooks

The @stepflowjs/react-native package provides Stepflow integration for React Native and Expo applications. It includes native-specific optimizations for streaming and fetch.

Installation

pnpm add @stepflowjs/react-native @stepflowjs/client

Streaming Support

For proper streaming support (SSE) in React Native, it is highly recommended to use Expo SDK 52+ which includes a robust fetch implementation that supports readable streams.

If you are not using Expo, you may need to provide a customFetch implementation that supports streaming.

Setup

Wrap your application with the StepflowNativeProvider.

import { StepflowNativeProvider } from "@stepflowjs/react-native";

function App() {
  return (
    <StepflowNativeProvider
      config={{
        baseUrl: "https://api.your-app.com/stepflow",
        publicApiKey: "sf_pub_...",
        // Optional: custom fetch implementation
        // customFetch: myCustomFetch,
      }}
    >
      <YourComponents />
    </StepflowNativeProvider>
  );
}

Hooks

The hooks in @stepflowjs/react-native are identical to the React hooks but are optimized for the React Native environment.

`useWorkflowTrigger`

import { useWorkflowTrigger } from "@stepflowjs/react-native";

// Same API as @stepflowjs/react

`useWorkflowRun`

import { useWorkflowRun } from "@stepflowjs/react-native";

// Same API as @stepflowjs/react

`useWorkflowStream`

import { useWorkflowStream } from "@stepflowjs/react-native";

// Same API as @stepflowjs/react

Native Considerations

Fetch Implementation

React Native's default fetch does not support streaming. @stepflowjs/react-native attempts to auto-detect expo/fetch if available. You can also provide your own:

<StepflowNativeProvider
  config={{
    baseUrl: "...",
    customFetch: global.fetch, // Or a polyfill
    enableStreamingWarnings: true, // Warn if streaming might fail
  }}
>

Real-time Strategy

While SSE is supported via expo/fetch, WebSockets are often more reliable in mobile environments. You can configure the client to prefer WebSockets:

<StepflowNativeProvider
  config={{
    baseUrl: "...",
    wsUrl: "wss://api.your-app.com/stepflow",
    // Real-time strategy is configured per-subscription in the underlying client
  }}
>

React Native Hooks

On this page