O'Reilly logo

Mastering React Native by Jacob Friedmann, Eric Masiello

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Understanding Flexbox

All components in React Native are flex containers and are positioned relatively. In CSS, you would express the default stylesheet, as shown in the following code snippet:

* { 
  display: flex; 
  position: relative; 
} 

In React Native, there are no alternative display values. In fact, display isn't even a valid style property. And, because everything is set as a relative position container, you can assume that any element positioned as absolute will always be relative to its immediate parent.

Flexbox can be thought of as relationship between the container and its immediate children. The container can align items either horizontally or vertically. In CSS, the default flex-direction is set to 'row'. You can change that value to 'column' ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required