---
id: listitem
title: ListItem
---

import { IconsStyle } from '@site/src/components/Docs_Icons';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
import { BiInfoCircle } from 'react-icons/bi';
import Usage from '../component_usage/ListItem.mdx';
import Play from '@site/playground/ListItem/listitem.playground';

<IconsStyle />

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

<div class="row inline-flex-center">
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { ListItem } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{' '}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`ListItem`}</CodeBlock>
  </div>
</div>

### Default

```tsx live showCode=true
<ListItem>
  <ListItem.Content>
    <ListItem.Title>John Doe</ListItem.Title>
    <ListItem.Subtitle>CEO, Example.com</ListItem.Subtitle>
  </ListItem.Content>
</ListItem>
```

### Icon

```tsx live
<>
  <ListItem>
    <Icon name="inbox" type="material-community" color="grey" />
    <ListItem.Content>
      <ListItem.Title>Inbox</ListItem.Title>
    </ListItem.Content>
    <ListItem.Chevron />
  </ListItem>
  <ListItem>
    <Icon name="trash-can-outline" type="material-community" color="grey" />
    <ListItem.Content>
      <ListItem.Title>Trash</ListItem.Title>
    </ListItem.Content>
    <ListItem.Chevron />
  </ListItem>
</>
```

### Avatar

```tsx live
<>
  <ListItem bottomDivider>
    <Avatar
      rounded
      source={{ uri: 'https://randomuser.me/api/portraits/men/36.jpg' }}
    />
    <ListItem.Content>
      <ListItem.Title>John Doe</ListItem.Title>
      <ListItem.Subtitle>President</ListItem.Subtitle>
    </ListItem.Content>
  </ListItem>
  <ListItem bottomDivider>
    <Avatar
      rounded
      icon={{
        name: 'person-outline',
        type: 'material',
        size: 26,
      }}
      containerStyle={{ backgroundColor: '#c2c2c2' }}
    />
    <ListItem.Content>
      <ListItem.Title>Alba King</ListItem.Title>
      <ListItem.Subtitle>Vice President</ListItem.Subtitle>
    </ListItem.Content>
  </ListItem>
  <ListItem>
    <Avatar rounded title="A" containerStyle={{ backgroundColor: 'grey' }} />
    <ListItem.Content>
      <ListItem.Title>Adam Eva</ListItem.Title>
      <ListItem.Subtitle>Vice Chairman</ListItem.Subtitle>
    </ListItem.Content>
  </ListItem>
</>
```

### LinearGradient

```tsx live
<ListItem
  linearGradientProps={{
    colors: ['#FF9800', '#F44336'],
    start: { x: 1, y: 0 },
    end: { x: 0.2, y: 0 },
  }}
  ViewComponent={LinearGradient} // Only if no expo
>
  <Avatar
    rounded
    source={{ uri: 'https://randomuser.me/api/portraits/men/33.jpg' }}
  />
  <ListItem.Content>
    <ListItem.Title style={{ color: 'white', fontWeight: 'bold' }}>
      Chris Jackson
    </ListItem.Title>
    <ListItem.Subtitle style={{ color: 'white' }}>
      Vice Chairman
    </ListItem.Subtitle>
  </ListItem.Content>
  <ListItem.Chevron color="white" />
</ListItem>
```

### Accordion

Use as a collapsible list item refer props for [ListItem.Accordion](./listItem_accordion#props)

```tsx live
function RNEListItemAccordion() {
  const [expanded, setExpanded] = React.useState(false);
  return (
    <>
      <ListItem.Accordion
        content={
          <ListItem.Content>
            <ListItem.Title>Top Users</ListItem.Title>
            <ListItem.Subtitle>Tap to expand</ListItem.Subtitle>
          </ListItem.Content>
        }
        isExpanded={expanded}
        onPress={() => {
          setExpanded(!expanded);
        }}
      >
        <ListItem>
          <Avatar
            rounded
            source={{
              uri: 'https://randomuser.me/api/portraits/men/32.jpg',
            }}
          />
          <ListItem.Content>
            <ListItem.Title>John Doe</ListItem.Title>
            <ListItem.Subtitle>Principle Engineer</ListItem.Subtitle>
          </ListItem.Content>
        </ListItem>
        <ListItem>
          <Avatar
            rounded
            source={{
              uri: 'https://randomuser.me/api/portraits/men/36.jpg',
            }}
          />
          <ListItem.Content>
            <ListItem.Title>Albert</ListItem.Title>
            <ListItem.Subtitle>Staff Engineer</ListItem.Subtitle>
          </ListItem.Content>
        </ListItem>
      </ListItem.Accordion>
    </>
  );
}
```

### Swipeable

Try swiping list item, refer props for [ListItem.Swipeable](./listItem_swipeable#props)

```tsx live
<ListItem.Swipeable
  leftWidth={80}
  rightWidth={90}
  minSlideWidth={40}
  leftContent={(action) => (
    <Button
      containerStyle={{
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#f4f4f4',
      }}
      type="clear"
      icon={{
        name: 'archive-outline',
        type: 'material-community',
      }}
      onPress={action}
    />
  )}
  rightContent={(action) => (
    <Button
      containerStyle={{
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#f4f4f4',
      }}
      type="clear"
      icon={{ name: 'delete-outline' }}
      onPress={action}
    />
  )}
>
  <Icon name="label-important-outline" type="material" />
  <ListItem.Content>
    <ListItem.Title>Email from John Doe</ListItem.Title>
    <ListItem.Subtitle>Hey, I'm John Doe</ListItem.Subtitle>
  </ListItem.Content>
  <ListItem.Chevron />
</ListItem.Swipeable>
```

### Checkbox

Refer props for [ListItem.CheckBox](./listItem_checkbox#props)

```tsx live
function () {
     const [checked, setChecked] = React.useState([false, false]);
     return (
       <>
         <ListItem bottomDivider>
           <ListItem.CheckBox
             // Use ThemeProvider to change the defaults of the checkbox
             iconType="material-community"
             checkedIcon="checkbox-marked"
             uncheckedIcon="checkbox-blank-outline"
             checked={checked[0]}
             onPress={() => setChecked([!checked[0], checked[1]])}
           />
           <ListItem.Content>
             <ListItem.Title>User 1</ListItem.Title>
             <ListItem.Subtitle>CA, US</ListItem.Subtitle>
           </ListItem.Content>
           <ListItem.Chevron />
         </ListItem>
         <ListItem bottomDivider>
           <ListItem.CheckBox
             // Use ThemeProvider to change the defaults of the checkbox
             iconType="material-community"
             checkedIcon="checkbox-marked"
             uncheckedIcon="checkbox-blank-outline"
             checked={checked[1]}
             onPress={() => setChecked([checked[0], !checked[1]])}
           />
           <ListItem.Content>
             <ListItem.Title>User 2</ListItem.Title>
             <ListItem.Subtitle>HR, India</ListItem.Subtitle>
           </ListItem.Content>
           <ListItem.Chevron />
         </ListItem>
       </>
     );
   }
```

<Usage />

## Props

:::note
Includes all [View](https://reactnative.dev/docs/view#props) props.
:::

<div class='table-responsive'>

| 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.                                       |

</div>

## Playground

<Play />
