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

It will look like this:

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.

return (

  <View style={styles.container}>

    <Header>Login Template</Header>

  </View>

);

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.

<Stack.Navigator

  initialRouteName="StartScreen"

  screenOptions={{

    headerShown: false,

  }}

>

  <Stack.Screen name="StartScreen" component={StartScreen} />

</Stack.Navigator>