React Native: Container with horizontal and vertical scrolling flatlists (ideas & discussion)

I have a big Problem with React Native: i need a container which is horizontal and vertical scrollable and only loads/render the inner elements if they are in the viewport (huge amount of data). I tried something with FlatLists, but I'm not happy with it.

I also prepared an example for my idea: https://i.stack.imgur.com/p2Sll.jpg

• the green lines are the horizontal lists (should be loaded/displayed when scrolling vertically)
• within the green list the blue items should be rendered when they are in the viewport (horizontally)
• the red list as "header" should always be fixed when scrolling horizontally (this list scrolls vertically only)

I've tried out a lot of ideas. Currently I'm loading a "Container FlatList" where the horizontal lists are included. My problem here: horizontal "rendering in viewport" is not possible, because the FlatLists have scrollEnabled=false (because I have to be able to scroll the whole container, not just the single FlatLists).

My current setup is the following (simplified scheme):

<FlatList vertical numColumns={2}>
  <FlatList vertical scrollEnabled={false} /> // the red list
  <ScrollView horizontal>
    <FlatList vertical scrollEnabled={false}> // green lists container
      <FlatList horizontal scrollEnabled={false}> // (multiple) green lists
        <View /> // (multiple) blue items [here is the problem]
      </FlatList>
    </FlatList>
  </ScrollView>
</FlatList>

Does anyone have an idea how to solve this problem? Is this technically possible with React Native?

I'm pleased if we can discuss it.