Reference version

This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

A SwiftUI Section component for grouping related content in lists.

iOS
tvOS

A section component for grouping related content within lists, providing headers, footers, and collapsible functionality.

Installation

Terminal
npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

import { Host, List, Section, Switch, Text } from '@expo/ui/swift-ui'; function SectionExample() { return ( <Host style={{ flex: 1 }}> <List> <Section header={<Text>Custom Header</Text>} footer={<Text color="gray">These settings control app behavior</Text>}> <Switch label="Enable notifications" value={true} /> <Switch label="Dark mode" value={false} /> </Section> </List> </Host> ); }

See Official SwiftUI documentation for more information.

API

Component

Section

iOS
tvOS

Type: React.Element<SectionProps>

Section component uses the native Section component. It has no intrinsic dimensions, so it needs explicit height or flex set to display content (like ScrollView).

SectionProps

children

iOS
tvOS
Type: React.ReactNode

collapsible

iOS
tvOS
Optional • Type: boolean • Default: false

Enables or disables collapsible behavior for the section.

Note: Available only when the list style is set to sidebar.

footer

iOS
tvOS
Optional • Type: React.ReactNode

Sets a custom footer for the section.

header

iOS
tvOS
Optional • Type: React.ReactNode

Sets a custom header for the section.

title

iOS
tvOS
Optional • Type: string

On iOS, section titles are usually capitalized for consistency with platform conventions.