ListItem

ListItems are used to display rows of information, such as a contact list, playlist, or menu. They are very customizable and can contain switches, avatars, badges, icons, and more.

Usage

Import

import { ListItem } from '@rneui/themed';

Theme Key

ListItem

Default

Loading...

<ListItem> <ListItem.Content> <ListItem.Title>John Doe</ListItem.Title> <ListItem.Subtitle>CEO, Example.com</ListItem.Subtitle> </ListItem.Content> </ListItem>

<ListItem>
  <ListItem.Content>
    <ListItem.Title>John Doe</ListItem.Title>
    <ListItem.Subtitle>CEO, Example.com</ListItem.Subtitle>
  </ListItem.Content>
</ListItem>

Icon

Loading...

Avatar

Loading...

LinearGradient

Loading...

Accordion

Use as a collapsible list item refer props for ListItem.Accordion

Loading...

Swipeable

Try swiping list item, refer props for ListItem.Swipeable

Loading...

Checkbox

Refer props for ListItem.CheckBox

Loading...

Props

note

Includes all View props.

Name	Type	Default	Description
Component	React Component		Replace element with custom element.
ViewComponent	React Component		Container for linear gradient.
bottomDivider	boolean		Add divider at the bottom of the list item.
children	any		Add enclosed children.
containerStyle	View Style		Additional main container styling.
disabledStyle	View Style		Specific styling to be used when list item is disabled.
linearGradientProps	any		Props for linear gradient component.
pad	number		Adds spacing between the leftComponent, the title component & right component.
topDivider	boolean		Add divider at the top of the list item.

Playground

Loading...