In this lesson we are going to learn how to perform simple transitions between screens in our app.

In the previous lesson we created three simple screens to play with. Right now we are only displaying Screen1 and can't really do anything else.

Before getting into transitions let's make so changes to our screens to distinguish them. Each screen is going to display a <Header/> with screen index.

To understand navigation in our app we must start from the basics. Each screen in our Stack Navigator has the prop called navigation.

If we console.log(navigation), we can see that it contains various functions that dispatch navigation actions, like navigate which is used to move between screens. Here we can find a full list of available actions with a short description, and what they do. In this lesson I am going to show you how to use the most important ones.

In our project we will use four methods: navigate, goBack, reset and replace. I will be explaining the methods in detail once we will start coding.

navigate()#

Let's start with a simple transition from Screen1 to Screen2. For that we need to add a <Button/> to our screen. It will have an onPress action that will take us to the second screen. The easiest way is to call the navigate method with the name of the screen we want to go to. In our case it is Screen2. After clicking a button we move to the second screen, just as we wanted.