Component
Section
A grouped section: a title above, a card below holding rows separated by full-width hairlines, and an optional footer note.
Standalone
Account
Full name
Jordan Lee
jordan@example.com
Shown on your profile.
section.tsx
<NativeSection title="Account" footer="Shown on your profile.">
<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 a light grouped background and uses white card with no border, just the background contrast. |