Skip to content

SettingsGroup

A titled group of SettingsRow items inside a rounded card container. Hairline dividers are rendered automatically between rows. The card clips overflow so the top and bottom rows get rounded corners from the container.

When to use: Whenever you have 2+ settings rows that belong to the same category. SettingsGroup is the standard pattern for settings screens.

When not to use: A single isolated settings row — use SettingsRow directly. Content lists (contacts, messages) — use ListSection.

Import

import { SettingsGroup } from '@/components';
import { Bell, Lock, Globe } from 'phosphor-react-native';

Usage

<SettingsGroup
  title="Notifications"
  rows={[
    {
      label: 'Push alerts',
      leftIcon: Bell,
      rightAccessory: 'switch',
      checked: push,
      onToggle: setPush,
    },
    {
      label: 'Email digest',
      leftIcon: Bell,
      rightAccessory: 'switch',
      checked: email,
      onToggle: setEmail,
    },
  ]}
/>

Props

Prop	Type	Default	Description
`title`	`string`	—	Section header (optional, rendered uppercase)
`rows`	`SettingsRowProps[]`	—	Row definitions (required)
`testID`	`string`	—

Each entry in rows accepts all SettingsRowProps — see SettingsRow for the full prop reference.

Full settings screen example

export function AccountScreen() {
  const [push, setPush] = useState(true);
  const [email, setEmail] = useState(false);

  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', leftIcon: Bell, rightAccessory: 'switch', checked: push, onToggle: setPush },
          { label: 'Email digest', leftIcon: Bell, rightAccessory: 'switch', checked: email, onToggle: setEmail },
        ]}
      />
      <SettingsGroup
        rows={[
          { label: 'Privacy Policy', rightAccessory: 'chevron', onPress: openPrivacy },
          { label: 'Terms of Service', rightAccessory: 'chevron', onPress: openTerms },
        ]}
      />
    </SettingsLayout>
  );
}

SettingsRow — individual row (full props reference)
ListSection — same structure for content lists
SettingsLayout — template for settings screens