Search code examples
react-nativeflexbox

View not taking up equal space in height with flex in React Native

I am trying to get two views to take up equal space in height with Flex but it does not seem to work as intended. Maybe i am doing something wrong or misunderstood the system of Flex?

As you can see below the text does not take up the entire height of the View but still it creates space below the text.

If i remove the text element and set a static width it works as intended.

Edit1: When placing the code outside the parent ScrollView it works as intended. It seems that a parent ScrollView is causing this with flexGrow 1.

Edit2: I created a snack to reproduce the problem. It works in web version but not in android.

Link to snack

Code:

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    <View style={{flexDirection:'column',flex:1,borderWidth:1,borderColor:'#FFF'}}>
      <View style={{flex:1,borderWidth:1,borderColor:'yellow'}}>
        <Text style={{fontSize:12,color:'#FFF',borderColor:'green',borderWidth:1}}>test text goes here</Text>
      </View>
      <View style={{flex:1,borderWidth:1,borderColor:'yellow'}}>
      </View>  
    </View>
</ScrollView>

Result below:

enter image description here

Solution

  • I think you expected this,enter image description here kind of view.

    Just replace your view with this code below.I think this will work for you.

    <View style={{ flex: 1, backgroundColor: '#000' }}>
            <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
                <View style={{ flexDirection: 'column', flex: 1, borderWidth: 1, borderColor: '#FFF' }}>
                    <View style={{height:'50%',flexDirection: 'column', borderWidth: 1, borderColor: 'yellow' }}>
                        <Text style={{ fontSize: 80, color: '#fff', borderColor: 'green', borderWidth: 1 }}>test text goes here</Text>
                    </View>
                    <View style={{ height:'50%', borderWidth: 1, borderColor: 'yellow' }}>
                    </View>
                </View>
            </ScrollView>
        </View>