Render FlatList footer at bottom if list doesn't extend off page

Question

I'm trying to implement a bit of a wonky feature here on our FlatList. What we want, is if the FlatList extends off the page, the footer should behave as normal - i.e. be off screen until the user scrolls enough to reveal it.

However, if there's only a few items, and the FlatList does not extend past the page bottom, I want my footer to display on the bottom, rather than right after the list. I've attempted to draw some ASCII art to show better what I mean:

Wrong:

---------------
| cell1        |
|--------------|
| cell2        |
|--------------|
| footer       |
|              |
|              |
|              |
----------------

What I'd like:

---------------
| cell1        |
|--------------|
| cell2        |
|--------------|
|              |
|              |
|              |
| footer       |
----------------

Anyone know how to do this? The important part is that if you need to scroll to see a cell, that the footer does not sit over the list, but still remains after all the cells.

Answer 1

If anyone finds this later and is looking for an answer, here is how I got it to work:

<ScrollView 
  style={styles.flatListSectionLayout} 
  contentContainerStyle={{ flexGrow: 1 
}}>
  <FlatList
    style={{ flex: 1 }}
    scrollEnabled={false}
    ...
  />
  <Footer />
</ScrollView>

This will force the ScrollView's content container to grow to fill all available space (contentContainerStyle={{ flexGrow: 1 }}), and will then force the FlatList to take up as much as the remaining space as possible (the flex: 1 in the FlatList style prop.)

Answer 2

I had the same issue today, but I use a better solution.

The solution implemented with scrollEnabled={false} will not perform well with more items cause FlatList needs to calculate all child height.

Wen should SomeThing like this:

<FlatList
  ...
  ListFooterComponentStyle={{ flexGrow: 1, justifyContent: 'flex-end' }}
  contentContainerStyle={{ flexGrow: 1 }}
/>

I put in expo snack for you guys test: https://snack.expo.io/@victorwads/flatlist-with-grow-footer

You can put more items on snack to test more items behavior:

<FlatList
   data={['', '', '' ,'' ,'' ,'' ,'' ,'' ,'' ,'']}
   ...
/>