@deboxsoft/react-native-elements

--- id: listitem title: ListItem --- ListItems are used to display rows of information, such as a contact list, playlist, or menu. They are very customizeable and can contain switches, avatars, badges, icons, and more. ![Lists](/react-native-elements/img/lists.png) #### Using Map Function. Implemented with avatar. ```js 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. ```js 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. ```js 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. ```js 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 ```js 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](/react-native-elements/img/list-badges.jpeg) Example badge usage ```js <ListItem ... badge={{ value: 3, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }} /> ``` #### Linear gradient + Scale feedback <img src="/react-native-elements/img/listitem_with_gradient_scale.gif" width="500" > ```js 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" chevronColor="white" chevron /> ``` --- ### Props * [`Component`](#Component) * [`containerStyle`](#containerstyle) * [`contentContainerStyle`](#contentcontainerstyle) * [`rightContentContainerStyle`](#rightcontentcontainerstyle) * [`chevron`](#chevron) * [`checkmark`](#checkmark) * [`onPress`](#onpress) * [`onLongPress`](#onlongpress) * [`title`](#title) * [`titleStyle`](#titlestyle) * [`titleProps`](#titleprops) * [`subtitle`](#subtitle) * [`subtitleStyle`](#subtitlestyle) * [`subtitleProps`](#subtitleprops) * [`rightTitle`](#righttitle) * [`rightTitleStyle`](#righttitlestyle) * [`rightTitleProps`](#righttitleprops) * [`rightSubtitle`](#rightsubtitle) * [`rightSubtitleStyle`](#rightsubtitlestyle) * [`rightSubtitleProps`](#rightsubtitleprops) * [`leftIcon`](#lefticon) * [`rightIcon`](#righticon) * [`leftAvatar`](#leftavatar) * [`rightAvatar`](#rightavatar) * [`leftElement`](#leftelement) * [`rightElement`](#rightelement) * [`switch`](#switch) * [`input`](#input) * [`buttonGroup`](#buttongroup) * [`checkBox`](#checkbox) * [`badge`](#badge) * [`disabled`](#disabled) * [`disabledStyle`](#disabledstyle) * [`topDivider`](#topdivider) * [`bottomDivider`](#bottomdivider) * [`scaleProps`](#scaleprops) * [`ViewComponent`](#viewcomponent) * [`pad`](#pad) --- # Reference ### `Component` replace element with custom element (optional) | Type | Default | | :---------------------------------------------------------------------: | :-------: | | View or TouchableHighlight (default) 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 or custom icon props if you want a chevron (optional) | Type | Default | | :------------------------------------------------------------------------------------------------------------------: | :-----: | | boolean **OR** {[...Icon props](/react-native-elements/docs/icon.html#icon-props)} **OR** React element or component | none | --- ### `checkmark` set it to true or custom icon props if you want a checkmark (optional) | Type | Default | | :------------------------------------------------------------------------------------------------------------------: | :-----: | | boolean **OR** {[...Icon props](/react-native-elements/docs/icon.html#icon-props)} **OR** React element or component | none | --- ### `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](https://facebook.github.io/react-native/docs/text.html#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](https://facebook.github.io/react-native/docs/text.html#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](https://facebook.github.io/react-native/docs/text.html#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](https://facebook.github.io/react-native/docs/text.html#props)} | none | --- ### `leftIcon` displays an icon on the left (optional) | Type | Default | | :-------------------------------------------------------------------------------------------: | :-----: | | {[...Icon props](/react-native-elements/docs/icon.html#icon-props)} **OR** component | none | --- ### `rightIcon` displays an icon on the right (optional) | Type | Default | | :-------------------------------------------------------------------------------------------: | :-----: | | {[...Icon props](/react-native-elements/docs/icon.html#icon-props)} **OR** component | none | --- ### `leftAvatar` displays an Avatar on the left (optional) | Type | Default | | :-------------------------------------------------------------------------------------------------: | :-----: | | {[...Avatar props](/react-native-elements/docs/avatar.html#avatar-props)} **OR** component | none | --- ### `rightAvatar` displays an Avatar on the right (optional) | Type | Default | | :--------------------------------------------------------------------------------------------------------------------: | :-----: | | View style (object){[...Avatar props](/react-native-elements/docs/avatar.html#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](https://facebook.github.io/react-native/docs/switch.html#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](/react-native-elements/docs/input.html#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](/react-native-elements/docs/button_group.html#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](/react-native-elements/docs/checkbox.html#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](/react-native-elements/docs/badge.html#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 | --- ### `ViewComponent` Container for linear gradient (for non-expo user) | Type | Default | | :-------: | :-----: | | component | View | --- ### `pad` adds spacing between the leftComponent, the title component & right component | Type | Default | | :----: | :-----: | | number | `16` |