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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With