How to make FlatList fill the height?

Question

import React from 'react';
import {SafeAreaView, KeyboardAvoidingView, FlatList, View, Text, TextInput, Button, StyleSheet } from 'react-native';


export default class Guest extends React.Component {
    state={
        command: '',
    }
    constructor(props) {
        super(props)
        this.onChangeText = this.onChangeText.bind(this)
        this.onKeyPress = this.onKeyPress.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }
    onChangeText(text){
        const command = text.replace('\n', '');
        this.setState({
            command: command
        })
    }
    onKeyPress(e){
    }
    onSubmit(){
    }
    render() {
        return(
            <SafeAreaView style={styles.safeAreaView}>
                <KeyboardAvoidingView style={styles.keyboardAvoidingView} keyboardVerticalOffset={88} behavior="padding" enabled>
                    <FlatList
                        inverted={true}
                        keyboardShouldPersistTaps='always'
                        keyboardDismissMode='interactive'
                        ref='list'
                        style={styles.flatList}
                        data={[1, 2, 3]}
                        renderItem={(props) => {
                            return(<View><Text>{props.item}</Text></View>)
                        }}
                    />
                    <TextInput
                        command={this.state.command}
                        onChangeText={this.onChangeText}
                        onKeyPress={this.onKeyPress}
                        onSubmit={this.onSubmit}
                        style={styles.textInput}
                    />
                </KeyboardAvoidingView>
            </SafeAreaView>
        )
    }
}


const styles = StyleSheet.create({
    safeAreaView:{
        backgroundColor:"#ffffff",
    },
    keyboardAvoidingView:{
    },
    flatList:{
        backgroundColor: 'red',
    },
    textInput:{
        backgroundColor: 'yellow'
    }
})

I'd like the red flatList to fill the screen (but keep height of yellow textbox).

I've tried flex:1 on flatList, but it simply makes it disappear.

you can simply use [Dimensions component](https://facebook.github.io/react-native/docs/dimensions) to handle the height for each different phone size, just update the `styles of flatlist` looks like `flatList:{backgroundColor: 'red', height: Dimensions.get('window').height*0.8}` **Dimensions.get('window').height*0.8** mean you used 80% height of phone screen — flix, Sep 12 '18 at 04:15

blaz · Accepted Answer · 2018-09-12T02:56:23.933

33

FlatList inherits ScrollView's props, so solution for ScrollView will work:

<FlatList
    contentContainerStyle={{ flexGrow: 1 }}
    {...otherProps}
/>

Here is the original Github issue for above solution.

EDIT: The parental Views of FlatList should have flex: 1 in their style.

safeAreaView:{
    backgroundColor:"#ffffff",
    flex: 1
},
keyboardAvoidingView:{
    flex: 1
},

edited Sep 12 '18 at 02:56

answered Sep 12 '18 at 02:42

blaz

3,981
22
37

2

Not working for me, I got a FlatList inside a View, View has `flex: 1`, and FlatList `flexGrow: 1`, but not working. Any idea? what's those safeAreaView and keyboardAvoidingView ? – msqar Jan 20 '19 at 22:40
3

All the parents must be flex: 1 – Siraj Alam Sep 03 '19 at 14:44
then it's will effect to list if list's not empty – famfamfam Apr 13 '22 at 17:52

Kike Gamboa · Answer 2 · 2020-06-04T01:16:23.763

2

use the property style wit flex:

render() {
    return (
            <View style={{ flex: 1 }}>

                <FlatList
                    keyExtractor = { this.keyExtractor }
                    data = { this.getPOs() }
                    ListEmptyComponent = { this.renderEmpty }
                    ItemSeparatorComponent = { Separator }
                    renderItem = { this.renderItem }
                />

            </View>
    )

}

edited Jun 04 '20 at 01:16

answered Jun 03 '20 at 19:34

Kike Gamboa

994
7
8

Would you mind updating your answer to provide a bit more explanation of what you're doing, and why this might be preferable over the accepted answer from two years ago? – Jeremy Caney Jun 04 '20 at 00:40
Sure, I have a list with more than 30 elements, and the problem was the scroll at the bottom then i try add the property "contentContainerStyle={{ flexGrow: 1 }}" to the FlatList but it didn't work. Then I added into a the and add to the view the property "style={{ flex: 1, width: "100%" }}" and now i can to access to the bottom of my list. – Kike Gamboa Jun 04 '20 at 01:17

score 1 · Answer 3 · answered Aug 06 '20 at 02:42

1

No need to add a parental view to the list, simply:

render() {
    return <FlatList style={{width: '100%', height: '100%'}}
               {...others}
               />;
}

answered Aug 06 '20 at 02:42

tjysdsg

656
8
19

score 0 · Answer 4 · answered Jan 07 '20 at 05:18

0

you can also add height in flatList style or put flatlist inside a view and then add flex for view

answered Jan 07 '20 at 05:18

Badri Derakhshan

51
1
13

score 0 · Answer 5 · answered Jan 31 '20 at 10:34

In my case the problem was with virtual keyboard. when I open another page. then the keyboard suddenly dismiss. and it cause part of the page to be like someone cut it or clean it. so the solution is to before push the page that contain flatlist first dismiss the keyboard and then navigate to new page

score 0 · Answer 6 · answered Oct 13 '20 at 16:19

I try every response on this issue but none of them work. What I do was add a Parent to the FlatList and then give it a style : <View style={{ height: SCREEN_HEIGHT}}>

SCREEN_HEIGHT is from Dimensions.get('window')

you have to import from "react-native" like this: import { Dimensions } from "react-native" Full example:

<View style={{ height: SCREEN_HEIGHT}}>
  <FlatList
    contentContainerStyle={{ flexGrow: 1 }}
    keyExtractor={item => item.name}
    numColumns={1}
    data={this.state.dataList}
    renderItem={({ item, index }) =>
      this._renderItemListValues(item, index)
    }
   />
  </View>

How to make FlatList fill the height?

6 Answers6

Linked