2 years ago
#215391
Max P. Urban
What is the best way to implement a scrollable list of several thousands items in React Native?
To be short, my requirements are:
- The list needs to contain about 5 thousand average product cards in two columns. The products are splitted into sections.
- It must be performant, really performant
- I need it to work well with
onViewableItemsChangedmethod - I need to be able to scroll it to the desired position as quick as possible
- It must be able to be Animated with the native driver (e.g. to animate header according to the scroll position)
I've tried to use SectionList for my purpose, but it did not achieve the desired performance despite many tweaks of the virtualization parameters. The problem was that the responsiveness of the app gradually got worse as I scroll down. It was because of the amount of items above the viewport. Yes, SectionList do detach the items outside the viewport, but it replaces it with the getItemLayout function, which floods the thread and hangs the app for about 3-4 seconds before it starts responding.
Another way I tried was to use react-native-big-list. This thing works really well with lists like mine, like really fast, exactly how I need it to work. But sadly it is not perfect and has some unsolved issues:
- the
onScrollmethod here does not work withAnimated.eventwith theuseNativeDriverprop set totrue - the
onViewableItemsChangedstops working as soon as I reach the second section of the lists - the
scrollToLocationmethod does not support theviewOffsetprop.
All the issues above are known but still not resolved, and I am not as good to somehow patch them (in fact I tried)
I do hope that someone have the same problem solved. Sorry for my mediocre English, but hopefully I expressed my thoughts good enough to be understandable
react-native
performance
react-native-flatlist
react-native-sectionlist
0 Answers
Your Answer