ERROR - VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

Question

I'm working on a react-native app and I have to put a list of object in a Scrollview, so I use the FlatList component to do it. This is the piece of code that generates the error:

<ScrollView contentContainerStyle={style}>
   Other components
   <FlatList
       style={style}
       data={data}
       scrollEnabled={false}
       keyExtractor={(item, index) => index.toString()}
       renderItem={({ item, index}) => (somethings)}
   />
   Other components
</ScrollView>

The complete error is: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

Answer 1

Flatlist has its own ScrollView you can scroll through the list using that so there is no need to put a flatlist into a ScrollView that is why its giving a warning, the both scrollview will clash and one of them (mostly the parent one) works.

Answer 2

The error is self explanatory and it should be in a developers best interest to avoid these kind of things even when it's just a false alarm. Your particular situation could use the following solution:

<FlatList
  data={data}
  keyExtractor={(item, index) => `key-${index}`}
  ListHeaderComponent={() => (
    <SomeComponents>
      ...Some components those need to be on top of the list
    </SomeComponents>
  )}
  ListFooterComponent={() => (
    <SomeComponents>
      ...Some components those need to be below the list
    </SomeComponents>
  )}
  renderItem={({ item, index}) => (somethings)}
/>

Another note, if you need more complex list that needs header and footer for the list itself, you can try SectionList.