React Native Tutorial #17 (2021) - React Navigation V5 - Stack Navigator

hi welcome to programming with mesh in this session we will get acquainted with react navigation which is used for routing and transition between screens and in this part we use slack navigator to switch between screens so that it gives us the feeling of working with screens in android and ios [Music] in the preview session we learned how to create and use custom components and we did we were able to create a button and head their component to our locking in mobile apps pages pile up and it's like filling a stack so whenever we leave the current page we see the previews page for example if we open screen a first and then a screen b in fact a screen a still exists and has just gone backwards so if we exit screen b by pressing the back button we will see a screen a again to use this feature in react native we use react navigation first we go to its website and copy the installation command from the docs section we enter it in the terminal to be installed react navigation is made up of some core utilities and those are then used by navigators to create a navigation structure in our app now depending on whether we created the project with expo or with react native cli we copy the command to install the dependencies related to react navigation so now to use the stack navigator we go to this section and copy the installation command to enter in the project [Music] well now we delete the items from this page that we don't need [Music] i create the app function and to use navigation i use the navigation container component inside make sure this component is imported from react navigation native the navigation container is responsible for managing our app state and linking our top level navigator to the app environment the container takes care of platform specific integration and provides various useful functionality deep link integration with the linking prop notify state chains for screen tracking and estate pair systems handle system back button on android by using the backhandler api from react native now we need to wrap the whole app in navigation container first i define a cons to create a stack inside it we need to import this function from react navigation stack now from the stack we created we create a navigator and we create a screen inside it for this screen i consider a name for example a screen a which represents the first page now we need to specify a component for it to make the screen elements i create a component inside this file its name may differ from the name we chose for the screen i take the page too simple to just figure out which screen we are on we use this function as the screen component now run the app to see the result well as you can see the app run with a screen called a screen a i style the component we created to make it look better well now i copy this function to use it as a second screen i call it a screen b in navigator i create another screen and change its name and component to a screen b now i create a button below the text of a screen a to go to the second page by touching it to do this i use the pressable component i define s style for it to be a separate button now in onpress we define a function for it that takes us to a screen b in order to use the navigation feature inside the components we have to consider the navigation prop as its input argument now we use the navigate function and inside it use the name of the desired screen [Music] as you can see we enter the screen b by touching the button and because a screen a is behind it by pressing the back button on the header we return to the previous screen the back button on the header only appears when there is a screen to go back to now on screen b below the text i create a button to work similar to the back button on the header i copy the previous button and use it similar to the previous component we create an onpress handler function and this time we navigate to a screen a in fact because a screen a is before a screen b square b exits the stack we can do this in another way the go back function actually does the same thing as the back button on the header if you use the replace function instead of navigate the current screen will be replaced by the desired screen and will exit test stack itself so there is no more back button on the header because screen b is the only item inside the stack and if i touch this button it will give us an error because it's not possible to return to the previous screen well i will return the button to the same state and refresh it so that we have both screens this header is created by default with the screen we created if we want we can delete it from each screen separately to do this we use options prop we did this for a screen a and a screen b should actually display the header as you can see there is no header on a screen a but there is on a screen b we can also do this once for oled screens to do this we must use the screen options prop in navigator as you can see the header has been removed from all screens so there we go we learned how to work with stack navigator in react navigation so in the next video we will talk about other users of react navigation now if you enjoyed the video please don't forget to like comment share and subscribe and i'll see you in the next session

Channel: Programming with Mash

Views: 14,069

Keywords: stack navigation react native, stack navigation react native v5, react native navigation, stack navigator, react navigation version 5, react native navigation 5, react navigation version, react navigation, react navigation 5, react native 2021, programming with mash, react native, react, tutorial, react native tutorial, react tutorial, react native tutorial for beginners, react vs react native, react native navigation between screens, Navigate between screens react native

Id: 2ouN6xeF6Hk

Length: 9min 50sec (590 seconds)

Published: Tue Mar 02 2021

Reddit Comments

[u/sharifimehr]

In this session, we will get acquainted with React Navigation, which is used for routing and transition between screens.