FlashList taking more space than necesary

[neiker]

Hey everyone! I want to show an element under my list that takes all the available space possible. Making the list take only the height it needs to show the items without leaving black space at the end of the list.

(At the bottom of this post, you can find a brief explanation of why I need this)

Here is the basic reproducible example:

With FlatList:

function Flat() {
  return (
    <SafeAreaView style={{ flex: 1 }} edges={["top"]}>
      <View>
        <FlatList data={[1, 2, 3, 4, 5, 6]} renderItem={({ item }) => <Text>{item}</Text>} />
      </View>
      <View style={{ backgroundColor: "grey", flex: 1 }} />
    </SafeAreaView>
  );
}

This works as expected, and the gray area takes all possible space that the list didn't take:

With FlashList:

function Flash() {
  return (
    <SafeAreaView style={{ flex: 1 }} edges={["top"]}>
      <FlashList data={[1, 2, 3, 4, 5, 6]} renderItem={({ item }) => <Text>{item}</Text>} />

      <View style={{ backgroundColor: "grey", flex: 1 }} />
    </SafeAreaView>
  );
}

This FlashList takes more space than needed pushing my grey box:

Details:

This is part of a much more complex UI. Still, the basic idea is that under a specific condition, I need to render only the first items on data (the header of my list), effectively making my FlashList behave like a View and delegate the rendering of the other elements to that "gray box" in my example (which in reality is a horizontal scrollview).
Yes, I can replace the FlashList with a View when those conditions are met, and it works but this will cause my header to completely re-render

[Gandhi89]

Facing this issue as well. Any updates?