SettingsRow

A single settings preference row. Three right-accessory modes cover the full settings vocabulary: switch (toggle a preference), chevron (navigate to a subscreen), value (show current value and navigate to edit it). A badge mode is also available for notification counts.

When to use: Any settings list row. For 2+ rows, wrap in SettingsGroup — it handles the card container, hairline dividers, and rounded corners.

When not to use: Content list rows (contacts, messages, search results) — use ListItem. Inline preference controls inside a form card — use ToggleRow.

Import

import { SettingsRow } from '@/components';
import { Bell } from 'phosphor-react-native';

Usage

// Switch row
<SettingsRow
  label="Push notifications"
  description="Alerts sent to your device"
  leftIcon={Bell}
  rightAccessory="switch"
  checked={notifications}
  onToggle={setNotifications}
/>

// Navigation row with current value
<SettingsRow
  label="Language"
  rightAccessory="value"
  value="English"
  onPress={openLanguage}
/>

// Navigation row (chevron only)
<SettingsRow
  label="Privacy Policy"
  rightAccessory="chevron"
  onPress={openPrivacy}
/>

Props

Prop	Type	Default	Description
label	string	—	Primary label (required)
description	string	—	Secondary line below label
leftIcon	PhosphorIconComponent	—	Leading icon
labelSize	TextSize	'md'	Label font size
rightAccessory	'switch' | 'chevron' | 'value' | 'badge'	—	Right-side element
checked	boolean	—	Switch state (switch mode)
onToggle	(checked: boolean) => void	—	Switch handler (switch mode)
value	string	—	Current value text (value mode)
onPress	() => void	—	Row press handler (chevron/value/badge modes)
badgeLabel	string	—	Badge text (badge mode)
badgeTone	BadgeVariant	—	Badge color (badge mode)
isDisabled	boolean	false	Prevents interaction
testID	string	—

Accessory modes in detail

// switch — the Switch itself is the interactive element; tapping the row toggles it
<SettingsRow label="Dark mode" rightAccessory="switch" checked={dark} onToggle={setDark} />

// chevron — whole row is pressable; navigates to a detail screen
<SettingsRow label="Privacy Policy" rightAccessory="chevron" onPress={openPrivacy} />

// value — shows current selection; whole row pressable to change it
<SettingsRow label="Currency" rightAccessory="value" value="USD" onPress={openCurrency} />

// badge — notification count or status badge on the right
<SettingsRow label="Updates" rightAccessory="badge" badgeLabel="3" badgeTone="error" onPress={openUpdates} />

Do / Don’t

Do: Use SettingsGroup for 2+ rows — it handles the container and dividers.

// ✓
<SettingsGroup rows={[row1, row2, row3]} />

// ✗ Manual dividers and container
<View>
  <SettingsRow {...row1} />
  <View style={dividerStyle} />
  <SettingsRow {...row2} />
</View>

Don’t: Use SettingsRow for content rows (contacts, messages). Use ListItem.

Related

• SettingsGroup — groups multiple SettingsRow in a card
• ToggleRow — simpler labeled switch for inline contexts
• ListItem — content list row