Fixed footer in react native with FlatList

Question

Following this question on fixed footer with a ScrollView, I'm trying to implement a fixed footer on the screen with a FlatList. I have tried to use the answer provided by putting the flat list inside a view, but then none of the items are rendered. Does any one know how to implement a fixed footer with a flat list as the other main element of component?

score 27 · Accepted Answer · edited May 01 '18 at 12:09

27

Using this flex solution I managed to do it with a couple of nested Views:

<View style={{flex: 1}}>
  <View style={{flex: 0.9}}>
    <FlatList/>
  </View>
  <View style={{flex: 0.1}}/>
</View>

edited May 01 '18 at 12:09

Tom

1,636
2
13
21

answered Mar 14 '18 at 14:14

avriis

1,581
4
17
31

1

could you remove the first child `` and provide the `{{flex: 0.9}}` value passed into the `contentContainerStyle` prop of this FlatList to achieve the same result? – kinghenry14 Jul 20 '22 at 20:06
I tried that, but it won't work @kinghenry14. Unsure why. – Nicolai Lissau Jul 25 '23 at 11:21

score 6 · Answer 2 · answered May 03 '21 at 08:07

6

It is similar to the answer above, but I think this also works.

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    <FlatList/>
  </View>
  <View />
</View>

answered May 03 '21 at 08:07

박제영

101
1
4

score 4 · Answer 3 · answered Mar 13 '18 at 21:07

4

FlatList comes with footer support in the form of ListFooterComponent

Try adding something like this to your flatlist

ListFooterComponent={() => <Text>Footer content</Text>}

Hope this helps!

answered Mar 13 '18 at 21:07

tjkind

161
1
1
7

11

Thanks for the answer. As far as I understand the docs at https://facebook.github.io/react-native/docs/flatlist.html#listfootercomponent, this is to specify something that is rendered at the bottom of _all_ the items and not at the bottom of the screen... – avriis Mar 14 '18 at 13:32
1

`ListFooterComponent` only renders once but it doesn't have a *sticky* option. – Michel Floyd Oct 08 '21 at 21:04

score 3 · Answer 4 · answered Aug 31 '21 at 13:29

3

To complete the solution of Tom and avoid a gap/space at the bottom of the screen.

Use an integer for flex value

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    <FlatList/>
  </View>
  <View style={{flex: 0}}/>
</View>

answered Aug 31 '21 at 13:29

Laurent

662
2
10
13

score 1 · Answer 5 · answered Apr 15 '23 at 17:13

This also worked for me to keep the button at the bottom while allowing FlatList to work properly:

<View style={{
  display: 'flex',
}}>
  <View style={{flex: 1}}>
    <FlatList
      data={data}
      renderItem={() => <Item/>}
    />
  </View>
  <View style={{ marginTop: 'auto'}}>
    <Btn/>
  </View>
</View>

marginTop: auto will push the button to the bottom of the screen.

score 0 · Answer 6 · answered Jul 25 '23 at 12:50

The selected answer does work, but you can also have the flatlist grow and let footer take up the space it needs:

<View style={{flex: 1}}>
  <View style={{flex: 1, flexGrow: 1}}>
    <FlatList/>
  </View>
  <Button>Anything here</Button>
</View>

Snack demo here

Fixed footer in react native with FlatList

6 Answers6

Linked