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

ListItem

A Jetpack Compose ListItem component for displaying structured list entries.

Android

GitHub

npm

Changelog

Expo UI ListItem matches the official Jetpack Compose ListItem API for structured list entries with headline, supporting, overline, leading, and trailing content slots.

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

Basic list item

BasicListItem.tsx

import { Host, ListItem, Text } from '@expo/ui/jetpack-compose';

export default function BasicListItem() {
  return (
    <Host matchContents>
      <ListItem>
        <ListItem.HeadlineContent>
          <Text>Settings</Text>
        </ListItem.HeadlineContent>
      </ListItem>
    </Host>
  );
}

With compound components

Use compound components for rich content in each position.

ListItemWithCompoundComponent.tsx

import { Host, ListItem, Icon, Text } from '@expo/ui/jetpack-compose';

export default function ListItemWithSlots() {
  return (
    <Host matchContents>
      <ListItem>
        <ListItem.HeadlineContent>
          <Text>Notifications</Text>
        </ListItem.HeadlineContent>
        <ListItem.OverlineContent>
          <Text>ACCOUNT</Text>
        </ListItem.OverlineContent>
        <ListItem.SupportingContent>
          <Text>Manage notification preferences</Text>
        </ListItem.SupportingContent>
        <ListItem.LeadingContent>
          <Icon source={require('./assets/notifications.xml')} />
        </ListItem.LeadingContent>
        <ListItem.TrailingContent>
          <Icon source={require('./assets/chevron.xml')} />
        </ListItem.TrailingContent>
      </ListItem>
    </Host>
  );
}

Clickable list item

Use the clickable modifier to handle tap interactions.

ClickableListItem.tsx

import { Host, ListItem, Text } from '@expo/ui/jetpack-compose';
import { clickable } from '@expo/ui/jetpack-compose/modifiers';

export default function ClickableListItem() {
  return (
    <Host matchContents>
      <ListItem modifiers={[clickable(() => console.log('Tapped!'))]}>
        <ListItem.HeadlineContent>
          <Text>Tap me</Text>
        </ListItem.HeadlineContent>
      </ListItem>
    </Host>
  );
}

Custom headline content

Use ListItem.HeadlineContent for composable headline content like rows with icons.

ListItemCustomHeadline.tsx

import { Host, ListItem, Text, Row, Icon } from '@expo/ui/jetpack-compose';

export default function ListItemCustomHeadline() {
  return (
    <Host matchContents>
      <ListItem>
        <ListItem.HeadlineContent>
          <Row horizontalArrangement={{ spacedBy: 8 }} verticalAlignment="center">
            <Text>Premium Feature</Text>
            <Icon source={require('./assets/star.xml')} size={16} />
          </Row>
        </ListItem.HeadlineContent>
      </ListItem>
    </Host>
  );
}

API

import { ListItem } from '@expo/ui/jetpack-compose';

Component

`ListItem`

Android

Type: React.Element<ListItemProps>

A list item matching Compose's ListItem.

ListItemProps

`children`

Android

Optional • Type: React.ReactNode

Children containing slot sub-components.

`colors`

Android

Optional • Type: ListItemColors

Colors for list item elements.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`shadowElevation`

Android

Optional • Type: number • Default: ListItemDefaults.Elevation

Shadow elevation in dp.

`tonalElevation`

Android

Optional • Type: number • Default: ListItemDefaults.Elevation

Tonal elevation in dp.

Types

`ListItemColors`

Android

Colors for list item elements, matching ListItemDefaults.colors().

Property	Type	Description
containerColor(optional)	`ColorValue`	-
contentColor(optional)	`ColorValue`	-
leadingContentColor(optional)	`ColorValue`	-
overlineContentColor(optional)	`ColorValue`	-
supportingContentColor(optional)	`ColorValue`	-
trailingContentColor(optional)	`ColorValue`	-