React Native #3 - Flexbox Basics

Laying out components in React Native is done using flexbox, the key difference though is that style names are written camelcase e.g. background-color would be backgroundColor when defining it as part of a React Native Stylesheet. Today, I'll take you through the key ways you can layout your components using flexbox:

Parent Properties

display: flex;

In web dev, if you want to layout your page using flexbox you will need to specify "display: flex;" in your style for that HTML element. However, in react native this is unnecessary.

flexDirection

• row (default): layout child components left to right
• row-reverse: layout child components right to left
• column: layout child components top to bottom
• column-reverse: layout child components bottom to top

flexWrap

• nowrap (default): components try to fit on one line
• wrap: components can wrap onto new line (left to right)
• wrap-reverse: components can wrap onto new line (right to left)

flexFlow

Shorthand for flexDirection and flexWrap e.g. column wrap

justifyContent

Distributes space left over once all the child items have been rendered.

• flex-start: components are rendered at the start of the parent
• flex-end: components are rendered at the end of the parent
• center: components are rendered at the center of the parent
• space-between: components are rendered equidistant apart, with a component aligned with both the start and end of the parent component
• space-around: components are rendered equidistant apart, with a space at before the first and last component

alignItems

How components are aligned vertically for row layout or horizontally for column layout:

• flex-start: aligned with the top of the parent layout for row, and with the left of the parent for column
• flex-end: aligned with the bottom of the parent layout for row, and with the right of the parent for column
• center: centered within the parent element
• stretch: components stretch to fill the parent element (respects min/max width/height)
• baseline: components are aligned along their baselines

alignContent

Similar to justifyContent but vertically for row and horizontally for column. It has the same potential values as justifyContent.

Child Properties

order

Takes an integer value, and defines the order components appear in the container. By default, this is based off the components order in the HTML.

flexGrow

A unitless number that dictates what amount of space an item should take up in a flex container as a proportion.

flexShrink

Similar to flexGrow except it specifies the items ability to shrink if necessary.

flex

Combination of flexGrow, flexShrink and flexBasis (in that order e.g. 0 1 auto). flexShrink and flexBasis are optional.

alignSelf

Allows the alignment specified by alignItems to be overridden for the specific child item. It shares the same potential values as alignContent.

References

Comprehensive Flexbox Tutorial