FlashList not optimizing virtualization when nested

[pfranklin-detechtion-com]

In react-native app, we are using an outer FlashList with a list of groups of items, displayed by List.Accordion (react-native-paper), and each group displays its list of items in another inner FlashList.

When the List.Accordion is expanded, the inner FlashList is not virtualizing the display of the items properly. It is immediately rendering and displaying the first batch of items, then calls renderItem() on all of the remaining items in the list all the way to the end. We have some groups with 1000's of items, so this takes 10+ seconds or more.

When using a FlashList not nested, just flat, the virtualization works smoothly. Logging the renderItem() function shows that it is just rendering each item as it scrolls closer to the viewable window. I created a snack that isolates this behavior: https://snack.expo.dev/LWIV8yrONzZw9Hshxm7f4

Is there some combination of properties on the FlashList or other components that can achieve the desired behavior here, so that the items are virtualized in a performant way?

Or is this just an inherent problem when nesting lists of variable length items? Is there a better way to approach this?

[ChronoByteCosmonaut]

Same issue 🥲

[Daydreamer-riri]

Same question. For now, I have to give up this part of virtualization. I'm guessing flashlist doesn't support this behavior at the moment?

[pfranklin-detechtion-com]

Yes, also abandoned trying to make this work. I ended up putting it all in a single flat FlashList and adding removing the items from that list as the List.Accordions are pressed. So the List.Accordions are just there for looks and I handle the clicks and add/remove items under them. This was more complex (obviously) because I had to manage that myself, but it ended up working well and was very performant even with 1000's of items.