Stutter when scrolling

[akeva001]

When I scroll through the items in the FlashList, I notice slight stutters. Any help is appreciated. I am rendering posts which contain an image along with a header and footer for each

Platform:

• iOS

[akeva001]

It seems to be happening because each item within the FlashList contains an image. But not sure how to solve the issue.

[andrespch]

Hey @akeva001, can you please provide an example project that demonstrates this issue? we would then try to look into this soon.

[arthurgeron-work]

@akeva001 Can you ensure you're using the best values for estimatedListSize and estimatedItemSize?

[RalissonMattias]

I experienced this issue when using items with varying sizes

[efstathiosntonas]

do you by any chance use expo-image? I was using my own caching image implementation and when I gave expo-image a go then I've noticed those stutters too, mostly on Android devices.

[rahul-mahato11]

any update on this one?
I am also facing similar issue.

I see cards moving from top to bottom.

[VictorioMolina]

efstathiosntonas I also use expo-image. With normal images and the estimatedSizes recommended by the FlashList everything is OK, but the strange behaviour comes with expo-image's cachePolicy. Just change to cachePolicy="none" where you get the buggy behaviour.

[efstathiosntonas]

@VictorioMolina I rely on cache so setting it to none serves no purpose on my case 🤷‍♂️

[farhanhaider1]

any updates on this? i am still facing this issue

[akeva001]

I was able to fix the stuttering by decreasing the resolution of the images in my FlashList!

[ghost]

FYI: we ran into this at Shortwave. We're pretty sure it's happening because FlashList does not maintain scroll position when items above the render window change size. So this is what happens:

• you scroll up, render window shifts
• item above renders
• item above changes size for some reason (async load some content, for example)
• your scroll offset (measured from the top), stays the same but visually, it'll look like you've been jumped up.

This is a problem for views with images since, usually, they're height 0 until loaded. This was also a problem for us since we load HTML for threads, which are also size 0 until loaded. We got around it by creating a native module "AnchoredScrollView" that will keep your scroll position anchored even if items above your render window change size. Unfortunately, that means we couldn't use FlashList (we could've forked but there were other problems we ran into). I did publish a gist here. Hopefully, this fix will be adopted by FlashList as well.

[ChronoByteCosmonaut]

Yeah still appearing indeed when the cachePolicy option is other than “none” if using expo image. Pretty annoying!

[LagoonProject]

Same here. It defeats most of the purpose of using expo-image.

[pepew-le-boss]

Still the case. I have to dump expo-image or flash-list, not ideal

[irisjae]

If you’re encountering this problem due to render window shifts, I’ve published an analysis of the problem and a patch here; feel free to test it out.

See if my linked patch works well for you, and if it does, it would be great if you added support for my PR to get thoughts and attention of the maintainers.

[chrisbianca]

@irisjae I attempted to use your patch, and found that it did fix the stuttering performance when scrolling up. However, I found that if I scrolled very quickly to the top, then the whole view would jump when I reached the top of the view.

[irisjae]

@chrisbianca What OS did you try it on? Could you post a video? You may get better results by tuning the props in the patch.

[qwezey]

i was facing the same issue with expo-image. fixed it by using react-native-fast-image

[cf913]

i managed to solve the stuttering with expo-image by setting allowDownscaling to false. It's true by default.

my project displays user avatars in a long Flashlist and I resize the images at upload time already. So there's no need to downscale thumbnail sized images, and the performance improvement is quite noticeable.

From the expo image docs about the allowDownscaling prop:
Whether the image should be downscaled to match the size of the view container. Turning off this functionality could negatively impact the application's performance, particularly when working with large assets. However, it would result in smoother image resizing, and end-users would always have access to the highest possible asset quality.