Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.firstflow.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Install

npm install @firstflow/react-native
npm install @react-native-async-storage/async-storage
For iOS, link native modules: 
cd ios && pod install

​
Add the provider

React Native does not have a .env file mechanism. Pass credentials as string literals or use a tool like react-native-config or expo-constants. 
import { FirstflowProvider } from "@firstflow/react-native";

export default function App() {
  return (
    <FirstflowProvider
      agentId="your-agent-id"
      apiKey="your-api-key"
      user={{
        id: currentUser.id,
        traits: {
          plan: currentUser.plan,
        },
      }}
    >
      <ChatApp />
    </FirstflowProvider>
  );
}

​
Wrap your chat screen

import { FirstflowWidget } from "@firstflow/react-native";

function ChatScreen() {
  return (
    <FirstflowWidget experiencePlacement="inlineStack">
      <MessageList />
      <Composer />
    </FirstflowWidget>
  );
}

​
Handle keyboard offset

Use useKeyboardHeight to shift your layout up when the software keyboard opens: 
import { FirstflowWidget, useKeyboardHeight } from "@firstflow/react-native";
import { View } from "react-native";

function ChatScreen() {
  const keyboardHeight = useKeyboardHeight();

  return (
    <FirstflowWidget experiencePlacement="inlineStack">
      <View style={{ flex: 1, paddingBottom: keyboardHeight }}>
        <MessageList />
        <Composer />
      </View>
    </FirstflowWidget>
  );
}

​
Next steps

React Native reference

All exports from @firstflow/react-native

useKeyboardHeight()

Keyboard height hook API

FirstflowProvider

All provider props

useFirstflow()

User identity and analytics