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