React Native Lists: Load More by Scrolling
How to progressively load more list items as you scroll in React Native
This piece demonstrates how to load more items in a FlatList component as you scroll down, as well as how to persist lists on device storage, and keep those lists in sync as more items are loaded.
The demo accompanying this piece (available here on GitHub) demonstrates what we’ll achieve, with more items loading from an external data source as the list is being scrolled down. Not only this, the list is persisted on device and in state as more items are loaded.
The following screencast summarises the process. Note that when we start scrolling more results begin to load immediately. In addition, more results are continuously loaded if the end of the list has been reached. This is due to the onEndReachedThreshold prop of FlatList, that triggers an event to load more items if the scroll position is within this threshold. This behaviour can be seen here:
Notice when the list starts very small (5 items in the above example), the end of the list is on screen from the start. This triggers a load more event as soon as…
