React Native: Making A Beautiful Home Screen

In the last post, we learned how to use UI elements and how to style them. But we did not get a chance to design anything actually of use. So today we are going to design a home screen with a beautiful background, with a logo and two buttons. Have a look at the screen below.

Missed the last post? :

Check out Part 1: React Native: The Easy Way — Beginning

Check out Part 2: React Native: Styling Forms — The Easy Way (required for this lesson )

Beautiful Isn’t it?

This is what we will be developing today.

This design is the courtesy of Syed Raza Shah. It’s a free design and looks really professional, contains several elements that would be perfect for any application, as well as this tutorial.

This Screen Consists of:

1. A Background
2. A Logo ( backpack )
3. Small text
4. Sign Up Button
5. Login Button

Let’s start off by creating a new expo/RN project. Hopefully by this time you know the difference between them.

In this case, I’m using expo for simplicity. So two commands and we are good to go.

expo init <ProjectName>
expo start

You can learn the whole process on how to get started here. ( Very Simple )

Links for assets to follow along

App.js

As usual, let's start off with App.js file in our directory. Usually, I prefer to create a separate component for a page but since this is a relatively small tutorial, it should be fine.

Like always let's remove the unnecessary styling and components and it should something like above.

Now, let's import all the UI elements we would be needing for this page.

1. ImageBackground — We cannot use the regular Image component because it does not support nested components.
2. Text — You can either use text to type out the logo or use the image file given in the assets.zip file provided above. I am going to use the image.
3. Button — You know why

Extract all the files in the .zip file and place them in the assets directory of our app. It's a good practice to store all the images in one directory. We can also categorize these images into different directories.

Import the ImageBackground from ‘react-native’

import { StyleSheet, Text, View, ImageBackground } from 'react-native';

Now begin by adding the ImageBackground component as our top view. We will be nesting all our other views inside this component.

The ImageBackground component accepts props such as “source” and “style”. When using this component we need to specify the width and height for the image, if we fail to do so, React Native will throw an error.

For the “source”, point it to the background.png image in the assets folder. Also, create a styles object called “background” in the StyleSheet object.

Specify width and height as ‘100%’.

When using percentages in React-Native we have to enclose them in quotations

(‘ ’).

Now the code should look something like this.

Now its time to bring in the Logo. Remember that I told you we can nest Views inside the ImageBackground?. Time to test it out.

Create another View inside ImageBackground as such and let's add an image.

Let's not forget to import Image from ‘react-native’.

import {Image} from 'react-native'

Now styling an Image is a little bit tricky in React-Native. We will have a full-length post on that. For now, let's do this the simplest way possible.

Inside the View we add an Image component and we assign its “source” to the logo.png in the assets folder. Create a style object called logo and add it to the Image prop.

In terms of styling the image, I’m specifying the width and height and adding a margin on top and left to align it nicely. The Image also takes a prop called resizeMode and we are going to set it to ‘contain’. This prop makes sure the Image stays inside the View. Hence ‘contain’.

The code should now look something like this.

So far simple? The remaining is a cakewalk.

Now we need to add a text beneath the logo.

Same drill. Since we already have the Text imported from ‘react-native’. We can use it directly. And style it according to our needs. Most of the styling we are doing here, we have discussed it in the previous post. And till now everything we have used is almost direct CSS.

After adding and styling the text, our code should look something like this.

HomeScreen with Logo and SubText

Time for Buttons.

If you remember from the previous post, we cannot add a style prop to Button. In our case we need the button to be rounded on the edges and the color of the text to be different. So we can use TouchableOpacity to create our own button.

TouchableOpacity is used to make an element/view clickable. We can give button-type behavior to anything if we wrap it by TouchableOpacity.

By using TouchableOpacity we have much more leverage on how we design the Button. So lets import TouchableOpacity and begin using it.

import {TouchableOpacity} from 'react-native'

We can create our own button by wrapping a Text through TouchableOpacity. Now we can style the Text by giving it a white background, setting a borderRadius, color, width, fontSize, fontWeight and some overall padding and margins.

Repeat the same process for the Login In Button.

Now it should Look a lot similar to the screen we saw at the beginning of the post. Here is the updated code.

I got the color of the button by uploading the image to https://imagecolorpicker.com/

Lets add onPress functionality before we close. TouchableOpacity accepts a prop called onPress. This executes a function when the user presses the View inside the TouchableOpacity.

The implementation is very simple. Its as follows.

<TouchableOpacity onPress={this._onPressButton}>

Now lets display an alert whenever the button is clicked. So lets import Alert.

import {Alert} from 'react-native'

Lets add function names to out two buttons.

Now we can declare this functions inside our class. To use the Alert component we just have to call

Alert.alert("message")

There are different types of alerts ( two button, three button, etc ). But for now lets focus on just showing a simple message.

Now you should be able to press the buttons we created and get a alert!.

Complete Code:

The final output. React Native Styling: The Easy Way

Awesome!. We completed the screen and now we have the alert working. Next post we will discuss how to shift between screens so we can have a multi-page app.

Live Version for this project.

You can contact me at: Chsvk21@gmail.com

Resources Used: Syed Raza Shah ( Design )

Follow Syed Raza Shah on Instagram for more Design Inspirations

Check out Part 1: React Native: The Easy Way — Beginning

Check out Part 2: React Native: Styling Forms — The Easy Way (required for this lesson )

Thank You! Hope you had fun. See you next time.