1 year 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
onViewableItemsChanged
method - 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
onScroll
method here does not work withAnimated.event
with theuseNativeDriver
prop set totrue
- the
onViewableItemsChanged
stops working as soon as I reach the second section of the lists - the
scrollToLocation
method does not support theviewOffset
prop.
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