This video is available to students only

Creating the first screen

Creating the first screen

In this lesson we are going to build the first screen in our app.

It will look like this:

start

It's the simplest screen to make because it doesn't have any inputs. We only have a logo at the top, some text and two buttons.

Right now in our App.js there are three screen components that we used for learning about navigation. Let's clear all that.

Now, let's create a screens folder. There we create an index.js file that will export our screens.

First we have to create our screen. It will be named StartScreen.js.

Let's add some basic code and create a <View/> component.

As you remember in previous lessons we already created some of the components visible in the picture. In fact the <Logo/> component is the only one that is missing. We will add it later.

We can start by adding the <Header/> component to the screen. Let's put Login Template text inside it.

Now we need to export this screen, and we do that in our index.js file.

Once that's done we can add this screen to our Stack. We change the name to StartScreen. It is important to change initialRouteName prop also, otherwise we will get an error.

 

This page is a preview of Creating a React Native Login

Start a new discussion. All notification go to the author.