React Navigation is born from React Native community.Therefor react navigation’s stack is use for switching between different screens, it manages and store navigation history.
I am assuming that you know how to create a react native project, if you are not familiar with this then please check my previous article
1)Install react navigation library either using npm or yarn
npm install react-navigation
npm install react-native-gesture-handler
install react-native reanimated
npm install react-native-reanimated
2) cd project-name & npm start
In this article I will create two screens in start one will be login and others will be signup, both screens will have a button two switch between screens.
Let’s code for the login screen:
Now in app.js let’s import both screens at the top along with createStackNavigator.
createStackNavigator is a function that returns a React component. It takes a route configuration object and, optionally an options object.
Now let’s code for the navigator:
In react-navigation 3.x you have to createAppContainer to set the container of the app.
We are using this component in our app.js as this file is the entry point for our app and therefor every other component descends from it.
Now edit you app.js file like below
As our stacknavigator is ready and both screens are in the stack so let’s do the navigation from one screen to another i.e from the login screen to signup and from signup to login.
Let’s edit the login screen and pass navigation props to our screen.
Now when you press the button you will navigate to signup screen.
Now Let’s break this down:
this.props.navigation: the navigation prop is passed to every screen component in stack navigator.
navigate(‘login’): navigate is the function we call to navigate to a specific screen.
In the next lecture, we will discuss how to add a switch navigator in our app to check the state of the user.
To enhance your knowledge regarding advanced technologies tune to Morosoft tweaks https://www.mstweaks.com/.
If you want to be up to date with all what is happening in the world, Morosoft Tweaks is providing you all under one roof. We also aim to provide relevant information in a quick and sophisticated manner. Therefore you can contact us: firstname.lastname@example.org.