Flexbox 'flex' property in React Native

Question

I'm working my way through the wonderful ReactNativeKatas to learn flexbox layouts in React Native. In the example below, the flex property on the two child views of the parent View (the one using the styles.container) is set to 0.1. Setting both to 0.1 places the first View on the absolute left of the display and the second View in the middle. Why does setting 0.1 to the flex property of both Views align them this way?

const FlexSize= (props)=>{
  return (
    <View style={styles.container}>
      <View style={{flex: 0.1}}>
        <Box style={{flex: 0.7}}/>
        <Box style={{backgroundColor:'yellow'}}/>
        <Box/>
        <Box style={{flex: 0.3, backgroundColor:'yellow'}}/>
      </View>
      <View style={{flex: 0.1}}>
        <Box style={{flex: 0.5}}/>
        <Box style={{backgroundColor:'yellow'}}/>
        <Box/>
        <Box style={{flex: 0.5, backgroundColor:'yellow'}}/>
      </View>
    </View>
  )
}


const styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection:'row',
    backgroundColor: colors[1],
  },
});

Rendered in the simulator:

can you share how it looks on the simulator with this code? The two children of container view have equal `flex`. So they should be aligned equally, with them splitting the whole screen in half vertically. — nabn, Aug 18 '16 at 17:08
@nabn I've edited the message to include an image of how it renders in the simulator. — Steed-Asprey, Aug 18 '16 at 17:14

score 3 · Accepted Answer · answered Aug 18 '16 at 17:21

You are basically rendering two Views equally across the screen. As both the children Views have the same color (backgroundColor: color[1]), it seems as if they are a single continuous background.

What's happening is all the boxes you are rendering inside your children Views, the get rendered at the flex-start of their parent. So the first child's boxes get rendered vertically stacked. Now the second child has to share equal space with the first one. So it starts of from the "middle" of the screen as you put it.

To better visualize this, I suggest you comment out the whole thing under container and try rendering this instead:

<View style={styles.container>
  <View style={{flex: 0.1, backgroundColor='red'}} ></View>
  <View style={{flex: 0.1, backgroundColor='blue'}} ></View>
</View>

You'll see how these views get stacked up in your screen (note that you have flexDirection: row in your container. All the boxes get stacked up accordingly. I hope you get the explanation.

Flexbox 'flex' property in React Native

1 Answers1