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>
      )
    }}
  />