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.

This warning pretty much tells what is what it wants to be different. What is doesn’t tell, is why this is bad and how to fix warning (other than changing the orientation of the nested VirtualizedList but that is not always possible). Let’s look at how why this happens and how to fix it.
Virtualized lists that means and are performance-optimized which massively improves memory consumption and performance when using them to render large lists of content. The way this optimization works is that it only renders the content that is currently visible in the window, usually meaning the container/screen of your device. It also replaces all the other list items same sized blank space and renders them based on your scrolling position.
Now If you put either of these two lists inside a ScrollView, they fail to calculate the size of the current window. They will instead try to render everything, possibly causing performance problems, and it will, of course, also give you the warning mentioned before.

#react #react-native #javascript #programming