As you can view it in the GIF, on scrolling the list swiftly, the scrolling stops at the end and on scrolling again, the next set of data loads. This continues until the list ends. This is only happening on Android. I can smoothly scroll through the list till the end on iOS without any abrupt scroll stops.
But on Android, there is an abrupt scroll stop and then on scrolling again, the next set of the list is loaded. Please note that I have also tested it on the actual device and the issue persists.
The user might feel that he/she has reached the end of the list and might not scroll further.
Below is the code that has been written to render FlatList:
<FlatList
data={ showtimeList }
renderItem={ this.renderShowtimesSection }
showsVerticalScrollIndicator={ false }
keyExtractor={ this.getListKey }
extraData={ this.props }
initialNumToRender={ 10 }
/>
showtimeList
holds a static array of objects. I am not making any API calls to load additional data on reaching the end.
Is there anything I can do to optimize the code for smooth scrolling without any scroll stops? Thanks in anticipation.