- In this story, I would like to share how ListView can be used to optimize image processing when scrolling through images.Consider a list of entries like an Instagram feed.
- Finally, when the entry goes outside the viewport, and if the image hasn’t been cached yet, we would like to cancel the request to the image URI in order to prioritize requests for the visible entries.In the example below, we fetch entries from a firebase backend by pages of ten.
- When we reach the end of the list, we fetch a new page by using the onEndReached event.Now we can use onChangeVisibleRows() to only mount images when they are visible.
- In onChangeVisibleRows(), we update the visible property for each row that becomes visible or invisible.In the Row component, we can use the visible property to mount/unmount the image according to its visibility.
- We use the react-native-img-cache package for this.In the last step, we cancel the HTTP request to download the image if the row becomes invisible.