ListItem React Native Elements

Importing ListItem

ListItem is a Component from React Native Elements. To import, place this at the top of your screen file. import { ListItem } from 'react-native-elements';

Implementing ListItem using FlatList (No Checkboxes or Chevrons)

FlatList is an interface that renders simple, flat lists. ListItem's props can be seen here.

keyExtractor = (item, index) => index.toString();
renderItem = ({ item }) => (
  <ListItem
    title={item.yourtitle}
  />
)
  render() {
    return (
      <FlatList
      keyExtractor = {this.keyExtractor}
      data={your_data}
      renderItem={this.renderItem}
      />
    );
  }

Implementing ListItem using FlatList with Checkboxes and Chevron

To add a Checkbox in the ListItem, we have to implement the CheckBox Component. The full list of props are located here.

state = { checked: [], } // Need a state for checking the box

press = item => {   // The onPress method 
    const { checked } = this.state;
// These ensures that multiple checkboxes don't all get affected when one is clicked
    if (!checked.includes(item)) {
      this.setState({ checked: [...checked, item] });
  } else {
    this.setState({ checked: checked.filter(a => a !== item) });
  }
};

keyExtractor = (item, index) => index.toString();
renderItem = ({ item }) => (
  <ListItem
      checkBox= {{ // CheckBox Props
      checkedIcon: 'circle',
      uncheckedIcon: 'circle',
      checkedColor:'#B6BF00',
      uncheckedColor: '#B6BF80',
      onPress: () => this.press(item),
      checked: this.state.checked.includes(item),
    }}
    title={item.yourtitle}
    chevron={true}
  />
)
  render() {
    return (
      <FlatList
      keyExtractor = {this.keyExtractor}
      data={your_data}
      extraData={this.state} // FlatList will then re-render if the state is changed. 
      renderItem={this.renderItem}
      />
    );
  }