Getting started with React Native: Building UI

Building a User Interface (UI) for mobile apps is more difficult than doing the same for a web app. The reasons for this are :

• Mobile devices have limited screen size.
• Each type of mobile device (tablets, smartphones etc) is different from the other and they all require various kinds of support.
• Android and Apple have their own respective platform standards that a developer should follow. So an app built to work on Android devices will need its code to be changed in order to run on Apple devices.

We use React Native to build mobile apps.

What is React Native?

React Native is an open source JavaScript library that enables a developer to build cross-platform apps.

Installation

Before we start building the UI, let’s make sure that you have installed React Native on your system.

Click here and follow the steps carefully. Once you have successfully installed React Native, we can get started with building an UI with the help of React Native.

Let’s Take a Button Component

This component has two parts: the caption which says “Awesome Button” and the blue box with rounded corners surrounding the caption. In React Native, the box is declared in <TouchableOpacity />and the caption is declared in <Text />as shown below.

Style can be declared separately instead of doing it inside the class.

How To Layout?

Let’s try creating a Layout using React Native

A screen has 3 basic parts:

• Header
• Content Area
• Footer

The Header and Footer are similar since they both need to have a fixed height, a background color with white text and the user should not be able to scroll them.

The content area, on the other hand should have fluid height so that the user can scroll in this area.

<View />is used for header and footer and <ScrollView />is used for content area. <ScrollView />is same as <View />with the exception that the user can scroll with <ScrollView />.

The screen we get by writing the code shown above would look something like this:

This looks quite plain. Let’s add some color to it by adding the below style component.

The header’s height is always set to 56 because it is a standard for iOS devices. Our screen now looks like this:

There are still a few errors in this screen. The content area is not properly visible and the header and footer text is at the side rather than at center.

Flexbox

To position elements on your screen, you can use Flexbox. Flexbox is a layout module based on CSS 3.

The layout is divided into two parts: Container and Items.

Container and Items in Flexbox

Flexbox has separate properties for containers and items.

Container properties like flex-direction, align-items and justify-content set the layout rules for the items inside the container.

flex-direction defines the direction in which the items are placed in the container.

flex-direction

align-items defines the default behaviour for how items are laid out along the cross axis on the current line.

align-items

justify-content defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

justify-content

Item properties like align-self, flex, and aspect-ratio set the layout rules for a particular item in the container. Item properties take precedence over container properties.

align-self allows the default alignment (or the alignment set by a container property) to be overridden for an individual item.

align-self

By using the item property flex, which is a combination of flex-grow, flex-shrink, and flex-basis, our layout will now change to:

Use the align-items and justify-content property to bring your header and footer text to the center.

Our layout looks much better than what we had initially started with. But UI contains a lot more than just rectangular boxes and buttons.

What else do we need?

Icons

React Native has over 3000 icons which can be accessed from “react-native-vector-icons” package.

Writing the above code will get this icon:

ios-person icon

Custom Shapes

We can also design custom shapes in React Native using the “react-native-svg” package.

Custom Shape designed using “react-native-svg”

To get the above shape we will write our code as:

But is that all we need to build a beautiful UI? What about Tabs, Cards, Swiper…..?

Building apps using React Native would be much easier if there was a generic set of UI components. We knew this was essential since long back.

That’s why we built NativeBase, an open source UI components library for React Native.

In the above code, we are importing UI some components from the NativeBase library. Our screen will now look like this:

Resulting screen on iOS (left) and Android(right) device

Be sure to check out our NativeBase KitchenSink app to see the various UI components available in NativeBase library.

KitchenSink App on Android and iOS

Takeaways

Finally, we can summarize that:

• Building UI in React Native is quite similar to the web.
• Flexbox is necessary to build better layouts in React Native.
• Using third party libraries like NativeBase can help you save time that is used for development in React Native.

Thanks for reading. Hit💚 if you like the article.