New List View Modifiers
Overview of Properties
| Property |
Type |
Availability |
Description |
|
|
listSectionIndexVisibility |
Visibility |
iOS 26.0+ |
Controls the visibility of the List's right-side section index |
|
|
listSectionMargins |
number | EdgeSets | { edges: EdgeSets; length: number } |
iOS 26.0+ |
Customizes section margins, replacing SwiftUI’s automatic defaults |
|
|
sectionIndexLabel |
string |
iOS 26.0+ |
Sets the character displayed in the section index |
|
|
sectionActions |
VirtualNode |
iOS 18.0+ |
Adds custom actions to the section header area |
|
|
1. listSectionIndexVisibility
1/**
2 * Sets the visibility of the list section index.
3 * @available iOS 26.0+.
4 */
5listSectionIndexVisibility?: Visibility
Description
Controls whether the List shows the right-side section index (commonly used for A–Z navigation in contact lists).
Possible values:
"visible""hidden""automatic" (default system behavior)
Example
1<List listSectionIndexVisibility="visible">
2 <ForEach
3 data={groups}
4 builder={group => (
5 <Section
6 header={<Text>{group.title}</Text>}
7 sectionIndexLabel={group.title}
8 >
9 {group.items.map(item => <Text key={item}>{item}</Text>)}
10 </Section>
11 )}
12 />
13</List>
2. listSectionMargins
1/**
2 * Set the section margins for the specific edges.
3 * @available iOS 26.0+.
4 */
5listSectionMargins?: number | EdgeSets | {
6 edges: EdgeSets
7 length: number
8}
Description
Customizes the margins of a section. When set, it fully replaces SwiftUI’s default section margin rules.
Supported Formats
2.1 Single number
Applies the same margin to all edges.
2.2 EdgeSets
Applies the specified edges with the default margin.
1listSectionMargins={["horizontal", "top"]}
2.3 Specific edges with length
Applies a margin of length only to the specified edges.
1listSectionMargins={{
2 edges: "horizontal",
3 length: 20
4}}
Equivalent to SwiftUI:
1.listSectionMargins(.horizontal, 20)
Example
1<Section
2 header={<Text>Favorites</Text>}
3 listSectionMargins={{
4 edges: "horizontal",
5 length: 20
6 }}
7>
8 <Text>Item A</Text>
9 <Text>Item B</Text>
10</Section>
3. sectionIndexLabel
1/**
2 * Sets the label that is used in a section index.
3 * @available iOS 26.0+.
4 */
5sectionIndexLabel?: string
Description
Sets the character or text displayed in the right-side section index for this section. Typically a single letter.
Example
1<Section
2 header={<Text>A</Text>}
3 sectionIndexLabel="A"
4>
5 <Text>Adam</Text>
6 <Text>Ana</Text>
7</Section>
4. sectionActions
1/**
2 * Adds custom actions to a section.
3 * @available iOS 18.0+
4 */
5sectionActions?: VirtualNode
Description
Adds custom UI elements such as buttons or menus to the section header’s trailing (accessory) area.
Example: Refresh button
1<Section
2 header={<Text>Downloads</Text>}
3 sectionActions={
4 <Button title="Refresh" action={() => doRefresh()} />
5 }
6>
7 <Text>File 1</Text>
8 <Text>File 2</Text>
9</Section>
1<Section
2 header={<Text>Photos</Text>}
3 sectionActions={
4 <Menu title="Actions">
5 <Button title="Upload All" action={() => uploadAll()} />
6 <Button title="Delete All" action={() => deleteAll()} />
7 </Menu>
8 }
9>
10 {photos.map(photo => <Text key={photo.id}>{photo.name}</Text>)}
11</Section>
Full Example
1<List listSectionIndexVisibility="visible">
2 <ForEach
3 data={groups}
4 builder={group => (
5 <Section
6 header={<Text>{group.title}</Text>}
7 sectionIndexLabel={group.title}
8 listSectionMargins={12}
9 sectionActions={
10 <Button title="Refresh" action={() => refreshGroup(group)} />
11 }
12 >
13 {group.items.map(item => <Text key={item}>{item}</Text>)}
14 </Section>
15 )}
16 />
17</List>
