loading...
Cover image for Using Flexbox Layout with React Native

Using Flexbox Layout with React Native

jsteigner profile image JSteigner ・3 min read

Hello! Today I'm going to get into how to use the flexbox layout with React Native. React Native is very similar to React but uses native ios/android components so it needs to approach CSS styling a little bit differently.

One common React Native tool is the flexbox layout. It is very similar to the CSS flexbox but there are some key differences. According to the React Native docs "The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number." There are many styles that fall under the 'flexbox layout' umbrella.

The first one I'd like to talk about is 'flex'. The flex style defines how items fill up available space in relation to each other along the main axis. The values supplied to each element inside a container determine how much of the whole container those elements will take up. Lets look at an example:

Alt Text

In this example I'm assigning my overall container a flex of 1 because it takes up the whole screen. Now the boxes inside are represented as a fraction of the container space. We need to add the values up to know how much of a percentage they are taking. In this case our total is 2 + 3 + 4 = 9. So the first box takes up 2/9 of the container, the second box takes up 3/9 of the container, and the third box takes up 4/9 of the container. This is the result:

Alt Text

Another useful style is 'flex direction'. This"controls the direction in which the children of a node are laid out." The flex direction determines the main axis and the opposite direction determines the cross-axis. Flex direction evaluates to either a column(vertical) or a row(horizontal) starting at either the top or left respectively. A reverse value can be used as well, row-reverse(right to left) or column-reverse(bottom to top). Lets take a look at the column flex direction code:

Alt Text

Alt Text

Now the row example:

Alt Text

Alt Text

'Justify content' is another flex layout tool that and has many possible values. It will position elements in alignment with the overall container's 'flex direction' or main axis. This style needs to be set in the container element. Let's take a look at the 'center' value:

Alt Text

Alt Text

Here the inner elements line up in the middle of the vertical space. The 'flex-start' value will place the elements at the beginning of the containers 'flex-direction'.

Alt Text

Alt Text

Then there is the 'flex-end' value which will place the items at the end of the container's 'flex-direction.'

Alt Text

Alt Text

React Native's flexbox layout is easy and intuitive to use. These are just a few of the styles that it encompasses. Here is a great site to test out some different styles! https://snack.expo.io/ Thanks for reading!

Posted on by:

jsteigner profile

JSteigner

@jsteigner

I am a student software developer from New Orleans currently attending Operation Spark.

Discussion

pic
Editor guide