SettingsLayout

A layout shell that combines a TopNavBar with a scrollable content area. Use for settings screens, detail screens, and any screen that needs a nav bar + vertically scrolling content.

When to use: Settings screens, profile screens, detail/info screens, any screen navigated into from a deeper level.

When not to use: Auth screens — use AuthLayout. Screens with custom fixed headers or special navigation structures.

Import

import { SettingsLayout } from '@/components';

Usage

<SettingsLayout title="Settings" onBack={router.back}>
  <SettingsGroup title="Account" rows={accountRows} />
  <SettingsGroup title="Notifications" rows={notificationRows} />
</SettingsLayout>

Props

Prop	Type	Default	Description
title	string	—	Nav bar title (required)
onBack	() => void	—	Back action; renders back button when set
rightActions	Array<{ icon, onPress, accessibilityLabel }>	[]	Right nav bar actions (up to 2)
children	ReactNode	—	Scrollable content (required)
footer	ReactNode	—	Fixed bottom element (e.g. save button)
testID	string	—

Anatomy

┌──────────────────────────────────┐
│ [back]    [title]    [actions]   │  TopNavBar
├──────────────────────────────────┤
│                                  │
│         [children]               │  ScrollView
│      (SettingsGroups, etc.)      │
│                                  │
├──────────────────────────────────┤
│           [footer]               │  Fixed bottom (optional)
└──────────────────────────────────┘

Settings screen

export function AccountSettingsScreen() {
  const [push, setPush] = useState(true);

  return (
    <SettingsLayout title="Account" onBack={router.back}>
      <SettingsGroup
        title="Profile"
        rows={[
          { label: 'Display Name', rightAccessory: 'value', value: 'Sarah Chen', onPress: editName },
          { label: 'Email', rightAccessory: 'value', value: 'sarah@example.com', onPress: editEmail },
        ]}
      />
      <SettingsGroup
        title="Notifications"
        rows={[
          { label: 'Push alerts', rightAccessory: 'switch', checked: push, onToggle: setPush },
        ]}
      />
    </SettingsLayout>
  );
}

With footer action

<SettingsLayout
  title="Edit Profile"
  onBack={router.back}
  footer={
    <View style={{ padding: 16 }}>
      <Button variant="primary" onPress={saveProfile} isLoading={isSaving}>
        Save changes
      </Button>
    </View>
  }
>
  <FormField label="Display name" value={name} onChangeText={setName} />
  <FormField label="Bio" value={bio} onChangeText={setBio} />
</SettingsLayout>

With right actions

<SettingsLayout
  title="Notifications"
  onBack={router.back}
  rightActions={[
    { icon: CheckCircle, onPress: markAllRead, accessibilityLabel: 'Mark all as read' },
  ]}
>
  <ListSection items={notifications} />
</SettingsLayout>

Do / Don’t

Do: Place SettingsGroup and ListSection organisms directly in children — they handle their own spacing.

Don’t: Wrap children in unnecessary containers. The layout adds padding automatically.

Related

• TopNavBar — the nav bar used inside this layout
• SettingsGroup — primary content organism for settings screens
• AuthLayout — layout for auth flows