Translating a Design to a Flexible React Native App

Published: 27/02/2019
Author: Vidatec

Jordan DuncanReact Native is one of many cross-platform frameworks that assist a developer in creating an app that utilises native UI and has a high level of code reuse between platforms. It accomplishes this by acting as a renderer on both iOS and Android for the React framework, which itself has the advantage of allowing web developers to get started in the world of mobile development using familiar concepts.

At Vidatec, we utilise React Native for a lot of our projects, both internally and for our clients, so much so that we have produced our own template that initialises a React Native app that includes navigation, unit testing, end-to-end testing and global state management among other features. This allows our development teams to quickly get started on new projects as well as ensuring that our apps have a familiar, predictable file structure to aid in both onboarding and support time.

Part of our React Native push includes developing our in-house skills on the platform. Our developers come from a wide variety of programming backgrounds; some are experts in Objective-C/Java, some came from the web world, some even feel at home developing native desktop applications (if you can imagine such a thing). As we believe it is important to make sure our developers have a chance to cross-skill and learn within Vidatec, we run monthly workshops, currently focusing on React Native. One of our latest workshops focuses on the React Native layout system. We believe this is an important foundation for building visually scalable applications that look and perform great on any screen size.

The Layout System

React Native utilises a very web-like layout system, making heavy use of Flexbox to control the flow and sizing of individual elements on-screen. This gives a head-start to web developers as they already conceptually understand the Flexbox system, however it is totally new to native mobile developers who may be used to visually creating screen layouts in iOS Storyboards or working with XML in Android Layout files. There are a log of great resources online dedicated both to the React Native layout system and to learning Flexbox, a personal favourite of mine being Flexbox Froggy, in which you are exposed to many features of Flexbox as you attempt to complete a series of challenges.

Design to Code

An important skill to have when developing a cross-platform application is the ability to take a static design from a designer and turn it into code, ensuring that it will adapt correctly to any supported screen size. Typically, this is done by focusing on margins/paddings rather than widths and heights, unless of course a component should have a set width or height, such as a title bar or a button. As part of our aforementioned workshop, we envisioned a simple feed item from a social app.

I wish there was an easy way to make cross platform layouts

The first step of converting the above design to code is to break it down into its component parts. We infer which elements align with which other elements and which parts should expand to fit either content or container. For example, when we break the design down into flexbox rows (blue outline) and columns (green outline), we get the following:

rows outlined

Now let’s split these parts out into individual components so that we can define their behaviour more easily, starting with the lowest level components.

TitleTextContainer

This is a column view that contains two Text elements. It should match the height of the container it will be put into (in this case, a row with the user image) so we don’t need to add any height values to it. As for the text, it needs to float in the vertical centre of the container and be pinned to the horizontal start. This will be relatively simple:

ActionContainer

This is a fixed-height row view that contains two Text elements. Each element should take up half of the width of the parent, so we will use flex: 1. Again, this is a simple component:

Now we can move up a level in our design and use these components.

FullTitleContainer

As we have already created our TitleTextContainer view, we can ignore its internal layout and when we do that, it becomes clear that all that is necessary is a row view that contains a fixed size Image and the TitleTextContainer that will flex to fit the remainder of the FullTitleContainer:

PostContentContainer

Similarly to the FullTitleContainer, now that we have dealt with the ActionContainer, all we are left with is a column view that contains a dynamic height Text component and our ActionContainer. As the container will expand to fit its contents (the contents will not expand to fit the container), we do not need to apply flex values to any content:

One thing to note here is that we have added a paddingLeft of 70 (image width 60 + padding 10) to the container. This is in order to bring it in line with the title text when we add it to the main component.

Putting it all together

Now that we have produced all the component parts, it is clear that the full component just consists of a column view that contains the FullTitleContainer and the PostContentContainer.

As you can see, it only requires an understanding of flexbox to allow us to create a flexible, cross-platform layout that will look and perform great on a range of different devices. If you’d like to look at the complete code, I have uploaded it as an Expo snack here:

https://snack.expo.io/@jrdndncn/vidatecrn-example2