Menu Close

How do I fix VirtualizedLists should never be nested inside plain ScrollViews warning?

How do I fix VirtualizedLists should never be nested inside plain ScrollViews warning?

When developing with React Native and nesting FlatList or SectionList component inside a plain ScrollView your debugger might display the following warning: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation – use another VirtualizedList-backed container instead.

Can a virtualizedlist be nested in a ScrollView?

I have completed the home screen but I’m getting this warning when using ScrollView VirtualizedLists should never be nested inside plain ScrollViews with the same orientation – use another VirtualizedList-backed container instead.

How to fix’virtualizedlists should never be nested inside plain?

The fix to this warning is more straightforward than you think: get rid of the ScrollView, and places all the components that surround the FlatList inside ListFooterComponent and ListHeaderComponent. Let’s see how this works in practice.

Which is an example of a virtualized list?

Virtualized lists, that means <SectionList> and <FlatList> for example, are performance-optimized meaning they massively improve memory consumption and performance when using them to render large lists of content.

Is it OK to nest virtualizedlists in scrollviews?

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation – use another VirtualizedList-backed container instead. What is the other VirtualizedList-backed container that I should use, and why is it now advised not to use like that?

The fix to this warning is more straightforward than you think: get rid of the ScrollView, and places all the components that surround the FlatList inside ListFooterComponent and ListHeaderComponent. Let’s see how this works in practice.

Which is another virtualizedlist-backed container that I should use?

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation – use another VirtualizedList-backed container instead. What is the other VirtualizedList-backed container that i should use, and why is it now advised not to use like that?

Is it safe to use virtualizedlists in Google place?

I ma using react-native-google-places-autocomplete package for google place autocomplete text input. But here I am getting the warning after tapping on address every time. VirtualizedLists should never be nested inside plain ScrollViews with the same orientation – use another VirtualizedList-backed container instead.