How to re-render flatlist?

Question

Unlike ListView we can update this.state.datasource. Is there any method or example to update FlatList or re-render it?

My goal is to update the text value when user press button ...

renderEntries({ item, index }) {     return(         <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})>              <Text>{this.state.data[index].value}</Text>         </TouchableHighlight>     ) }  <FlatList      ref={(ref) => { this.list = ref; }}      keyExtractor={(item) => item.entry.entryId}      data={this.state.data}      renderItem={this.renderEntries.bind(this)}      horizontal={false} /> 

Answer 1

Use the extraData property on your FlatList component.

As the documentation states:

By passing extraData={this.state} to FlatList we make sure FlatList will re-render itself when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

Answer 2

For quick and simple solution Try:

1. set extra data to a boolean value.

   extraData={this.state.refresh}

2. Toggle the value of boolean state when you want to re-render/refresh list

   this.setState({      refresh: !this.state.refresh })