FlatList in ScrollView Error "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation"

Question

I make a component EventCards in this I use Flatlist. I call that component in Home component, where the EventCards component is in ScrollView.

Const Home= () => { 
  return ( 
    othercomponents...
      <ScrollView>
        othercomponents...
        <EventCards />
        othercomponents...
      </ScrollView>
    othercomponents...
    )
  }

Now, it give an error:

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.

The Flatlist is the Upcoming Events.

I try to use a FlatList in a Scrollview. But it throw an error. I want to solve that error.

Answer 1

The reason of above issue is when we render flatlist inside the scrollview it will render all the items at same time despite of flatlist's optimizations techniques. where flatlist will only render items that will fit in the visibility area.

To handle this warning Flatlist itself gives us an ability to add custom header and footer component over the contents of Flatlist items.

This will make whole content of Flatlist as scrollable and also our data items will be rendered in optimized way.

eg.

<FlatList
    data={myData}
    renderItem={renderItemHandler}
    ListHeaderComponent={() => {
      return (
        <View>
          {/**
           * place your header components here
           */}
        </View>
      )
    }}
    ListFooterComponent={() => {
      return (
        <View>
          {/**
           * place your footer components here
           */}
        </View>
      )
    }}
  />

Answer 2

As it is clearly stated, you should not nest FlatList inside ScrollView.

Now if you have other components inside the ScrollView that you want to be seen before or after you FlatList when user is scrolling inside you viewport, you can use ListHeaderComponent and ListFooterComponent respectively, and then remove the ScrollView from your code.

If this is not the answer you are looking for, please provide more information about the UI that you are planning to achieve.