FlatList inside ScrollView doesn't work in React Native

Question

When I'm using FlatList inside ScrollView I'm getting an error as VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

I have tried to add the Components as mentioned below:

<SafeAreaView>
  <ScrollView>
    <View>
      <FlatList />
    </View>
  </ScrollView>
</SafeAreaView>

May I know why you are implementing the FlatList Component inside the ScrollView Component? — Jignesh Mayani
I have one more list to be displayed below the first FlatList component. So I want total page to be inside a parent ScrollView component. — Prameela K
We can use the ListFooterComponent to show the children at the end of the flat list — Jignesh Mayani

Nooruddin Lakhani Nooruddin Lakhani · Accepted Answer · 2021-02-22T07:09:04

Use this way instead of using Flatlist inside Scrollview like

<SafeAreaView style={{flex: 1}}>
    <FlatList
      data={data}
      ListHeaderComponent={ContentThatGoesAboveTheFlatList}
      ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>

FlatList inside ScrollView doesn't work in React Native

1 Answers