ListItem
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}
/>
))
}
</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 }}
/>
))
}
</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
renderItem = ({ item }) => (
<ListItem
title={item.name}
subtitle={item.subtitle}
leftAvatar={{ source: { uri: item.avatar_url } }}
/>
)
render () {
return (
<FlatList
keyExtractor={this.keyExtractor}
data={this.state.dataSource}
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
renderItem = ({ item }) => (
<ListItem
title={item.name}
subtitle={item.subtitle}
leftAvatar={{
source: item.avatar_url && { uri: item.avatar_url },
title: item.name[0]
}}
/>
)
render () {
return (
<FlatList
keyExtractor={this.keyExtractor}
data={this.state.dataSource}
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
Example badge usage
<ListItem
...
badge={{ value: 3, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }}
/>
Linear gradient + Scale feedback
import LinearGradient from 'react-native-linear-gradient' // Only if no expo
<ListItem
scaleProps={{
friction: 90,
tension: 100,
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"
chevronColor="white"
chevron
/>
Props
component
containerStyle
contentContainerStyle
rightContentContainerStyle
chevron
chevronColor
checkmark
checkmarkColor
onPress
onLongPress
title
titleStyle
titleProps
subtitle
subtitleStyle
subtitleProps
rightTitle
rightTitleStyle
rightTitleProps
rightSubtitle
rightSubtitleStyle
rightSubtitleProps
leftIcon
rightIcon
leftAvatar
rightAvatar
leftElement
rightElement
switch
input
buttonGroup
checkBox
badge
disabled
disabledStyle
topDivider
bottomDivider
scaleProps
ViewComponent
Reference
component
replace element with custom element (optional)
Type | Default |
---|---|
View or TouchableOpacity if onPress method is added as prop | component |
containerStyle
additional main container styling (optional)
Type | Default |
---|---|
object (style) | none |
contentContainerStyle
additional wrapper styling (title and subtitle container)
Type | Default |
---|---|
object (style) | none |
rightContentContainerStyle
additional wrapper styling (right title and subtitle container)
Type | Default |
---|---|
object (style) | none |
chevron
set it to true if you want a chevron (optional)
Type | Default |
---|---|
boolean | false |
chevronColor
set chevron color
Type | Default |
---|---|
string | #d1d1d6 |
checkmark
set it to true if you want a checkmark (optional)
Type | Default |
---|---|
boolean | false |
checkmarkColor
set checkmark color
Type | Default |
---|---|
string | #2089dc |
onPress
onPress method for link (optional)
Type | Default |
---|---|
function | none |
onLongPress
onLongPress method for link (optional)
Type | Default |
---|---|
function | none |
title
Main title of list item
Type | Default |
---|---|
string OR React element | none |
titleStyle
Add additional styling
Type | Default |
---|---|
Text style | none |
titleProps
provide all props from react-native Text component
Type | Default |
---|---|
{...Text props} | none |
subtitle
subtitle text or custom view (optional)
Type | Default |
---|---|
string OR React element | none |
subtitleStyle
Add additional styling
Type | Default |
---|---|
Text style | none |
subtitleProps
provide all props from react-native Text component
Type | Default |
---|---|
{...Text props} | none |
rightTitle
Show up a title on the right side of the list item
Type | Default |
---|---|
string OR React element | none |
rightTitleStyle
add additional styling
Type | Default |
---|---|
Text style | none |
rightTitleProps
provide all props from react-native Text component
Type | Default |
---|---|
{...Text props} | none |
rightSubtitle
Show up a subtitle on the right side of the list item
Type | Default |
---|---|
string OR React element | none |
rightSubtitleStyle
Add additional styling
Type | Default |
---|---|
Text style | none |
rightSubtitleProps
provide all props from react-native Text component
Type | Default |
---|---|
{...Text props} | none |
leftIcon
displays an icon on the left (optional)
Type | Default |
---|---|
{...Icon props} OR component | none |
rightIcon
displays an icon on the right (optional)
Type | Default |
---|---|
{...Icon props} OR component | none |
leftAvatar
displays an Avatar on the left (optional)
Type | Default |
---|---|
{...Avatar props} OR component | none |
rightAvatar
displays an Avatar on the right (optional)
Type | Default |
---|---|
View style (object){...Avatar props} OR component | none |
leftElement
Add any element on the left side of the list item
Type | Default |
---|---|
React element | none |
rightElement
Add any element on the right side of the list item
Type | Default |
---|---|
React element | none |
switch
add a switch to the right side. (object with the props of the react-native Switch
component)
Type | Default |
---|---|
{...Switch props} | none |
input
add an Input on the right side (object with the props of the React Native Elements Input
component)
Type | Default |
---|---|
{...Input props} | none |
buttonGroup
add a button group on the right side (object with the props of the React Native Elements ButtonGroup
component)
Type | Default |
---|---|
{...ButtonGroup props} | none |
checkBox
add a checkbox on the right side (object with the props of the React Native Elements CheckBox
component)
Type | Default |
---|---|
{...CheckBox props} | none |
badge
add a badge on the right side (object with the props of the React Native Elements Badge
component)
Type | Default |
---|---|
{...Badge props} | none |
disabled
If true the user won't be able to perform any action on the list item.
Type | Default |
---|---|
boolean | none |
disabledStyle
Specific styling to be used when list item is disabled.
Type | Default |
---|---|
object (style) | none |
topDivider
Add divider at the top of the list item
Type | Default |
---|---|
boolean | false |
bottomDivider
Add divider at the bottom of the list item
Type | Default |
---|---|
boolean | false |
scaleProps
Provide all props for scale feedback
Type | Default |
---|---|
{...Scale props} | none |
ViewComponent
Container for linear gradient (for non-expo user)
Type | Default |
---|---|
component | View |