Version: Bleeding Edge 🚧

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.

Import

import { ListItem } from '@rn-vui/themed';

Theme Key

ListItem

Usage

Default

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

Icon

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

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

<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

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

{
  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>
    </>
  );
}

Using Map Function - Implemented with avatar

import { ListItem, Avatar } from '@rn-vui/themed'

const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  },
  ... // more items
]

<View>
  {
    list.map((l, i) => (
      <ListItem key={i} bottomDivider>
        <Avatar source={{uri: l.avatar_url}} />
        <ListItem.Content>
          <ListItem.Title>{l.name}</ListItem.Title>
          <ListItem.Subtitle>{l.subtitle}</ListItem.Subtitle>
        </ListItem.Content>
      </ListItem>
    ))
  }
</View>

Using Map Function - Implemented with link and icon

import { ListItem, Icon } from '@rn-vui/themed'

const list = [
  {
    title: 'Appointments',
    icon: 'av-timer'
  },
  {
    title: 'Trips',
    icon: 'flight-takeoff'
  },
  ... // more items
]

<View>
  {
    list.map((item, i) => (
      <ListItem key={i} bottomDivider>
        <Icon name={item.icon} />
        <ListItem.Content>
          <ListItem.Title>{item.title}</ListItem.Title>
        </ListItem.Content>
        <ListItem.Chevron />
      </ListItem>
    ))
  }
</View>

Using RN FlatList - Implemented with link and avatar

import { ListItem, Avatar } from '@rn-vui/themed'

const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  },
  ... // more items
]

keyExtractor = (item, index) => index.toString()

renderItem = ({ item }) => (
  <ListItem bottomDivider>
    <Avatar source={{uri: item.avatar_url}} />
    <ListItem.Content>
      <ListItem.Title>{item.name}</ListItem.Title>
      <ListItem.Subtitle>{item.subtitle}</ListItem.Subtitle>
    </ListItem.Content>
    <ListItem.Chevron />
  </ListItem>
)

render () {
  return (
    <FlatList
      keyExtractor={this.keyExtractor}
      data={list}
      renderItem={this.renderItem}
    />
  )
}

Using RN FlatList - Implemented with custom avatar component.

import { ListItem, Avatar } from '@rn-vui/themed'

const list = [
  {
    name: 'Amy Farha',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  },
  ... // more items
]

keyExtractor = (item, index) => index.toString()

renderItem = ({ item }) => (
  <ListItem bottomDivider >
    <Avatar title={item.name[0]} source={item.avatar_url && { uri: item.avatar_url }}/>
    <ListItem.Content>
      <ListItem.Title>{item.name}</ListItem.Title>
      <ListItem.Subtitle>{item.subtitle}</ListItem.Subtitle>
    </ListItem.Content>
    <ListItem.Chevron />
  </ListItem>
)

render () {
  return (
    <FlatList
      keyExtractor={this.keyExtractor}
      data={list}
      renderItem={this.renderItem}
    />
  )
}

ListItem implemented with custom View for Subtitle

import { ListItem, Avatar } from '@rn-vui/themed'

render () {
  return (
    <ListItem>
      <ListItem.Content>
        <ListItem.Title>Limited supply! Its like digital gold!</ListItem.Title>
        <View style={styles.subtitleView}>
          <Image source={require('../images/rating.png')} style={styles.ratingImage}/>
          <Text style={styles.ratingText}>5 months ago</Text>
        </View>
      </ListItem.Content>
    </ListItem>
  )
}

styles = StyleSheet.create({
  subtitleView: {
    flexDirection: 'row',
    paddingLeft: 10,
    paddingTop: 5
  },
  ratingImage: {
    height: 19.21,
    width: 100
  },
  ratingText: {
    paddingLeft: 10,
    color: 'grey'
  }
})

Badges

Example badge usage

<ListItem>
  <Badge
    value={3}
    textStyle={{ color: 'orange' }}
    containerStyle={{ marginTop: -20 }}
  />
</ListItem>

Linear gradient + Scale feedback

import { ListItem, Avatar } from '@rn-vui/themed';
import TouchableScale from 'react-native-touchable-scale'; // https://github.com/kohver/react-native-touchable-scale
import LinearGradient from 'react-native-linear-gradient'; // Only if no expo

<ListItem
  Component={TouchableScale}
  friction={90} //
  tension={100} // These props are passed to the parent component (here TouchableScale)
  activeScale={0.95} //
  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: avatar_url }} />
  <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>;

Props

note

Includes all View props.

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

Import

Theme Key

Usage​

Default​

Icon​

Avatar​

LinearGradient​

Accordion​

Swipeable​

Checkbox​

Using Map Function - Implemented with avatar​

Using Map Function - Implemented with link and icon​

Using RN FlatList - Implemented with link and avatar​

Using RN FlatList - Implemented with custom avatar component.​

ListItem implemented with custom View for Subtitle​

Badges​

Linear gradient + Scale feedback​

Props​

Playground​