Mastering React Native

Understanding React Native's take on the box model and flexbox

While React Native supports web layout techniques such as relative and absolute positioning, you probably don't want to design an entire app with these. For far too long, the web has used hacky CSS float techniques to create columned layouts. Floats do the job, but they were never intended for complex layouts. Nowadays, we have something far better in the form of the flexbox layout module. And what's even better is that React Native implements a form of flexbox that closely mirrors the API found in CSS. There are, however, a few differences worth noting. We'll cover these along with the related box model-like properties in this section.

Box model

Let's briefly start with the box model. ...