getting error 'VirtualizedLists should never be nested inside plain ScrollViews'

Expo SDK
1

My app has multiple Flatlists in a screen with different scrollable types (2 horizontal, 1 vertical). The page needs to scroll vertically so I’m wrapping all the three Flatlists inside a ScrollView and trying to render that. However, this throws out a scary looking warning:

VirtualizedLists should never be nested inside plain ScrollViews

I tried searching online on different ways to get rid of this warning, but so far haven’t been able to make a breakthrough. Additionally, even though this is just a warning, I’m observing huge performance lag on the page when scrolling. Would appreciate any leads on alternatives and how to improve performance in this case. Thanks!

2

Hey @ashish-garg, ScrollView is usually preferred with a static list of content, so that might be the reason that you are experiencing the lag. Instead of nesting FlatList inside a ScrollView, as an alternative, you could use ListHeaderComponent and ListFooterComponent props on FlatList to render other components. I’d also suggest looking at the SectionList from React Native.

1 Like
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.