Flex React Native FlatList children to grow to full height?

Question

I'm using FlatList from React Native to render a bunch of items stacked on top of each other.

This works fine, I've managed to make the FlatList itself expand it's height to fill the available space but I want the FlatList items to grow when there is more space available.

This was simple to do using ScrollView (simplified pseudocode):

<ScrollView
  contentContainerStyle={{
    display: "flex",
    flexGrow: 1,
  }}
>
  <Item key={1} style={{ flexGrow: 1 }} />
  <Item key={2} style={{ flexGrow: 1 }} />
</ScrollView>

However it doesn't work for FlatList (simplified pseudocode):

<FlatList
  contentContainerStyle={{
    display: "flex",
    flexGrow: 1,
  }}
  renderItem={({ index }) => <Item key={index} style={{ flexGrow: 1 }} />}
/>

I've created an Expo Snack showing both the ScrollView successfully growing the elements and the FlatList failing to do so.

There seems to be a lot of discussion online about making the parent FlatList full height, but I've struggled to find anything about making the FlatList items grow to fill the available FlatList height.

I need to use FlatList as I plan to use react-native-draggable-flatlist to implement drag and drop and cannot find an equivalent library that doesn't use FlatList.

A screenshot of the Expo Snack is shown here:

As seen here, it seems the offending issue in the DOM is the CallRenderer, the VirtualizedList is the right height with the right flex styling, and DayItem is set to grow (and worked fine with ScrollView), but in between there's the CallRenderer which seems to interrupt the flex relationship between the two:

Any help is much appreciated.

Answer 1

As a workaround, you can listen to onLayout of the Flatlist, hold the calculated height in a state, and then set each child's height to flatlist height / data.length.