Skip to main content
Version: 1.2.0

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.

Lists

Usage#

Using Map Function - Implemented with avatar#

import { ListItem } from 'react-native-elements'
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}        leftAvatar={{ source: { uri: l.avatar_url } }}        title={l.name}        subtitle={l.subtitle}        bottomDivider      />    ))  }</View>

Using Map Function - Implemented with link and icon#

import { ListItem } from 'react-native-elements'
const list = [  {    title: 'Appointments',    icon: 'av-timer'  },  {    title: 'Trips',    icon: 'flight-takeoff'  },  ... // more items]
<View>  {    list.map((item, i) => (      <ListItem        key={i}        title={item.title}        leftIcon={{ name: item.icon }}        bottomDivider        chevron      />    ))  }</View>

Using RN FlatList - Implemented with link and avatar#

import { ListItem } from 'react-native-elements'
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    title={item.name}    subtitle={item.subtitle}    leftAvatar={{ source: { uri: item.avatar_url } }}    bottomDivider    chevron  />)
render () {  return (    <FlatList      keyExtractor={this.keyExtractor}      data={list}      renderItem={this.renderItem}    />  )}

Using RN FlatList - Implemented with custom avatar component.#

import { ListItem } from 'react-native-elements'
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    title={item.name}    subtitle={item.subtitle}    leftAvatar={{      source: item.avatar_url && { uri: item.avatar_url },      title: item.name[0]    }}    bottomDivider    chevron  />)
render () {  return (    <FlatList      keyExtractor={this.keyExtractor}      data={list}      renderItem={this.renderItem}    />  )}

ListItem implemented with custom View for Subtitle#

import { ListItem } from 'react-native-elements'
render () {  return (    <ListItem      title='Limited supply! Its like digital gold!'      subtitle={        <View style={styles.subtitleView}>          <Image source={require('../images/rating.png')} style={styles.ratingImage}/>          <Text style={styles.ratingText}>5 months ago</Text>        </View>      }      leftAvatar={{ source: require('../images/avatar1.jpg') }}    />  )}
styles = StyleSheet.create({  subtitleView: {    flexDirection: 'row',    paddingLeft: 10,    paddingTop: 5  },  ratingImage: {    height: 19.21,    width: 100  },  ratingText: {    paddingLeft: 10,    color: 'grey'  }})

Badges#

Badges

Example badge usage

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

Linear gradient + Scale feedback#

import TouchableScale from 'react-native-touchable-scale'; // https://github.com/kohver/react-native-touchable-scaleimport 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: [1, 0],    end: [0.2, 0],  }}  ViewComponent={LinearGradient} // Only if no expo  leftAvatar={{ rounded: true, source: { uri: avatar_url } }}  title="Chris Jackson"  titleStyle={{ color: 'white', fontWeight: 'bold' }}  subtitleStyle={{ color: 'white' }}  subtitle="Vice Chairman"  chevron={{ color: 'white' }}/>;

Props#

Also receives all TouchableHighlight props

Reference#

Component#

replace element with custom element (optional)

TypeDefault
View or TouchableHighlight (default) if onPress method is added as propcomponent

containerStyle#

additional main container styling (optional)

TypeDefault
object (style)none

contentContainerStyle#

additional wrapper styling (title and subtitle container)

TypeDefault
object (style)none

rightContentContainerStyle#

additional wrapper styling (right title and subtitle container)

TypeDefault
object (style)none

chevron#

set it to true or custom icon props if you want a chevron (optional)

TypeDefault
boolean OR {...Icon props} OR React element or componentnone

checkmark#

set it to true or custom icon props if you want a checkmark (optional)

TypeDefault
boolean OR {...Icon props} OR React element or componentnone

onPress#

onPress method for link (optional)

TypeDefault
functionnone

onLongPress#

onLongPress method for link (optional)

TypeDefault
functionnone

title#

Main title of list item

TypeDefault
string OR React elementnone

titleStyle#

Add additional styling

TypeDefault
Text stylenone

titleProps#

provide all props from react-native Text component

TypeDefault
{...Text props}none

subtitle#

subtitle text or custom view (optional)

TypeDefault
string OR React elementnone

subtitleStyle#

Add additional styling

TypeDefault
Text stylenone

subtitleProps#

provide all props from react-native Text component

TypeDefault
{...Text props}none

rightTitle#

Show up a title on the right side of the list item

TypeDefault
string OR React elementnone

rightTitleStyle#

add additional styling

TypeDefault
Text stylenone

rightTitleProps#

provide all props from react-native Text component

TypeDefault
{...Text props}none

rightSubtitle#

Show up a subtitle on the right side of the list item

TypeDefault
string OR React elementnone

rightSubtitleStyle#

Add additional styling

TypeDefault
Text stylenone

rightSubtitleProps#

provide all props from react-native Text component

TypeDefault
{...Text props}none

leftIcon#

displays an icon on the left (optional)

TypeDefault
{...Icon props}
OR
component		none

rightIcon#

displays an icon on the right (optional)

TypeDefault
{...Icon props}
OR
component		none

leftAvatar#

displays an Avatar on the left (optional)

TypeDefault
{...Avatar props}
OR
component		none

rightAvatar#

displays an Avatar on the right (optional)

TypeDefault
View style (object){...Avatar props}
OR
component		none

leftElement#

Add any element on the left side of the list item

TypeDefault
React elementnone

rightElement#

Add any element on the right side of the list item

TypeDefault
React elementnone

switch#

add a switch to the right side. (object with the props of the react-native Switch component)

TypeDefault
{...Switch props}none

input#

add an Input on the right side (object with the props of the React Native Elements Input component)

TypeDefault
{...Input props}none

buttonGroup#

add a button group on the right side (object with the props of the React Native Elements ButtonGroup component)

TypeDefault
{...ButtonGroup props}none

checkBox#

add a checkbox on the right side (object with the props of the React Native Elements CheckBox component)

TypeDefault
{...CheckBox props}none

badge#

add a badge on the right side (object with the props of the React Native Elements Badge component)

TypeDefault
{...Badge props}none

disabled#

If true the user won't be able to perform any action on the list item.

TypeDefault
booleannone

disabledStyle#

Specific styling to be used when list item is disabled.

TypeDefault
object (style)none

topDivider#

Add divider at the top of the list item

TypeDefault
booleanfalse

bottomDivider#

Add divider at the bottom of the list item

TypeDefault
booleanfalse

ViewComponent#

Container for linear gradient (for non-expo user)

TypeDefault
componentView

pad#

adds spacing between the leftComponent, the title component & right component

TypeDefault
number16