CODEWITHSUNDEEP
react-native
TIMEX
TIMEX

Reputation: 271634

How to make FlatList fill the height?

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'
    }
})

enter image description here

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.

Upvotes: 6

Views: 25432

Answers (6)

Mariel Quezada
Mariel Quezada

Reputation: 101

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>

Upvotes: 0

tjysdsg
tjysdsg

Reputation: 756

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

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

Upvotes: 1

Kike Gamboa
Kike Gamboa

Reputation: 1104

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>
    )

}

Upvotes: 2

Ehsan Sarshar
Ehsan Sarshar

Reputation: 3211

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

Upvotes: 0

Badri Derakhshan
Badri Derakhshan

Reputation: 61

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

Upvotes: 0

blaz
blaz

Reputation: 4068

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
},

Upvotes: 35

Related Questions