ListSection

A titled group of ListItem rows inside a rounded card container with automatic hairline dividers. Mirrors SettingsGroup’s structure but uses content-list semantics (ListItem) rather than settings semantics (SettingsRow).

When to use: Content lists — recent items, contacts, search results, menu options — grouped under a section header.

When not to use: Settings preference rows — use SettingsGroup. Flat lists without a card container — render ListItem components directly.

Import

import { ListSection } from '@/components';
import { FileText, Star } from 'phosphor-react-native';

Usage

<ListSection
  title="Recent"
  items={[
    {
      label: 'Invoice #1042',
      description: 'Sent 2 days ago',
      leftIcon: FileText,
      rightElement: 'chevron',
      onPress: () => openInvoice('1042'),
    },
    {
      label: 'Invoice #1041',
      description: 'Sent 5 days ago',
      leftIcon: FileText,
      rightElement: 'chevron',
      onPress: () => openInvoice('1041'),
    },
  ]}
/>

Props

Prop	Type	Default	Description
title	string	—	Section header (optional)
items	ListItemProps[]	—	Row definitions (required)
testID	string	—

Each entry in items accepts all ListItemProps — see ListItem for the full prop reference.

With SearchBar

const [query, setQuery] = useState('');
const filtered = contacts.filter(c =>
  c.name.toLowerCase().includes(query.toLowerCase())
);

<SearchBar value={query} onChangeText={setQuery} onClear={() => setQuery('')} />
<ListSection
  title={`${filtered.length} contacts`}
  items={filtered.map(c => ({
    label: c.name,
    description: c.email,
    leftIcon: User,
    rightElement: 'chevron',
    onPress: () => openContact(c.id),
  }))}
/>

Related

• ListItem — individual row (full props reference)
• SettingsGroup — same structure for settings rows
• SearchBar — pairs naturally for filtered content