`FlowFrame`

FlowFrame gives onboarding, pairing, setup, and guided tasks a shared layout for safe areas, keyboard avoidance, optional step progress, and back navigation. It does not own routes, step state, persistence, or form controls.

<FlowFrame
  title="Add a device"
  currentStep={2}
  totalSteps={4}
  onBack={() => navigation.goBack()}
  footer={<Button onPress={continueSetup}>Continue</Button>}
>
  <FlatList data={items} renderItem={renderItem} />
</FlowFrame>

The content region is not wrapped in a ScrollView, so it can contain a ScrollView, FlatList, or another screen-owned scrolling view without nested scroll containers. Give a scrollable child style={{ flex: 1 }} when it should fill the available space. Safe-area edges default to all four sides and can be overridden when the host shell already handles some edges. The frame uses React Native's KeyboardAvoidingView; choose keyboardBehavior and keyboardVerticalOffset to match the host navigation header.

On Android, the hardware back button calls onBack when it is supplied. Return false from the callback to let the host navigation handler continue; omit onBack or set handleAndroidBack={false} to leave the hardware action to the host. The visible back button calls the same callback.

Props

title?: string, header?: ReactNode, and footer?: ReactNode — host-owned content around the flow body.
children?: ReactNode — the active step; scrolling remains owned by the child.
currentStep?: number and totalSteps?: number — optional 1-based progress. The progress indicator is rendered only when both are positive integers and is clamped to the supplied range.
onBack?: () => boolean | void — visible back action and Android hardware back handling. Returning false allows Android back handling to continue.
backLabel?: string — accessible label and visible text for the back button.
safeAreaEdges?: Edge[] — edges managed by the safe-area context; defaults to top, right, bottom, and left.
keyboardBehavior?: "height" | "position" | "padding" and keyboardVerticalOffset?: number — keyboard avoidance configuration.
handleAndroidBack?: boolean — defaults to true when onBack is supplied.
progressAccessibilityLabel?: string, contentStyle?, style?, testID?, theme?, and slots? — accessibility, styling, and shared UI theme/slot props.

Import from @ovok/native/ui or the package's main entry point.

Props​

Props