In this chapter, you'll get a feel for what it's like to lay out components on the screen of mobile devices. Thankfully, React Native polyfills many CSS properties that you've probably used in the past to implement page layouts in web applications. We'll use the flexbox model to layout our React Native screens.
Before we dive into implementing layouts, you'll get a brief primer on flexbox and using CSS style properties in React Native apps—it's not quite what you're used to with regular CSS stylesheets. With that out of the way, you'll implement several React Native layouts using flexbox.
Before the flexible box layout model was introduced to CSS, the various approaches to building layouts felt hacky and were error prone. Flexbox fixes this by abstracting many of the properties that you would normally have to provide in order to make the layout work.
In essence, the flexbox is exactly what it sounds like—a box model that's flexible. That's the beauty of flexbox—it's simple. You have a box that acts as a container, and you have child elements within that box. Both the container and the child elements are flexible in how they're rendered on the screen, as illustrated here:
Flexbox containers have a direction, either column (up/down) or row (left/right). This actually confused me when I was first learning flexbox: my brain refused to believe that rows move from left to right. Rows stack on top of one another! The key thing to remember is that it's the direction that the box flexes, not the direction that boxes are placed on the screen.
Note
For a more in-depth treatment of flexbox concepts, check out this page: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.