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.

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/ui API reference.