Cover graphic for React Native Flexbox Layout with Draftbit showing an alignContent example

In a React Native app, the Flexbox algorithm is used to specify the layout of a component and its children. The algorithm itself is designed to provide consistency among different screen sizes. In this tutorial, I am going to introduce you to how to use various Flexbox properties to create different layout patterns using Draftbit.

What is Draftbit?

Draftbit is a visual builder for creating React Native apps. It makes creating layouts using Flexbox easier and faster than hand-coding them.
‍
With a Draftbit account, you can build unlimited Flexbox layouts and export the screen code (all for free, no credit card required).

Building Flexbox Layouts in Draftbit

I am going to use a Blank screen template to start with that is going to wrap two components. The first child component is going to be the Text of what the example is about, and the second is going to be a View component. In this View component, you are going to see examples of different Flexbox layout properties.

An example of the template used in this tutorial with a Text and a View component. This screen is going to be modified throughout this tutorial.

Draftbit Basic View Screen template with a View Component title, an empty View, and its style code

The goal of this post is to give you an overview of how you can leverage the tooling provided in the Draftbit build tool. For a quick reference, all the layout properties used can be referred to in the Properties panel on the right side.

The flexDirection property

The flexDirection controls the direction of the main axis in which children components are laid out. By default, it has a value set to column along the main axis. The first step is to create three children View components inside the parent View. Each of the child components is going to have a different background color and set a width and height of 50. With the default flexDirection property value, all of these child components are going to appear vertically aligned adjacently.

Draftbit flex-direction column example with three colored boxes stacked at the top left

The flexDirection property allows the children component to be placed in the opposite direction. This is easily achievable in Draftbit as well. In the right panel, once the direction of the flex items is set, you can enable the Reverse property. The example below shows how to set the value of flexDirection to row-reverse.

Draftbit flex-direction row-reverse example with three boxes lined up at the top right

Similarly, column-reverse value can be achieved.

Draftbit flex-direction column-reverse example with three boxes stacked at the bottom left

The justifyContent property

The justifyContent controls how the children components are aligned within the main axis of their parent component. The default value of this property for each child is flex-start where a child component is aligned at the start of the parent component’s main axis.

Draftbit justifyContent flex-start example with three boxes at the top of the View

To change the value of this property, let’s say to align all the children component at the center of the main axis, you have to change the value of Justify property under Flex Items:

Draftbit justifyContent center example with three boxes in the vertical middle of the View

You can set the value to flex-end to align the child components at the end of the parent’s main axis:

Draftbit justifyContent flex-end example with three boxes at the bottom of the View

Setting the value to space-between is going to spread the children components across the parent’s main axis by evenly distributing the remaining space between them:

Draftbit justifyContent space-between example with boxes at the top, middle, and bottom

Setting the value to space-around is going to evenly place the children components on the parent’s main axis, distributing the remaining space around them:

Draftbit justifyContent space-around example with equal space around each of three boxes

The last property value is space-evenly which is used to evenly distribute the spacing between each child component.

Draftbit justifyContent space-evenly example with equal gaps between three boxes

The alignItems property

The value of alignItems property affects the children components to be aligned along with the cross or the secondary axis inside the parent component. The default value of this property is stretch. In the example below the width and height of each child component have a fixed value of 50pt. This overrides the Stretch property.

Draftbit alignItems stretch example where fixed-width boxes stay small at the top left

The children component must not have a fixed width for this property to affect the secondary axis. The example below shows that when then width is set to auto from the right panel, the alignItems: stretch property works as expected.

Draftbit alignItems stretch example with auto-width boxes stretched across the full View width

The value flex-start aligns the children at the start of the parent’s secondary axis:

Draftbit alignItems flex-start example with three boxes aligned to the left edge

The value flex-end aligns the children at the end of the parent’s secondary axis:

Draftbit alignItems flex-end example with three boxes aligned to the right edge

The value center aligns the children at the center of the parent’s secondary axis:

Draftbit alignItems center example with three boxes centered horizontally in the View

The alignSelf property

The value of the align-self property is used to change the alignment of an individual child component by overwriting the value of alignItems set by the parent component.

For example, when the value of alignItems of the parent component is set to flex-start but the first child has an alignSelf value of flex-end. To change the assign the property of alignSelf to an individual child component, you have to select the child component and then from right panel, go to Selected Item and change the value of Align to flex-end.

Draftbit alignSelf flex-end example with the red box moved right while the other boxes stay left

Similarly, when the parent component has the value of flex-end for the alignItems property, set the alignSelf to flex-start of the first child component:

Draftbit alignSelf flex-start example with the red box on the left and the other boxes on the right

Setting the value to center for the child component is going to have the following effect:

Draftbit alignSelf center example with the red box centered while the other boxes stay right

On removing the fixed width dimension of the first child component and setting the value to stretch is going to have the following effect:

Draftbit alignSelf stretch example with the red box spanning the full width above two right-aligned boxes

The flexWrap property

The flexWrap property wraps the children components along the main axis on multiple lines when they overflow the size of the parent component.

The default value of this property is nowrap:

Draftbit flexWrap nowrap example with one column of boxes overflowing the bottom of the View

The other two values are wrap:

Draftbit flexWrap wrap example with colored boxes wrapping into a second column on the right

And the wrap-reverse:

Draftbit flexWrap wrap-reverse example with boxes starting on the right and wrapping leftward

The alignContent property

The alignContent property aligns the child components across multiple lines on the secondary axis when they are wrapped using the flexWrap property. The default value of this property is flex-start.

Draftbit alignContent flex-start example with two wrapped columns aligned to the left of the View

The second value aligns the wrapped lines in the center of the parent component’s secondary axis.

Draftbit alignContent center example with two wrapped columns of boxes centered in the View

The value flex-end aligns the wrapped lines at the end of the parent component’s secondary axis.

Draftbit alignContent flex-end example with two wrapped columns aligned to the right of the View

The space-between value distributes the space between the wrapped lines.

Draftbit alignContent space-between example with two wrapped columns pushed to opposite edges

The space-around value evenly distributes the space around the wrapped lines.

Draftbit alignContent space-around example with even space around the two wrapped columns

The position absolute

The property position enables a child component to be positioned relatively within a parent component. The default value of this property known as relative defines each element to be positioned exactly how the flow of the layout. In the example below, the first child component has a fixed margin of 20pt from top and left. The second child has a fixed margin of 40pt from top and left and the third child has a fixed margin of 60pt from top and left. The other two margin properties (right and bottom) are left at auto.

Draftbit position relative example with three colored squares offset diagonally by their margins

The absolute value allows a child component to layout independently of its siblings. The margin property for each child element remains the same from the previous example.

Draftbit position absolute example with three colored squares overlapping near the top left

The zIndex property

This property can control which child component to be displayed on top of its siblings. In the example below, the second child component is displayed on top of the first and the third sibling. The value to control the position is determined by setting the zIndex to 1.

To change the value of zIndex, go to the right panel, and under the property Position you will find the Z-Index field, as shown in the example below.

Draftbit zIndex example with Z-Index set to 1 so the selected orange square sits above its siblings

Conclusion

After completing this tutorial, you’ve got the overview of how to use Flexbox layout elements when building UI components using Draftbit.

Here are some links to help you out:

Draftbit documentation on Layout properties which provides an overview of all the available properties related to Flexbox.
The official Yoga Layout documentation and its playground.
More information about position property at MDN web docs.
React Native official documentation on different Layout properties.
For Flexbox Layout patterns, this post refers to The Full React Native Layout Cheat Sheet.

Reach out to us on twitter/@draftbit for more questions.

The Complete Guide to React Native Flexbox Layout using Draftbit’s Visual Builder