Items overlap in FlashList v2

[cletter7]

Current behavior

Trying to migrate to v2 (2.0.0-rc.12) and having issues with items being overlapped (for some items only). I am working on the Bible app and items (chapters) are sometimes very different in size.

For example, in the book of Psalms there are 150 psalms in total and there are psalms with just a few verses, but there are also psalms with 170+ verses. When trying to scroll to some items (i.e. user tries to navigate to a specific psalm) I see some items being rendered on top of each other. This happens quite consistently and is a major problem.

In v1 I was using size estimates and didn't have such problem.

Expected behavior

Items are rendered one after another without overlap.

To Reproduce

The code is not public at the moment and I don't have an example app to reproduce the issue. I can try creating one if that proves to be necessary, but I hope someone knows what might be the issue.

Platform:

• iOS
• Android

Environment

@shopify/flash-list: 2.0.0-rc.12
react-native: 0.80.1

[naqvitalha]

Are you using any library to rendering text or is it Text from RN? I'd appreciate if you can provide some kind of repro for this.

[maxoschepkov]

Having the same issue.
Also noticed that the content of the list leaves artifacts when switching between tabs/screens (background of the content stays under different screen, or even it overlaps with a content). My content contains text from rn components, video components, images inside lists.

[cletter7]

@naqvitalha I am using react-native-styled-text for rendering text. I will try with normal text and let you know, but can this be a root cause?

[cletter7]

I replaced styled text with a Text from RN and the problem is still there. I will try to create a reproducible example in the following days.

[YasserDbeis2]

Bump!

[YasserDbeis2]

@naqvitalha can you please priortiize this? It basically makes this unusable :(

[cletter7]

@naqvitalha
I am trying to create a reproducible lightweight app, but so far I haven't succeeded. In my lightweight newly created app everything seems to be working fine, but in the original one it does not. It seems that the issue has something to do with initialScrollIndex, when I remove this parameter the overlapping disappears, but I can't reproduce in the the lean app. In the real app I have so many things like react navigation, custom fonts, more complex layout, etc., so the issue might be a combination of things.
Maybe what I describe will help to debug the issue on your side?

[naqvitalha]

Without a repro it's difficult to figure this out as it doesn't happen in the Shopify App and we have A LOT of lists. I'll give it a shot anyway.

[NikulVnnovate57]

Same issue.

[axelmy318]

Same issue here.

[axelmy318]

In my app I display a calendar. Each item is a specific date with a list of events.
So each item can have a varying size. It works great in most cases but when initially loading, a lot of events are overlapping each other.
I also have an initialScrollIndex set.

[Exilz]

Exact same issue here. I'm rendering a calendar and using initialScrollIndex causes this issue. I only reproduce this on Android.

[Exilz]

In the meantime, I found a decent workaround so I don't have to use the initialScrollIndex prop.
Once my list has mounted, I manually call scrollToIndex with { animated: false }. In itself, that seems to fix it.

Just to be safer, I await this promise returned by scrollToIndex and once it's resolved I animate the container that holds my list and make it fade in nicely. That also hides the choppy scrolling animation that seems to trigger the bug on my end. This is far from ideal but that prevents those weird overlapping issues.