React-native-draggable-flatlist: getItemLayout performance optimization

Created on 22 Mar 2021 · 6Comments · Source: computerjazz/react-native-draggable-flatlist

This library is the only one that actually just works! Huge thanks @computerjazz

But when list become large (even dozens of items on slow Android device) scrolling become unresponsive, compared to just barebone Flatlist.

I checked source code and noticed that you use measureLayout method for each cell. Flatlist actually have a great solution to speed up cell measuring called getItemLayout.
So why not use getItemLayout prop when it specified to speed up measure process?
It has length (height) and offset values, probably those values must be enough?

I tested locally and it works great! No more Excessive number of pending callbacks: measureLayout and scrolling now fluid.
I only not sure how to properly (in performant manner) get ancestor offset, so I used hardcoded value instead.

Will be great if you have any time to check this! Thanks in advance

Source

exentrich

👍2

Most helpful comment

Absolutely. This library should work for both use-cases (dynamic and fixed sizes).
Cells with fixed height are common on mobile. Probably you meet them way often than dynamic. So for my opinion this change will benefit many end users.
Also getItemLayout is already known property by React Native developers, so no further explanation is needed about how to use it

exentrich on 23 Mar 2021

👍3

All 6 comments

getItemLayout only works if you know each item's height ahead of time and won't work for dynamic content.
Agree we could leverage it for cases where this is known ahead of time but wouldn't work for everyone.