How to Use Flexbox in React Native
Flexbox is a CSS tool that lets you build flexible one-dimensional layouts. It enables you to control the position of elements within a container so you have more control over presenting your content on the screen.
This tutorial demonstrates how to use flexbox in React Native to build flexible and responsive layouts. You’ll learn how to position child items of a container element using flexbox properties.
Comparing Flexbox Behavior in React Native and Web Development
If you want to organize the container element’s content using flexbox in plain CSS, you need to use thedisplay:flexproperty.
But with React Native, you don’t need to set thedisplay:flexproperty. This is because React Native uses flexbox by default to build layouts.
Here are some differences to keep in mind abouthow flexbox behaves when used to align HTML elementsin web apps versus how it behaves in React Native:
Using Flexbox Properties in React Native
Flexbox properties allow you to describe how to align the child elements of the container element. You need to understand these properties to create complex layouts that fit your application’s needs.
1. Using the flex Property in React Native
Theflexproperty determines how theViewcomponent fills the screen. This property accepts an integer value greater than or equal to 0. The value specifies the fraction of the screen theViewcomponent should take up.
In this example, you’re creating a screen with a single view from theReact Native components library:
Here’s the output:
Here you assigned the 1 as the flex value of theViewcomponent. TheViewcomponent takes up the whole screen (100%) because you’ve split the space into one group.
Let’s take a look at another example:
Here’s the outcome:
Here you have twoViewelements within anotherViewelement. The first child is set toflex:1, and the second is set toflex:3. Those values split the space between the two children. The first takes up 1/4 of the screen while the second takes up 3/4 of the screen (The screen is split into 4 blocks because 1+3 = 4).
2. Using the flexDirection Property in React Native
If you look at the above screenshot, you’ll see that the child elements are on top of each other. This is the default behavior of flexbox in React Native (flexDirectiondefaults to thecolumnvalue).
You can also set theflexDirectionproperty torow,column-reverse, androw-reverse. In the following example,flexDirectionis set torow, therefore the child elements are placed side-by-side:
Setting theflexDirectiontorow-reverseplaces the children side-by-side, but it reverses the order. Similarly, thecolumn-reverseplaces the children on top of each other but in the opposite sequence to the one defined by thecolumn.
3. Using justifyContent in React Native
ThejustifyContentproperty aligns the child elements of a flexbox container along the primary axis. If theflexDirectionis set tocolumn, then the primary axis is the vertical axis. If it’s set torow, then it’s horizontal.
The possible values ofjustifyContentareflex-start,flex-end,center,space-between,space-around, andspace-evenly.
In the following example,flexDirectionis set to row andjustifyContentis set toflex-start:
If you change theflexDirectiontocolumn,flex-startwill apply to the vertical axis. So the boxes will the stacked on top of each other.
SettingjustifyContentto center (while the primary axis is acolumn) centers the three children boxes.
4. Using alignItems in React Native
ThealignItemsproperty determines the placement of items in a flexbox container along the secondary axis. This is the opposite ofjustifyContent. Just likejustifyContenttakes care of the vertical alignment,alignItemshandles horizontal alignment. The possible values ofalignItemsareflex-start,flex-end,center, andbaseline.
In the following example,flexDirectionis set torowandalignItemsis set toflex-start:
If you set theflexDirectionproperty tocolumnandalignItemstocenter, the boxes will be placed on top of each other, and the children elements will be center aligned.
5. Using alignSelf in React Native
ThealignSelfproperty determines how an individual child should align itself in the container. It overridesalignItems, and the possible values areflex-start,flex-end,center, andbaseline.
In the following example, we set a defaultalignItemsproperty and override it usingalignSelf:
Other Flexbox Properties
There are two other properties that you can use when creating a flexbox layout in React Native:
Learn More About React Native
Now that you understand flexbox and know how to use it in your React Native app to create flexible and responsive layouts, it’s time for you to go into the nitty-gritty of React Native.
Learn how to build native apps with a familiar framework.
The best features aren’t the ones being advertised.
Some subscriptions are worth the recurring cost, but not these ones.
OneDrive is one of the best, but it has a catch.
When your rival has to bail out your assistant.
Flagship price, mid-range phone.
