How to Add the First Screen to a React Native App

[00:00 - 00:04] In this lesson, we are going to build the first screen in our app. It will look like this.

[00:05 - 00:12] 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.

[00:13 - 00:20] Right now in our app.js, there are three screens components that we use for learning about navigation. Let's clear all that.

[00:21 - 00:35] Now, let's create a screens folder. There we create an index.js file that will export our screens.

[00:36 - 00:40] First we have to create our screen. It will be named "Start Screen.js".

[00:41 - 00:50] 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.

[00:51 - 00:56] In fact, the logo component is the only one that is missing. We will add it later.

[00:57 - 01:02] We can start by adding the header component to the screen. Let's put login template text inside it.

[01:03 - 01:13] Now we need to export the screen. We do that in our index.js file.

[01:14 - 01:19] Once that's done, we can add the screen to our stack. We change the name to "Start Screen".

[01:20 - 01:25] It is important to change initial root name prop also. Otherwise, we'll get an error.

[01:26 - 01:35] Let's run our app and see if it works. We can see that our header is there, but it is displayed on the top left side of the screen.

[01:36 - 01:43] We can change that by adding styles to our container. We can copy those styles from app.js and move it to our Start Screen.js.

[01:44 - 02:01] Now let's add container style to our view component and see if that works. Perfect! Our header is centered.

[02:02 - 02:08] The next step is to attach below the header. We already created a component called paragraph that can be used here.

[02:09 - 02:13] Let's put some text inside it and see if that works. Excellent!

[02:14 - 02:21] Our screen is looking much better, but we still need to make it more interactive. The best way to do that is to add buttons to it.

[02:22 - 02:27] We are already prepared for this since we created our own button component. Let's use it here.

[02:28 - 02:32] The first one is the login button. We pass prop mode outlined to it.

[02:33 - 02:46] If we take a look, we can see that the button has been added to our screen, but it takes up too much space. This is because our container isn't perfect just yet.

[02:47 - 02:55] Let's fix that. We need to create a component that will be used as a wrapper for all our screens so we don't have this problem in the future.

[02:56 - 03:06] Let's create a file called background.js where our wrapper will be. For the purpose of this course, I created this little wrapper to solve our problem.

[03:07 - 03:20] It adds some extra padding and set the maximum width for our screens. It also uses keyboard avoiding view, and I will explain why in the next lesson when we are dealing with inputs.

[03:21 - 03:25] Let's use this wrapper on our screen. We can remove previously defined styles.

[03:26 - 03:41] After refreshing up, we can see that the login button is nicely placed. Sign up is our second button.

[03:42 - 03:59] The difference here is that for this button, we must use the contained mode, so it will look more like a primary button on the screen. By primary button, we mean the interactive part of the user interface that stands out, and which users will be more likely to click.

[04:00 - 04:12] It looks amazing, but we are still missing a crucial part of our app. The logo component. Let's create a logo.js file and create our component there.

[04:13 - 04:22] The code isn't really complicated at all. We just use the image component provided by Reag Native and add some extra styles to it.

[04:23 - 04:29] Make sure to create an assets folder and put your logo file there. Otherwise, nothing will show.

[04:30 - 04:40] Now we put our logo component on top. In this lesson, we successfully created the first screen in our app.

[04:41 - 04:55] Right now, the buttons do nothing, but we will take care of that in the next lesson, where we will start playing with inputs and other exciting stuff. Thank you and see you in the next lesson.