# FlowFrame

Canonical page: https://docs.ovok.com/native-sdk/guide/components/ui/flow-frame

`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.

```tsx
<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 [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/ui` API reference](/native-sdk/reference/ui).