Component
Section
A grouped table-view section: a title above, a card below holding rows with inset dividers between them, and an optional footer note.
The primitive
Account
Full name
Jordan Lee
jordan@example.com
Used for statements and receipts.
section.tsx
<NativeSection title="Account" footer="Used for statements and receipts.">
<NativeRow label="Full name" right="Jordan Lee" />
<NativeRow label="Email" right="jordan@example.com" />
</NativeSection>Example
Two sections stacked, the shape any settings or account-detail screen takes once it has more than one group of rows.
Account
Full name
Jordan Lee
jordan@example.com
Preferences
Notifications
On
Notifications can be changed at any time.
section-example.tsx
<NativeSection title="Account">
<NativeRow label="Full name" right="Jordan Lee" />
<NativeRow label="Email" right="jordan@example.com" />
</NativeSection>
<NativeSection title="Preferences" footer="Notifications can be changed at any time.">
<NativeRow label="Notifications" right="On" />
</NativeSection>Capabilities
| Prop | Type | Description |
|---|---|---|
| title | string | — |
| footer | string | — |
| className | string | — |
| childrenrequired | React.ReactNode | — |
| standalone | boolean | When true, draws a plain card on any background. When false (default), assumes it lives on the iOS grouped gray (#F2F2F7) canvas — uses white card with no border, just the background contrast. |