DEV Community

Cover image for Fixing 'VirtualizedLists should never be nested inside simple ScrollViews' warning [FlatList]
Edson Junior de Andrade
Edson Junior de Andrade

Posted on • Edited on

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

Top comments (0)