scrollToIndex is not precise with large list

[renchap]

First of all, thanks a lot for this library!

I am using it to display (fairly large) photo albums and it solved a lot of issues I had with <SectionList>, and even simplified the code!

I am hitting an issue with large albums (multiple hundred of rows in an album) and scrollToIndex, where the scroll misses the wanted index (sometimes it scrolls only half of the needed offset). If I issue the scroll again a few times it ends up being correct. It happens mostly with { animated: true }, but with very large albums I start to see the scroll being off by a few dozen pixels. A few users are even reporting crashes on low-specced devices (with animated: true).

If you want to get a better idea of what an album is, you can see a sample album here on the web (non RN-based) version, and the app uses a similar layout.
The items are of multiple types: chapter header, chapter footer, row of elements. They are very heavy with media and do not all have the same height (this can vary a lot between header/footers and rows of media).

I see 2 possible issues here:

• the items height can vary a lot, making estimatedItemSize not very relevant (I set it to 50, which is the smaller item height, ie the headers/footers). An optimisation here could be to accept a function like (itemType: string) => number so the algorithm can more accurately estimate height?
• the items are very heavy to display and the device CPU is not able to keep up with the rendering of all the elements, and this makes the calculated offset wrong. I am not sure how to handle this. On the web version, I use a visible props on item rows and only display the medias in the row if visible === true (otherwise there are a placeholder), maybe it could help here? But I am not sure how to properly set the visible props with <FlashList>. Should I use RenderTarget !== "Measurement" for this?

What do you think? Thanks a lot for your opinions 😄

[naqvitalha]

Have you looked into the overrideItemLayout prop? You can use it to provide estimates for each item individually. You can also change column spans of items which might simplify your code even further.

[renchap]

I totally missed this prop, I will give it a try!

I dont render each content into its own item, each FlashList item is a Row, which I pre-calculate before rendering depending on the screen size and content.
I also just realized (thanks to reading the Discord channel 😄) that I have several useState state in my item component tree, so I probably need to look at this as well.