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
– Jignesh Mayani, Commented Feb 22, 2021 at 5:07
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
– Prameela K, Commented Feb 22, 2021 at 10:08
We can use the ListFooterComponent to show the children at the end of the flat list — Jignesh Mayani
– Jignesh Mayani, Commented Feb 22, 2021 at 10:10

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

2

Use this way instead of using Flatlist inside Scrollview like

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

answered Feb 22, 2021 at 7:09

Nooruddin Lakhani

6,8513 gold badges22 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prameela K Over a year ago

Thank you. Added ListFooterComponent and this works.

gauti Over a year ago

this gives clarity. javascript.plainenglish.io/…

Collectives™ on Stack Overflow

FlatList inside ScrollView doesn't work in React Native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related