1 year ago

#215391

test-img

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:

  1. The list needs to contain about 5 thousand average product cards in two columns. The products are splitted into sections.
  2. It must be performant, really performant
  3. I need it to work well with onViewableItemsChanged method
  4. I need to be able to scroll it to the desired position as quick as possible
  5. 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:

  1. the onScroll method here does not work with Animated.event with the useNativeDriver prop set to true
  2. the onViewableItemsChanged stops working as soon as I reach the second section of the lists
  3. the scrollToLocation method does not support the viewOffset 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

Accepted video resources