Question 221512 in React native Question posted in
The official React Native documentation can be found here.

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

Tags:

2

Answers


  1. 0 
    <View
  style={{
    flex: 1,
    borderWidth: 1,
    borderColor: "#FFF",
    flexDirection: "column",
    justifyContent: "space-between",
  }}
>
  <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>;

    Try this.

    Login or Signup to reply.
  2. 0

    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={{flexDirection: 'column', borderWidth: 1, borderColor: 'yellow' }}>
                        <Text style={{ fontSize: 80, color: '#fff', borderColor: 'green', borderWidth: 1 }}>test text goes here</Text>
                    </View>
                    <View style={{ flex: 1, borderWidth: 1, borderColor: 'yellow' }}>
                    </View>
                </View>
            </ScrollView>
        </View>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search