Easy Layouting with React Native

When it comes to layout, flex does a great job. but sometimes trying to figure out terms like: main-axis, cross-axis, justifyContent, alignItems and others can be ambiguous or simply confusing.

There are tons of links for cheatsheets, tricks and guides I can direct you to, but who wants to remember all of that?!

So I present to you our RNUILib layout modifiers.

While working on our app’s UI Library, more than just creating a bunch of components and templates I wanted to create something that can be more helpful when facing a new design or a complex layout.

Today in order to achieve a view that arrange its inner items in a row direction you’ll have to apply the following style:

<View style={{flexDirection: ‘row’}}>
  <Text>top</Text>
  <Text>middle</Text>
  <Text>bottom</Text>
</View>

wouldn’t be easier to just mark the view with a nifty prop, something like that:

<View row>
  <Text>left</Text>
  <Text>middle</Text>
  <Text>right</Text>
</View>

the row modifier will simply change the view direction from its default direction (column) to a row, horizontal, direction.

A bit to the left

At this point you already lost the whole concept of which axis is the main one or how justifyContent or alignItems will affect your layout.

Instead of playing the guessing game, when you try all the different combinations till you find the one that fits, just use the following modifiers props: left, top, right & bottom.

I almost 100% sure everyone referring to left as the left side of the screen, top as the top, right as right and bottom as… the bottom. no more confusing names.

So if I would like to align all of my view content to the bottom for instance, I will do something like that:

<View flex bottom>
  <Text text10>Bottom</Text>
</View>

aligned to bottom

mix modifiers to reach the right bottom corner of the screen.

<View flex bottom right>
  <Text text10>Bottom</Text>
</View>

aligned to right-bottom

Pretty simple Huh! and you can guess how the rest will work..

Center of Attention

Another common use case is when we want to center things in a big big box. When we want to fully center our content we usually write something like this:

<View flex style={{justifyContent: 'center', alignItems: 'center'}}>
  <Text>Content</Text>
<View>

That’s pretty easy, no need to remember any rule, just set everything to “center” and something will probably happen. But..

What about when we want to center our content only horizontally?

Well, I can explain what goes where and how to play nice, but I rather just hand you these three props: center, centerH, centerV.

I bet their names imply about their purpose, but I’ll explain anyway.

As before, you don’t really care about axises and directions. center will fully center the content to the middle of the view. centerH & centerV will center the content horizontally & vertically.

So the next few lines of code

<View flex center>
  <Text text10>Center of Attention</Text>
</View>`

will give us the following result

aligned to center

Flex

Another important modifier which is a must when I want to align content is the flex modifier.

Eventually all alignment rules based on the flex-box rules and if we want to align some text to the center of a view, we first need to make sure this view is stretched over the entire screen (or other given space).

As you’ve probably seen already in the previous examples where I used the flex modifier.

<View flex bottom right>
  <Text text10>Bottom</Text>
</View>

If I won’t use the flex modifier, the view will simply wrap the content (the text element in our case) and based its size (or height actually) on it, which means there will be no space to play with the content vertically. It will look something like this..

without using flex modifier

You can identify the view by the red color and see its height was not stretched over the whole screen therefor aligning its content to the bottom did not have any effect, the right modifier on the other hand did work because the view’s width is always stretched unless told otherwise.

Where do we go from here?

Modifiers are a great way to quickly build a screen layout without handling or knowing the basic rules of flex-box. It will save you time and unnecessary style objects that you’re not even sure how to name.

Having said that, I personally wouldn’t overuse it. Too many modifiers can affect your code readability and might be too difficult to maintain. When a specific behavior is unique enough or repetitive, a style object can be a good solution.

What’s Next?

Layout modifiers are only the beginning. Explore and discover other modifiers you can apply on the View component. Color its background, set its corner radius or adjust its padding/margin for spacing.

Learn more about modifiers at our RNUILib site