How to Create React Native Layouts with Flexbox [with examples]

#

If you're familiar with CSS properties like flex-direction, then you already know how to create layouts in React Native!

Layouts in React Native are based on CSS — if you're familiar with properties like flex-direction and justify-content, then you already know how to create layouts in React Native (and if you're not, that's fine too!). Today we'll review the most important style properties.

We'll first cover how to set the dimensions of an individual component.

Note that I also wrote part of the official React Native documentation on this topic, and there will be many similarities between this lesson and the documentation site.

Fixed dimensions

#

For a component to render on the screen, it needs both a width and height greater than 0. These can be set explicitly using the width and height style properties.

In the following example, we create 3 Views with different dimensions:

Flex dimensions

#

We can use the flex style property to define a component that expands or shrinks to fill the available screen space. We do this frequently, since mobile devices have a wide range of screen sizes, and we want our app to look good on all of them.

In this example, we create 3 Views that fill the height of the screen, regardless how big or small the screen is:

Laying out children

#

So far we've covered how a component can specify its own dimensions. Most layout properties, however, are controlled by a component's parent.

We normally use a combination of flexDirection, justifyContent, and alignItems on a parent component to determine the layout of its children.

flexDirection

#

We use flexDirection to choose either a vertical or horizontal layout of children components. The two values we commonly use are:

• row: Align children from left to right.
• column: (default) Align children from top to bottom.

There are two other options for flexDirection, row-reverse and column-reverse, which will reverse the order of the children. These are rarely used; instead of adjusting the layout, reverse the order of the children in the component's render method.

justifyContent

#

We use justifyContent to determine the distribution of children align the primary axis. Here are the options for values we can use:

• flex-start: (default) Distribute children at the start of the main axis.
• center: Distribute children in the center of the main axis.
• flex-end: Distribute children at the end of the main axis.
• space-between: Distribute children evenly along the main axis, with remaining space between the children.
• space-around: Distribute children evenly along the main axis, with remaining space between the children, and also at the beginning and end of the main axis.

alignItems

#

We use alignItems to determine the alignment of children along the cross axis. The cross axis is the axis that runs perpendicular to the main axis, e.g. if our flex-direction is column then our main axis is vertical and our cross axis is horizontal. Here are the options for values we can use:

• stretch: (default) Stretch children to fill the parent.
• flex-start: Align children at the start of cross axis.
• flex-end: Align children at the end of cross axis.
• center: Align children at the center of cross axis.
• baseline: Align children along a common baseline. Individual children can be set to be the reference baseline for their parents.

Note that stretch will not stretch a child if its width is set explitly (or height in the case of a flexDirection: row parent).

Differences from CSS

#

The most important difference between flexbox in CSS and React Native are the default values.

Here are the defaults for CSS:

flex-direction: row;
align-items: flex-start;
position: static;

And React Native:

flex-direction: column;
align-items: stretch;
position: relative;

Defaulting to a column layout on mobile is reasonable, since phones are by far the most common mobile device, and most of the time they're used in a vertical layout.

There are a few other differences, such as flex only supporting a single number value in React Native, but the framework will generally warn you if you try to do something that isn't supported.