How to put tree Lists, with different render, inside a FlatList

Question

I'm trying to display three nested FlatLists inside a main FlatList within a card. Each nested FlatList will display different data and styles, showing additional information, removed ingredients, and notes respectively. However, I'm receiving the following error/warning message:

VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.

VirtualizedList trace:
  Child (vertical):
    listKey: ingredients
    cellKey: 14
  Parent (vertical):
    listKey: products
    cellKey: rootList

Here is the code I'm currently using:

<FlatList
  renderItem={() => {
    return (
      <>
        <FlatList/>
        <FlatList/>
        <FlatList/>
      </>
    )
  }}
/>

How can I display these three nested FlatLists without encountering this error/warning message? Also, note that I don't want to enable scrolling on any of the lists, only the main FlatList.

Answer 1

Try sectionlist

SectionList enables you to show a sectioned list in your UI. It is a performant interface for rendering sectioned lists with useful features, including scroll loading, pull to refresh, section separator support, etc.