react navigation 3.x?
The world’s latest technologies, policies, business-boosting strategies will be written here. Contact Morosoft

In this article, I will create a simple app just to show you how to implement react navigation in your app. I hope all of you guys have some understanding of react native apps and their structure. If no you can check out my previous article to know the structure of the project.

[ultimate_heading main_heading=”React Navigation:” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;”][/ultimate_heading]

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

[ultimate_heading main_heading=”Let’s begin the game:” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;”][/ultimate_heading]

1)Install react navigation library either using npm or yarn
npm install react-navigation
install react-native-gesture-handler.
npm install react-native-gesture-handler
install react-native reanimated
npm install react-native-reanimated

2) cd project-name & npm start

[ultimate_heading main_heading=”Now let’s code for our screens” alignment=”left” main_heading_font_size=”desktop:24px;” main_heading_style=”font-weight:bold;” main_heading_margin=”margin-bottom:10px;”][/ultimate_heading]

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:

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.

login-screen

Now let’s code for the navigator:

login-screen

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: info@morosoft.pk.

LEAVE A REPLY

Please enter your comment!
Please enter your name here