Best way to update a FlatList with Redux store

Question

I have a Redux store with a nested object : Part of the Redux store

I'm using the first element of the array as data of my FlatList because I don't want to display all the items in once.

But if I want to add the second element of the array and update the list. What would be the best solution?

Answer 1

Set your data value as a state prop and you can use onEndReachedThreshold to set the scroll distance from the bottom you want your onEndReached to be triggered. Then call your function to load more items onEndReached, then your FlatList will be updated.

It will looks something like this:

<FlatList
  data={this.state.listDataSource}
  renderItem={({ item, index }) => this.renderListItem(item, index)}
  keyExtractor={this._keyExtractor} // dont'forget to declare _keyExtractor
  onEndReachedThreshold={0.5} //when scroll reach half distance from bottom. Min value 0, max 1.
  onEndReached={() => this.loadMoreItems()} // this.setState({ listDataSource: newList }), for instance
/>

In the example above, every time the scroll reaches half the list, it will trigger the onEndReached function.

If you don't want to use your component state, you can also trigger an action (this.props.loadMoreItems()), update your reducer and use its value as data (this.props.listDataSource).

You can find more details in the official docs: https://facebook.github.io/react-native/docs/flatlist.html

Hope it helps.