# Layouts

> The 8 layout shells — ScreenLayout, Section, Grid, KeyboardStickyFooter, and more.

Layout components handle screen-shape problems — safe areas, keyboard avoidance, scrolling
behavior, sectioning. They're agnostic to navigation libraries.

## `ScreenLayout`

Full-screen container that owns top-safe-area + scroll + bottom-safe-area. Use as the
top-level wrapper of every screen.

```tsx
<ScreenLayout>
  <H1>Profile</H1>
  <Section>...</Section>
</ScreenLayout>
```

## `SafeArea`

Lower-level safe-area inset wrapper for cases where `<ScreenLayout>` is too opinionated.

```tsx
<SafeArea edges={['top']}>
  <Header />
</SafeArea>
```

## `Section`

Padded card-shaped section with optional title + trailing.

```tsx
<Section title="Goals" trailing={<Pressable>Edit</Pressable>}>
  <Stat label="Move" value="417" unit="cal" />
  <Stat label="Exercise" value="50" unit="min" />
</Section>
```

## `Grid`

Token-spaced grid for cards / tiles. Specify `columns` and the `gap` token.

```tsx
<Grid columns={2} gap="$3">
  <MetricCard label="Steps" value="8,460" />
  <MetricCard label="Distance" value="6.5 km" />
</Grid>
```

## `Divider`

Section break with optional label.

```tsx
<Divider />
<Divider label="OR" />
```

## `ListItem`

Single row in a settings/profile list — icon + title + subtitle + trailing.

```tsx
<ListItem
  icon={<Bell />}
  title="Push notifications"
  subtitle="Get alerts on your phone"
  trailing={<Switch checked={pushEnabled} onCheckedChange={setPushEnabled} />}
/>
```

## `KeyboardStickyFooter`

Bottom-stuck footer that follows the keyboard up — keeps a Submit button visible while typing.

```tsx
<ScreenLayout>
  <H1>Sign in</H1>
  <FormField label="Email"><Input ... /></FormField>
  <FormField label="Password"><Input secureTextEntry ... /></FormField>
  <KeyboardStickyFooter>
    <Button onPress={handleSubmit}>Sign in</Button>
  </KeyboardStickyFooter>
</ScreenLayout>
```

## `StepPageLayout`

Multi-step onboarding/wizard layout — fixed header (with optional back), scrolling body, and
sticky footer with primary CTA. Pairs with `ProgressSteps`.

```tsx
<StepPageLayout
  step={step}
  totalSteps={totalSteps}
  onBack={goBack}
  primary={<Button onPress={goNext}>Continue</Button>}
>
  <H1>What's your goal?</H1>
  <Selectable ... />
</StepPageLayout>
```

## See also

- [Patterns — `MultiStep`](/docs/components/ui-native/patterns#multistep) — orchestrator wrapping `StepPageLayout`
- [Patterns — `ProgressSteps`](/docs/components/ui-native/patterns#progresssteps) — the dot/bar indicator at the top