How it works...

Our application is looking really good, and it was quite easy to accomplish by using flexbox. We created three distinct sections by using View elements that take up different fractions of the screen by setting the flexGrow properties to 3, 1, and 3, respectively. This causes the top and bottom sections to be of equal vertical size, and the middle section to be one third the size of the top and bottom.

When using flexbox, we have two directions to lay out child content, row and column:

• row: This allows us to arrange the children of the container horizontally.
• column: This allows us to arrange the children of the container vertically. This is the default direction in React Native.

When setting flex: 1 as we did with the container View element, we're telling that element to take up all available space. If we were to remove flex: 1 or set flex to 0, we can see the layout collapse in on itself, since the container is no longer flexing into all of the empty space:

Flexbox is great for supporting different screen resolutions as well. Even though different devices may have different resolutions, we can ensure consistent layouts that will look good on any device.