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.

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

`SafeArea`

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

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

`Section`

Padded card-shaped section with optional title + trailing.

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

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

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

`ListItem`

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

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

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

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