Sometimes, we want to add another VirtualizedList-backed container with React-Native.

In this article, we’ll look at how to add another VirtualizedList-backed container with React-Native.

How to add another VirtualizedList-backed container with React-Native?

To add another VirtualizedList-backed container with React-Native, we can set the ListHeaderComponent and ListFooterComponent props of the FlatList.

For instance, we write

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

to set ListHeaderComponent prop to the ContentThatGoesAboveTheFlatList component and ListFooterComponent prop to the ContentThatGoesBelowTheFlatList component.

Then all the components will show beside the FlatList.

We put them in the SafeAreaView component to render the FlatList within the safe area boundaries of the device.

Conclusion

To add another VirtualizedList-backed container with React-Native, we can set the ListHeaderComponent and ListFooterComponent props of the FlatList.