ListItem

A generic pressable or static list row for content lists: contacts, messages, search results, recent items, menu options. Structurally: [leftIcon?] | label + description? | [rightElement?].

When to use: Content lists — anywhere you need a consistent row layout with optional icons and secondary text.

When not to use: Settings preference rows (switch/value/chevron with settings semantics) — use SettingsRow. Multiple rows with a section header — use ListSection.

Import

import { ListItem } from '@/components';
import { Envelope, User } from 'phosphor-react-native';

Usage

<ListItem
  label="Alice Johnson"
  description="alice@example.com"
  leftIcon={User}
  rightElement="chevron"
  onPress={openProfile}
/>

Props

Prop	Type	Default	Description
label	string	—	Primary text (required)
description	string	—	Secondary line below label
leftIcon	PhosphorIconComponent	—	Leading icon
rightElement	'chevron' | 'none'	'none'	Trailing element
onPress	() => void	—	Makes the row pressable
isDisabled	boolean	false	Prevents interaction
testID	string	—

Examples

// Simple label-only row
<ListItem label="Notifications" onPress={openNotifs} />

// With icon and description
<ListItem
  label="Inbox"
  description="4 unread messages"
  leftIcon={Envelope}
  rightElement="chevron"
  onPress={openInbox}
/>

// Static row (no press)
<ListItem label="Version 1.0.0" description="Up to date" />

Do / Don’t

Do: Use ListSection for 2+ rows — it adds the card container and dividers.

// ✓
<ListSection items={[...]} />

Don’t: Use ListItem for settings rows with switch accessories — use SettingsRow.

Related

• ListSection — groups multiple ListItem in a card
• SettingsRow — settings-specific row with switch/value/chevron