How do I customize or add more fields to FlatList, ListItem apart from "title" and "subtitle"

Question

I am trying to render some data from an api using react FlatList, ListItem each doc has a number of fields but ListItems only give me an option for "title" and "subtitle" is there anyway to customize and add more fields?

I checked the documentation and other examples but all I see is "title" and "subtitle"

  render() {
    return (
      <ScrollView>
      <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem

                title={`${item.origin} - ${item.destination}`}
                subtitle={item.date}
                subtitle1={item.price}
                seats={{seats:item.status}}
              containerStyle={{ borderBottomWidth: 0 }}
            />
          )}
          keyExtractor={item => item._id}
          ItemSeparatorComponent={this.renderSeparator}

        />
      </List>
      </ScrollView>
    );
  }
}

I want to display more fields on the render than just "title" and "subtitle".

Answer 1

You may try using View within the render item. And you can apply styles to format your title text and etc.

render() {
    return (
      <ScrollView>
      <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <View>
                <Text>`${item.origin} - ${item.destination}`</Text>
                <Text>{ item.date }</Text>
                <Text>{ item.price }</Text>
            </View>
          )}
          keyExtractor={item => item._id}
          ItemSeparatorComponent={this.renderSeparator}

        />
      </List>
      </ScrollView>
    );
  }
}