0

Currently there is a screen with the following schema:

<ScrollView>
  <Header>
  <FlatList> // virtualized

  <Header>
  <FlatList> // virtualized

  <Header>
  <FlatList> // virtualized

  ...
</ScrollView>

<Header> is just a header-alike stylized text.

It naturally gives a warning:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

There is a nice-working solution for a single list:

React-Native another VirtualizedList-backed container

Q. But how to deal with multiple lists like in the schema above?

Denis Kulagin
  • 8,472
  • 17
  • 60
  • 129
  • 1
    Did you already try to use SectionList? https://reactnative.dev/docs/sectionlist – Ian Vasco Aug 06 '20 at 13:53
  • Looks like a nice way to go. – Denis Kulagin Aug 06 '20 at 15:06
  • @IanVasco Am I right that there is no generic solution for multiple scrollable multi nested lists? It's either FlatList/SectionList or ScrollView wrapper with the warning and associated performance issues? – Denis Kulagin Aug 07 '20 at 08:09
  • 1
    Yes, you're right. Using SectionList is the best option to go, you might need to change your data a little bit but is far better than having a ScrollView wrapper – Ian Vasco Aug 08 '20 at 17:20

0 Answers0