React Native Flexbox Row / Col issue

user_385563 0
Viewed 154

Can anyone please explain whats going on in this circumstance:

Take the following basic flex layout in HTML:

 <div style="background-color:grey;  ">
      <div style="padding:5px; background-color:red; display:flex">
        <div style="flex:3; background-color:blue">
          hi
        </div>
        <div style="flex:1; background-color:yellow">
          do
        </div>
      </div>
    </div>

Which as expected renders like this -

enter image description here

I wanted to use a similar structure in a React Native project and it renders completely differently:

Heres the code:

  <View
    style={{flexDirection: 'column', padding: 5, backgroundColor: 'red'  }}>
    <View style={{backgroundColor: 'blue', flex:1}}><Text>hi</Text></View>
    <View style={{backgroundColor: 'yellow', flex:2}}><Text>do</Text></View>
  </View>

This shows a red column only - content inside disappears. enter image description here

However if i switch the flexDirection to 'row' it works as you expect the 'column' to work. i.e. -

enter image description here

Confusing my mind this afternoon! Can anyone please explain whats going on here!?

flexbox react-native reactjs css
1 Answers

In React Native, by default FlexDirection is set to column. This makes sense as you can see that most apps have vertical scrolling in space.

In your first piece of code, the parent component is taking up all the available space, and therefore you don't see the inside elements.

When you set the code to row, then the Views take the available space within the container. Hope that makes sense. I faced the same issue last week, and you get used to it the more you play around. :)

user_144929800
Related