CODEWITHSUNDEEP
react-nativelayout
Andy
Andy

Reputation: 2140

React Native FlatList - How can I leave space for a button underneath?

I'm one week new to React Native and I'm trying to put a button at the bottom of a FlatList.

I've got the FlatList working properly but if I put my button like the below (greatly simplified) pseudo-code then it appears right at the bottom of all the items in the FlatList.

What I want is for the button to always be on the bottom of the screen and for the FlatList to scroll above it.

I'm thinking I might need a wrapping container and then set flex on the FlatList and the Button but I can't quite get there.

<Container>

  <Content>
      <FlatList
          ...working FlatList goes here...
      />

      <Button block onPress={() => Actions.filters()}>
        <Text>Filter results</Text>
    </Button>

  </Content>

In the interest of brevity I took all the attributes out of the FlatList, but it's working and not the problem. I just want to stick that button onto the bottom of the screen and for it to stay there.

What's the best approach for this?

Upvotes: 2

Views: 4323

Answers (2)

ericjam
ericjam

Reputation: 1519

FlatList now provides ListFooterComponent

https://facebook.github.io/react-native/docs/flatlist#listfootercomponent

Upvotes: 6

Ramon Lobo
Ramon Lobo

Reputation: 56

You could use one view for the FlatList and one for the Button, like this:

<Container>

    <Content>
        <View style={{flex: 3}}>
            <FlatList
                ...working FlatList goes here...
            />
        </View>
        <View style={{flex: 1}}
            <Button block onPress={() => Actions.filters()}>
                <Text>Filter results</Text>
            </Button>
        </View>

    </Content>

Upvotes: 1

Related Questions