Components for managing lists. Includes `List` and `ListItem`.

##
Usage

###
Using Map Function. Implemented with avatar.

    import { List, 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
    ]

    <List containerStyle={{marginBottom: 20}}>
      {
        list.map((l) => (
          <ListItem
            roundAvatar
            avatar={{uri:l.avatar_url}}
            key={l.name}
            title={l.name}
          />
        ))
      }
    </List>

###
Using FlatList. Implemented with link and avatar.

    import { List, 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
    ]

    renderRow ({ item }) {
      return (
        <ListItem
          roundAvatar
          title={item.name}
          subtitle={item.subtitle}
          avatar={{uri:item.avatar_url}}
        />
      )
    }

    render () {
      return (
        <List>
          <FlatList
            data={list}
            renderItem={this.renderRow}
            keyExtractor={item => item.name}
          />
        </List>
      )
    }

##
List

Container for list items

> Also receives all View props

- `containerStyle`

###
`containerStyle` (List)

style the list container

Type | Default
--- | ---
object (style) | marginTop: 20, borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: #cbd2d9

##
ListItem

- `avatar`
- `avatarContainerStyle`
- `avatarOverlayContainerStyle`
- `avatarStyle`
- `chevronColor`
- `component`
- `containerStyle`
- `disabled`
- `disabledStyle`
- `fontFamily`
- `hideChevron`
- `label`
- `leftIcon`
- `leftIconOnLongPress`
- `leftIconOnPress`
- `leftIconUnderlayColor`
- `onLongPress`
- `onPress`
- `onPressRightIcon`
- `onSwitch`
- `rightIcon`
- `rightTitle`
- `rightTitleContainerStyle`
- `rightTitleNumberOfLines`
- `rightTitleStyle`
- `roundAvatar`
- `subtitle`
- `subtitleContainerStyle`
- `subtitleNumberOfLines`
- `subtitleStyle`
- `switchButton`
- `switchDisabled`
- `switched`
- `switchOnTintColor`
- `switchThumbTintColor`
- `switchTintColor`
- `textInput`
- `textInputAutoCapitalize`
- `textInputAutoCorrect`
- `textInputAutoFocus`
- `textInputContainerStyle`
- `textInputEditable`
- `textInputKeyboardType`
- `textInputMaxLength`
- `textInputMultiline`
- `textInputOnBlur`
- `textInputOnChangeText`
- `textInputOnFocus`
- `textInputPlaceholder`
- `textInputReturnKeyType`
- `textInputSecure`
- `textInputSelectTextOnFocus`
- `textInputStyle`
- `textInputValue`
- `title`
- `titleContainerStyle`
- `titleNumberOfLines`
- `titleStyle`
- `underlayColor`
- `wrapperStyle`

###
`avatar`

left avatar (optional). This is the React Native Image `source` prop. Avatar can be used in parallel to leftIcon if needed.

Type | Default
--- | ---
object (source) | none

###
`avatarContainerStyle`

Avatar outer container styling (optional)

Type | Default
--- | ---
object (style) | none

###
`avatarOverlayContainerStyle`

Avatar overlay container styling (optional)

Type | Default
--- | ---
object (style) | none

###
`avatarStyle`

avatar styling (optional). This is the React Native Image `style` prop

Type | Default
--- | ---
object (style) | none

###
`chevronColor`

set chevron color

Type | Default
--- | ---
string | #bdc6cf

###
`component`

replace element with custom element (optional)

Type | Default
--- | ---
React Native element | View or TouchableHighlight if onPress method is added as prop

###
`containerStyle` (ListItem)

additional main container styling (optional)

Type | Default
--- | ---
object (style) | none

###
`disabled`

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

Type | Default
--- | ---
boolean |

###
`disabledStyle`

Specific styling to be used when list item is disabled.

Type | Default
--- | ---
object (style) | none

###
`fontFamily`

specify different font family

Type | Default
--- | ---
string | HelveticaNeue (iOS), Sans Serif (android)

###
`hideChevron`

set if you do not want a chevron (optional)

Type | Default
--- | ---
boolean | false

###
`label`

add a label with your own styling by providing a label={} prop to ListItem

Type | Default
--- | ---
react native component | none

###
`leftIcon`

icon configuration for left icon (optional), either a name from the icon library (like material) or a React Native element like `Image`. leftIcon can be used in parallel to avatar if needed.

Type | Default
--- | ---
object {name, color, style, type} (type defaults to material icons) OR React Native element | none

###
`leftIconOnLongPress`

Attaches an onLongPress on left Icon

Type | Default
--- | ---
none | function

###
`leftIconOnPress`

Attaches an onPress on left Icon

Type | Default
--- | ---
none | function

###
`leftIconUnderlayColor`

Underlay color for left Icon

Type | Default
--- | ---
white | string

###
`onLongPress`

onLongPress method for link (optional)

Type | Default
--- | ---
function | none

###
`onPress`

onPress method for link (optional)

Type | Default
--- | ---
function | none

###
`onPressRightIcon`

Attaches an onPress on right Icon

Type | Default
--- | ---
none | function

###
`onSwitch`

add a callback function when the switch is toggled

Type | Default
--- | ---
function | none

###
`rightIcon`

icon configuration for right icon (optional), either a name from the icon library (like material) or a React Native element like `Image`. Shows up unless hideChevron is set

Type | Default
--- | ---
object {name, color, style, type} (type defaults to material icons) OR React Native element | {name: 'chevron-right'}

###
`rightTitle`

provide a rightTitle to have a title show up on the right side of the button

Type | Default
--- | ---
string | none

###
`rightTitleContainerStyle`

style the outer container of the rightTitle text

Type | Default
--- | ---
object (style) | flex: 1, alignItems: 'flex-end', justifyContent: 'center'

###
`rightTitleNumberOfLines`

Number of lines for Right Title

Type | Default
--- | ---
number | 1

###
`rightTitleStyle`

style the text of the rightTitle text

Type | Default
--- | ---
object (style) | marginRight: 5, color: '#bdc6cf'

###
`roundAvatar`

make left avatar round

Type | Default
--- | ---
boolean | false

###
`subtitle`

subtitle text or custom view (optional)

Type | Default
--- | ---
string, number or object | none

###
`subtitleContainerStyle`

provide styling for subtitle container

Type | Default
--- | ---
object (style) | none

###
`subtitleNumberOfLines`

Number of lines for Subtitle

Type | Default
--- | ---
1 | number

###
`subtitleStyle`

additional subtitle styling (optional )

Type | Default
--- | ---
object (style) | none

###
`switchButton`

add a switch to the right side of your component (Note: in order to display the switchButton you need to add the `hideChevron` prop as well. Snack demo here: https://snack.expo.io/SJPQNScUZ)

Type | Default
--- | ---
boolean | false

###
`switchDisabled`

If true the user won't be able to toggle the switch. Default value is false.

Type | Default
--- | ---
boolean |

###
`switched`

The value of the switch. If true the switch will be turned on. Default value is false.

Type | Default
--- | ---
boolean |

###
`switchOnTintColor`

Background color when the switch is turned on.

Type | Default
--- | ---
string |

###
`switchThumbTintColor`

Color of the foreground switch grip.

Type | Default
--- | ---
string |

###
`switchTintColor`

Border color on iOS and background color on Android when the switch is turned off.

Type | Default
--- | ---
string |

###
`textInput`

Whether to have the right title area be an input text component.

Type | Default
--- | ---
PropTypes.bool |

###
`textInputAutoCapitalize`

Can be one of the following: 'none', 'sentences', 'words', 'characters'.

Type | Default
--- | ---
string |

###
`textInputAutoCorrect`

Can tell TextInput to automatically capitalize certain characters.

Type | Default
--- | ---
boolean |

###
`textInputAutoFocus`

If true, focuses the input on componentDidMount. The default value is false.

Type | Default
--- | ---
boolean |

###
`textInputContainerStyle`

Style for the container surrounding the input text

Type | Default
--- | ---
object (style) |

###
`textInputEditable`

If false, text is not editable. The default value is true.

Type | Default
--- | ---
boolean |

###
`textInputKeyboardType`

Can be one of the following: 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search'

Type | Default
--- | ---
string |

###
`textInputMaxLength`

Limits the maximum number of characters that can be entered.

Type | Default
--- | ---
number |

###
`textInputMultiline`

If true, the text input can be multiple lines. The default value is false.

Type | Default
--- | ---
boolean |

###
`textInputOnBlur`

Callback that is called when the text input is blurred.

Type | Default
--- | ---
function |

###
`textInputOnChangeText`

Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

Type | Default
--- | ---
function |

###
`textInputOnFocus`

Callback that is called when the text input is focused.

Type | Default
--- | ---
function |

###
`textInputPlaceholder`

Placeholder for the text input

Type | Default
--- | ---
string |

###
`textInputReturnKeyType`

Determines how the return key should look. For more info see the React Native docs

Type | Default
--- | ---
string |

###
`textInputSecure`

If true, obscures the text entered so that sensitive text like passwords stay secure.

Type | Default
--- | ---
boolean |

###
`textInputSelectTextOnFocus`

If true, all text will automatically be selected on focus.

Type | Default
--- | ---
boolean |

###
`textInputStyle`

Style for the input text

Type | Default
--- | ---
object (style) |

###
`textInputValue`

Manually set value of the input

Type | Default
--- | ---
string |

###
`title`

main title for list item, can be text or custom view (required)

Type | Default
--- | ---
string, number or object | none

###
`titleContainerStyle`

provide styling for title container

Type | Default
--- | ---
object (style) | none

###
`titleNumberOfLines`

Number of lines for Title

Type | Default
--- | ---
number | 1

###
`titleStyle`

additional title styling (optional)

Type | Default
--- | ---
object (style) | none

###
`underlayColor`

define underlay color for TouchableHighlight (optional)

Type | Default
--- | ---
string | white

###
`wrapperStyle`

additional wrapper styling (optional)

Type | Default
--- | ---
object (style) | none

##
Badges

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

    <ListItem
      ...
      badge={{ element: <MyCustomElement> }}
    />

###
Badge Props

- `badge`

###
`badge`

add a badge to the ListItem by using this prop

Type | Default
--- | ---
object, accepts the following properties: value (string), containerStyle (object), textStyle (object). You can override the default badge by providing your own component with it's own styling by providing badge={{ element: }} | none

← Icon Pricing →