CODEWITHSUNDEEP
react-nativedynamicheightreact-native-flatlistnative-base
Shaon Debnath
Shaon Debnath

Reputation: 117

React Native Flatlist height dynamic

I am using react native 0.59, for layout I am using native base and react-native-easy-grid. Because of different size of mobile device, I need to put flatlist height dynamic. it is starting almost middle of the screen, and I would like to show it until the footer bar.

here is my code

<Container>
<ImageBackground source={require(imagePath+"bg-default.png")}
                                 style={{width: screenWidth, height: screenHeight, resizeMode: 'cover'}} >

    <Content scrollEnabled={false}>

        <Grid>
            <Row style={{ height: screenHeight*0.36, alignItems:'center',justifyContent:'center' }}>
                <Image style={styles.iconImage} source={{ uri: this.state.image_url.displayImage}}/>

            </Row>

            <Row style={{ backgroundColor: "#1a0568", height:screenHeight*0.058, textAlignVertical: 'center', alignItems: 'center'}}>
                <Text style={styles.titleStyle}>{"Information list"}</Text>            
            </Row>

            <Row style={{ backgroundColor: 'none',height:screenHeight*0.38}}>
                <FlatList
                    style={[styles.listContainer]}
                    data={this.state.informationList}
                    keyExtractor={this._keyExtractor}
                    renderItem={this._renderItem}
                />
            </Row>

        </Grid>
    </Content>
</ImageBackground>
</Container>

As you can see, I set flatlist height screenHeight*0.38, therefore, in some mobile its perfect, but in some mobile there is some empty space. (See the attached picture) I have tried to make it dynamic with different example to fill rest of the space like How to set the style attribution to fill the rest space? (though I need to fill until footer bar), This example works well with normal component But it didnt work with flatlist. Flatlist doesnt scroll anymore. Because it loads all rows which goes out of the screen. what is the right way of setting dynamic height with flatlist?

Picture Attached

Upvotes: 0

Views: 1690

Answers (1)

Shaon Debnath
Shaon Debnath

Reputation: 117

I could solve it by playing around with different options and taking help from How to set the style attribution to fill the rest space? Unfortunately Grid, Row did not work with this.

Here is the demo (Don't forget to select iOS or android tab to view the app)

https://snack.expo.io/@shaondebnath/layouttest

Upvotes: 1

Related Questions