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