Creating a User Interface with React Native

Sizing Elements using the 'flex' property in React Native

FlexBox gives us an extremely flexible way to make layouts. It relies on the premise that every layout can be boiled down to a hierarchy of rows and columns.

For example, this entire view is a row of one element:

This view is a row of two elements. one of the elements is a column of three elements.

You get the point.

Every React Native element is a FlexBox by default, whose children are laid out in a column. If you want the children to be laid out in a row, you set the property flexDirection to 'row.' In the above example, the entire screen is a row of two elements. It's styling looks like this:

  container: {
    flexDirection:'row',
    flex: 1,
  },

When you specify a flexDirection, you are deciding which axis will be the primary axis, and which axis will be the secondary axis. If the primary axis is horizontal, you can decide how big the width of each child will be with respect to its sibilings. If the primary axis is vertical, you can decide how big the height of each child will be with respect to it's sibilings.

Below, the primary axis of the entire container is green and horizontal while the secondary axis is purple and vertical:

The width of the black sidebar and the width of the light blue content container are sized with respect to each other. More specifically, the light blue content container is 4 times bigger than the black sidebar. We specify this using the 'flex' property. The styles for these two elements are as follows:

   sidebar:{
        flex:1,
        backgroundColor:'black',
        justifyContent:'space-around'
    },
    contentContainer:{
        flex:4,
        backgroundColor:'powderblue'
    },

When we specify a flex value, we are specifying how much bigger or smaller an element is to its sibilings. This can get confusing because the numbers themselves are arbitrary. What matters is the ratio between the flex values of different sibilngs. If the flex of sidebar was .25 and the flex of contentContainer was 1, we would have the same result.

If you are coming from a web development background, you are probably used to measuring element size as a percentage of the parent container. A good way to think about flex is to use it to do just this. If you add up the flex's of all the sibilngs, and think of the sum as the size of the parent element, it is easy to see what percentage each sibiling takes up. Let's do this for the above example. 1 + 4 = 5. 5 is equal to the entire container. Therefore the sidebar is 1/5th = 20% of the entire container, and the content container is 4/5 = 80% of the entire container.

Mixing fixed sized elements with flex sized elements

What if you want some of your elements to be fixed sized? In this case, the elements you define with the flex property will be sized according to the space that is NOT taken up by these fixed sized elements. In the below example, the space not taken up by the top element with fixed height 200px, is taken up evenly by the two elements with flex:1.

Hope this served as a good intro to React Native UI. Feel free to ask questions in the comments