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

List

GitHub

Changelog

npm

A SwiftUI List component for displaying scrollable lists of items.

iOS

tvOS

A list component for displaying scrollable lists with support for selection, editing, and reordering.

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 } from '@expo/ui/swift-ui';

<Host style={{ flex: 1 }}>
  <List
    scrollEnabled={false}
    editModeEnabled={editModeEnabled}
    onSelectionChange={(items) => alert(`indexes of selected items: ${items.join(', ')}`)}
    moveEnabled={moveEnabled}
    onMoveItem={(from, to) => alert(`moved item at index ${from} to index ${to}`)}
    onDeleteItem={(item) => alert(`deleted item at index: ${item}`)}
    listStyle='automatic'
    deleteEnabled={deleteEnabled}
    selectEnabled={selectEnabled}>
    {data.map((item, index) => (
      <LabelPrimitive key={index} title={item.text} systemImage={item.systemImage} color={color} />
    ))}
  </List>
</Host>

See Official SwiftUI documentation for more information.

API

Component

`List`

iOS

tvOS

Type: React.Element<ListProps>

A list component that renders its children using a native SwiftUI list.

ListProps

`children`

iOS

tvOS

Type: ReactNode

The children elements to be rendered inside the list.

`deleteEnabled`

iOS

tvOS

Optional • Type: boolean • Default: false

Allows the deletion of list items.

`editModeEnabled`

iOS

tvOS

Optional • Type: boolean • Default: false

Enables SwiftUI edit mode.

`listStyle`

iOS

tvOS

Optional • Type: ListStyle • Default: 'automatic'

One of the predefined ListStyle types in SwiftUI.

`moveEnabled`

iOS

tvOS

Optional • Type: boolean • Default: false

Enables reordering of list items.

`onDeleteItem`

iOS

tvOS

Optional • Type: (index: number) => void

Callback triggered when an item is deleted from the list.

`onMoveItem`

iOS

tvOS

Optional • Type: (from: number, to: number) => void

Callback triggered when an item is moved in the list.

`onSelectionChange`

iOS

tvOS

Optional • Type: (selection: number[]) => void

Callback triggered when the selection changes in a list.

`scrollEnabled`

iOS 16.0+

tvOS 16.0+

Optional • Type: boolean • Default: true

Makes the list scrollable.

`selectEnabled`

iOS

tvOS

Optional • Type: boolean • Default: false

Allows the selection of list items.

Inherited Props

CommonViewModifierProps

Types

`ListStyle`

iOS

tvOS

Literal Type: string