Getting Started with React Navigation v5 in React Native | Stack Navigator Tutorial

hey guys welcome back to my youtube channel today in this tutorial I'm going to show you how we can implement react navigation version 5 into our react medic project so if you want you to my children and interested in this kind of tutorial then hit the like button and subscribe to my channel for more tutorials like this I have also made tutorials on react navigation Version three and four and I do make videos on flutter as well if you are interested in to that also I do videos on web design web development and what press related tutorials so if you are really interested into these kind of technologies then make sure you subscribe to my channel for more tutorials so without wasting any more time let's get started with the tutorial so as you can see over here this is the official documentation of react navigation and over here we can see the current version is five point X so five version is stable now and it is just launched this month in stable version so what has changed the main changing part is the dynamic API that means everything is changed down we have the component based navigation so totem structure is changed for the reactivation so we need to start with during storage and process so for that I need to go to the docks and over here we have the installation process so first we need to install it by using this command so I am just copying it and over here I will paste it now hit enter it will install the package so it has been installed over here and now I need to install the dependencies so these are the dependencies which I need to install so I am just copying it again and pasting it over here so there are not some dependencies these dependences also has been added properly so now let's see what else we need to do so now we need to move to the I Wednesday after E and we need to run this pod install command for iOS so over here first navigating to I Wednesday after E now pod install so it has been completed to go back to the root directory of our project now we don't need to do anything for iOS we need to just copy these two lines for Android project and we need to s these two lines into our Android app built dot Gradle file so we need to never get to Android then app folder within that we have this field cred and fine so within the app directory we need to add those lines into this build dot Gradle file not into this build on trade and which is within the Android directory within this app directory we will add this too in this big dot cradle fine and within the dependency section which is over here we will add those two lines so it has been added now save it close it and solve for the android now we need to import this react native gesture handler to our entry file which is the index case so over here at the top we need to add this import and you need to remember it's at the top and there's nothing else before it right so you need to make sure that so I have saved it okay and now after having this file we have some error over here so don't worry about it it will be fixed in a minute so now what we need to do we need to import this navigation container okay and guys let me tell you I'm showing you the steps from official documentation because this is the ideal place to look into if you have any kind of issue and all and for the installation process as well like maybe after few days it gets changed then this is the section where you find that exact comments and all so that is the reason I am guiding you through this process now what we need to do we need to import this navigation container from Vietnamization just copied it I'll paste it over here and let me just clean this extra cords from here so I have made a home screen over here and now I will create the app so the app function will be wrapped by this navigation container right navigation container and within the navigation container we have to provide the different kind of navigator so in this tutorial I'm going to show you on DITA stack navigator so for the stack navigator you can go to this moving between screens or hello react navigation also so for a stack navigator I need to install it so to install it we need to copy this command and paste it over here and make sure you are in the root directory of your project so it has been installed properly now we can use the stack navigator this is the stack navigator option so I'm just copying this code from here and paste it over here our component is home screen which is over here and our stack screen will be home so now save it after seven eight you should see the screen but it is not refreshing properly so let me just close this metro bundler UI and we compile the project is an error because I haven't imported that stack right so we need to import that to import it we need to import it from react navigation stack and also we need to create this stack constant so now save it now it has been built successfully so we can see our home screen and this is our home header so what else we can do into this stack navigator we can add some other screens to move between screens so I am just copying it and it will be very detailed screen and over here I will use a button and the button will say go to data screen so this is our button after clicking on this button we should be on that data screen okay so for that over here I will copy this and make this two details and it will be details screen that's it and to navigate it it will be on place and within on place we have to provide the navigation and we can pass this navigation prop over here and it will be navigation dot navigate and the name of the screen which is details so now save it now after clicking this button we are in the data screen page right so that's how we can move between screens now what else we can do what are the other options we have so as we can see we have this navigation navigate to navigate to different screens also we have some other way to navigate between screens so let me show you some of those so over here I am creating some other buttons in the detail screen so first will be go to data screen again because we got to load the screen again into our stack so to do that we will push that data screen another one will be go to home so whenever we are we will directly go to that particular screen by using this navigate and another one will be go back so over here you can delete it and it will be go back by using go back we can go back to previous screen and another one I will use go to the first screen so whatever screen we are presenting we will go to the base screen of the stack so to do that we will use for to talk so now save it now let's see we are in the data screen if I click on data screen again then can't find the value again navigation okay so I forgot to pass the navigation over here so same date now click on the data screen again so you can say that detail screen is again pushing into the stack so if I click on the back button then we are still in the details because our the touchscreen in this track right so if I click into the go to home then we are directly into the home page if I click to go back so this button will work as similarly as this button this back button and if we click on this go to first screen then we are in the home screen which is our first screen of the stack right so let me grab my charger so now we have seen how we can move between different screens right so now what else we can do we can definitely do some styling over here as you can see this header section this is the default one when it is not looking good so I want to change it so for that we can do changes in two sections so first one is the stack screen so we can apply some styling over here in the stack screen and that styling will be applied into the screen only and if we want to have similar styling for all these screens in the stack then we can apply that styling into this stack navigator so let me show you that first into the screen so options and for the options we can provide the header style and for the header style I can use a background color and the background color is this one of my choice and then for the text color I can use this header tint color and it will be white and for the title style I can use font weight as bold so now says it now we can see it is looking much better but now if I go to the teeter screen then we can see the data screen is still having the default styling we don't want that I want to implement this styling for all the screen into this stack navigator so to apply that we just copy these styles and use it over here we can use it into this stack navigator and to use it we have these explained options property and over here we can is same styling okay so now we can see for our data screen we have the same layout same styling right and another thing we can do we can provide a different title for our screen so currently it is home and the title is fetching from this name attribute if I want to change it then we can specify in this title over here and it will be : so this is the overview so that's how we can manipulate and change the stack navigator styling now let me run this project into our Android emulator as well and this is the Android emulator which is Google pixel 2 device and to run this the command will be NP x react native run Android okay so our project is running on Android emulator and we can see the co2 data screen button and if I click on this then we are going to the data screen and now I am back to the home screen okay so all the buttons are working as expected so this is it guys this is the tutorial so in this tutorial we have learned how to install the react navigation version 5 into our react native project how we can implement the stack navigator and how we can move between different screens and give some styling to our screen right so if you found this tutorial helpful to you then hit the like button subscribe to my channel for more tutorials like this and don't forget to comment down below if you have any kind of science or requests for my next videos and I will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 110,421

Keywords: react navigation 5 tutorial, react navigation 5, react navigation 5.0, getting started with react navigation 5, react navigation 5 stack navigator, stack navigator react navigation v5 tutorial, react native react navigation tutorial, react navigation version 5 tutorial, react native stack navigation tutorial, react navigation for beginners, stack navigator react native, stack navigator react native example, how to install react navigation in react native

Id: a9jSyZXYGn8

Length: 14min 45sec (885 seconds)

Published: Fri Feb 21 2020