Logo

dev-resources.site

for different kinds of informations.

Fixing 'VirtualizedLists should never be nested inside simple ScrollViews' warning [FlatList]

Published at
7/12/2022
Categories
scrollview
flatlist
Author
edsonjuniornarvaes
Categories
2 categories in total
scrollview
open
flatlist
open
Author
18 person written this
edsonjuniornarvaes
open
Fixing 'VirtualizedLists should never be nested inside simple ScrollViews' warning [FlatList]

In some cases, we feel the need to use the scrollview along with the flatlist.

Then we generate the error by adding the flatlist inside a scrollview, but that's not necessary, just use ListHeaderComponent for the content above the list and ListFooterComponent for the content below.

Example of use:

<FlatList
  LisHeaderComponent={
    <View style={{ flex: 1 }}>
      <Text>Header content</Text>
    </View>
  }
  data={itemData}
  renderItem={renderItem}
  ListFooterComponent={
    <View style={{ flex: 1 }}>
      <Text>Footer content</Text>
    </View>
  }
/>
Enter fullscreen mode Exit fullscreen mode

Featured ones: