"ScrollTo" position not precise when using with FlashList, while FlatList work as expected

[renochew]

Description

Scrolling a Flashlist using "ScrollTo" seems to have some kind of precision error, causing the final position drifting away from the target position, while the error is small, it cause problem when you need to align text or element that need perfect alignment. FlatList don't seems to suffer this problem.

Steps to reproduce

1. Open provided snack.
2. There are three lists, the left list is a reference list, middle one is a FlatList, the right one is a FlashList.
3. Continue click the button at the bottom for 30 times or more to either scroll the FlatList or FlashList for precisely 1 element height at a time.
4. While FlatList will continue match the reference list position, scrolling the FlashList cause drifting of position.

Snack or a link to a repository

https://snack.expo.dev/@renochew/flashlist?platform=android

Reanimated version

3.6.2

React Native version

0.73.1

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[exploIF]

Hi @renochew, I've taken a look on your repro and it looks like it's not Reanimated, FlatList or FlashList issues. This is related to how react native rendering system works. There is no guarantee that fixed sizes passed to the component would be exactly those values (you can read more about it here in caution section).

In your case FlashList is using always the same estimated element size (because of the good memoization) but FlatList is recalculating item size on each render, so sometimes it may be for example 70.90908, sometimes it will be 71.0101 etc. this is causing difference after couple rerenders. Also your elements have width and height of 71 which makes calculation and rounding even more complicated (as it's prime number).

What you can do to fix that is passing already rounded value as an element size, like below:

const ELEMENT_SIZE = 71;
const BLOCK_SIZE = PixelRatio.roundToNearestPixel(ELEMENT_SIZE);

And then use BLOCK_SIZE everywhere in the code like previously (inside scrollTo and obviously as an element width and height too).