React-native: Question: Is it possible to make a view 100% height?

[josebalius]

Is that possible? or do we always have to hardcode height values?

[brentvatne]

Various ways to do this - flex: 1 on a view whose container does not constrain its size will take up the full screen. position: absolute, top: 0, bottom: 0, left: 0, right: 0 will do this too. If this doesn't solve your problem, let me know why and I'll reopen the issue :smile:

[josebalius]

Works great, thanks @brentvatne .

[solyomalexandra]

Hi, It does not work for me. Though my problem comes from a scrollView. In some cases the content does not take up the whole screen, and than the it gets small. Neither solution helped.

[dchambers]

For the outermost component {flex: 1} didn't work for me, so I had to go with the {position: 'absolute', top: 0, bottom: 0, left: 0, right: 0} suggestion instead.

[yalcindo]

This helped us:

import Dimensions from 'Dimensions';
const {width, height} = Dimensions.get('window');

[fantianwen]

I come up with this question,and I do like this:

 <View style={{backgroundColor:'yellow',flex:1}}>

            <View style={componentStyle1.container}>

                <View style={componentStyle1.container1}>

                </View>

                <View style={componentStyle1.container2}>

                </View>

            </View>

        </View>

and styles are:

  container: {
        flex: 1,
        flexDirection: 'column'
    },
    container1: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'blue'
    },
    container2: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'green',
    },

works well...

The key is , flex box wraps his content by default,so you should use flex:1to design outest container.

[rclai]

Sometimes the scroll view will not take up the right height even with flex so you just have to wrap it with a View. I haven't isolated that issue but that is a workaround.

[proshoumma]

@brentvatne thank you soooooooo much, you saved me after hours of searching for alternative solutions.

[smithaitufe]

Is it possible to set the component height so that it can cover the statusbar?

[saumya27]

I have same question, is it possible to set the component height so that it covers the status bar height and navigation bar height as well. In my case, though its covering from top by using const height}= Dimensions.get('window'), but equivalent height(64px) is being truncated from bottom of component.

Kindly help