Components · Mobile only · Containers
List Section
AlphaiOS & Android
Inset-grouped list with a header and footer, like iOS Settings.
Usage
@nexub/react-nativeWeb: SettingsSection
import { ListSection } from '@nexub/react-native';
<ListSection header="Account" footer="Used for receipts.">…</ListSection>Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
ListSection props
| Prop | Type | Default | Description |
|---|---|---|---|
| header | string | — | Section title above the group. |
| footer | string | — | Helper text below the group. |
| inset | number | 16 | Divider inset: 16 for text rows, 56 when rows have a leading icon. |
| childrenrequired | React.ReactNode | — | — |