You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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?
The text was updated successfully, but these errors were encountered:
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?
The text was updated successfully, but these errors were encountered: