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.
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.
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
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 default
flexDirection property value, all of these child components are going to appear vertically aligned adjacently.
To change the
row , all you have to do is head over to the right panel and select the value under Flex Items > Direction .
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
column-reverse value can be achieved.
The justifyContent property
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.
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 :
You can set the value to
flex-end to align the child components at the end of the parent’s main axis:
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:
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:
The last property value is
space-evenly which is used to evenly distribute the spacing between each child component.
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.
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.
flex-start aligns the children at the start of the parent’s secondary axis:
flex-end aligns the children at the end of the parent’s secondary axis:
center aligns the children at the center of the parent’s secondary axis:
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
Similarly, when the parent component has the value of
flex-end for the
alignItems property, set the
flex-start of the first child component:
Setting the value to
center for the child component is going to have the following effect:
On removing the fixed width dimension of the first child component and setting the value to
stretch is going to have the following effect:
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
The other two values are
The alignContent property
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
The second value aligns the wrapped lines in the center of the parent component’s secondary axis.
flex-end aligns the wrapped lines at the end of the parent component’s secondary axis.
space-between value distributes the space between the wrapped lines.
space-around value evenly distributes the space around the wrapped lines.
The position absolute
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
left. The second child has a fixed margin of
40pt from top and left and the third child has a fixed margin of
left. The other two margin properties (right and bottom) are left at
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.
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
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.
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 all the available properties related to Flexbox.
- The official Yoga Layout documentation and its playground
- More information about
positionproperty at MDN web docs.
- React Native official documentation on different Layout properties.
If you need any help with the Layouts when using Draftbit, please reply in the comments section below.