Navigation Between Login, Signup, and Home Screens

Image for post
Image for post

In my previous blog, I explained how you organize welcoming screens in your React-Native project. In this blog, I will show you how you can navigate from one screen to another by adding a link to each screen.

Let’s begin with setting up straightforward navigation actions, so each screen
allows the user to jump to another as follow:

  • When you are on the LoginScreen: you can navigate to both the HomeScreen and CreateAccountScreen.
  • When you are on the HomeScreen: you can navigate to LoginScreen.
  • When you are on the CreateAccountScreen: you can navigate to the LoginScreen.

Remember from the previous blog we are using the react-navigation-stack package which will carry down a navigation prop to each of your screens. We will be adding some buttons to direct the user between these screens.

Here, we receive the navigation prop and we use it to navigate to HomeScreen when you click Log in, or to navigate to CreateAccountScreen when you click Create Account.

The same thing goes for the other two actions and here is how they will look like:

Hope this simple navigation action example helped you in your frontend application, especially by using react-navigation-stack package that helped in moving from one screen to another. If you have anything you would like to add, please comment below.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store