SettingsScreen

SettingsScreen is a ready-to-use multi-section settings screen. It demonstrates how to compose SettingsLayout with multiple SettingsGroup organisms, wiring toggle rows to local state.

What it does

• Renders SettingsLayout with a title and back handler
• Contains four SettingsGroup sections: Account, Notifications, Privacy, Danger Zone
• Switch rows are wired to useState
• Chevron rows log navigation targets (wire to your router)
• Destructive “Delete Account” button at the bottom

Location

src/screens/SettingsScreen.tsx

Usage

Copy SettingsScreen into your project and replace the console.log navigation handlers with your router calls.

import { SettingsScreen } from '@/screens/SettingsScreen';

export default function Settings() {
  return (
    <SettingsScreen onBack={() => navigation.goBack()} />
  );
}

Props

Prop	Type	Description
onBack	() => void	Called when the back button is pressed

Sections

Group	Rows
Account	Profile (chevron), Change Password (chevron)
Notifications	Push alerts (switch), Email digest (switch)
Privacy	Share analytics (switch)
Danger Zone	Delete Account (destructive button)

Layers used

SettingsScreen → SettingsLayout (template) → SettingsGroup × 4 (organism) → SettingsRow (molecule) → Switch / Text (atoms)

Related

• SettingsLayout — the layout shell
• SettingsGroup — the row-grouping organism
• SettingsRow — individual preference rows
• LoginScreen — the other reference screen