React Native Tutorial #20 - Stack Navigator

or rather my friends so we've spoken briefly now about how stacked navigation works and how screens can be stacked on top of each other and then popped back off the stack now we need to create a stacked navigator in our app something that controls the navigation stack and that is going to control how we then navigate between the home screen and the review detail screen okay now to do this we're going to have to install one more package and that is the react navigation stack package so come down here to your terminal and say NPM install and it's react - navigation - stack so when we're using different types of navigation we install a package for that type so this is stack navigation but there are different types of navigation like later on we're going to do draw navigation and for that we'll install a separate package this way we're only installing the packages that we need okay so install that first of all and then when that's done we can go ahead and use it so that's the install now and I'm gonna close this terminal and then I'm going to create a new folder in the root of our project we can cross that off to do that click on this icon create a new folder called routes or routes you can call this what you want I'm going to call it routes in there I'm gonna create a new file and this is gonna be called home stack so home stack dots j/s okay so in this file is where we're going to configure our stack navigator now the first thing we need to do is import the stack navigator or a function from reacting navigation stack the thing we just installed and the function we're going to import is called create stamp navigated that is the function we use to actually create a stack navigator so let me say import and then create stack navigator and this is going to be from react - navigation - stuck so that's the first thing we need to import right there the second thing we need to import is create app container and we'll talk about that a bit later on for now I just want to import it so create app container and that is from react - navigation okay so that was the first core library pre-installed that is the one we've just installed now okay so down here we can now create our stack navigator so what we'll do is create a new constant and we're going to call this whole stack and I'm going to set it equal to create stack navigator so that's the function up here that we just imported so this is the function that is used to create a new stack navigator and what we have to do is pass an object into this function and this object is used to configure what different screens we want to register for this stack navigator so for example we want the homescreen and also the review detail screen to become figured inside this stock navigator now instead of directly placing the object in there what I'm going to do is create a new constant up here called screens and set that equal to an object and we'll configure in here and all we'll do is pass in screens into that I'm just doing that because it's sometimes a bit tidier to you know externalize this object rather than just nest everything inside this create stack navigator function so what we need to do in here is several key value pairs and each key value pair is to configure a particular screen so the key is going to be the name of the screen that we give it now I'm going to call the first one home you don't have to call it the same name as the component I can call it you know default if I wanted to right but it makes sense to me I've got a home component home screen I'm going to call it home so this is going to be an object and then inside the object we have a screen property to say okay well for this particular route off screen what components or screen do you want to show well I want to show this home component this home screen right here so I need to import that first of all so up here at the top I'm going to say import home and it's going to be from and dot dot forward slash to come out of the routes folder then into the screens one then we want home and down here now I can say we want the home component to be the home screen so that's what we're doing here we're configuring a route or a screen that we've named home and we've said that when we navigate to this we want to show this home component on the screen that's what we're really doing so that's the first one done the next one is going to be font review details so again you can call it what you want you can call it details if you want I'm going to keep it the same name as the component it just makes sense to me to do that so review details and that is going to be equal to an object again this time the screen is going to be review details this thing so let's import that as well import review details from and then Doc's come out of the current directory forward slash and we want to go into screens and then we want the review details okay so now we can add that here review details and that's pretty much it we've configured our screens now so we're saying okay well in the future when I use the navigator to navigate to this option then take me to the home screen when I use the navigator to navigate to this thing then look for this component and show that on the screen that's all we're basically doing and we're passing those screens into the stack navigate this creates for is a stack navigating out okay and we're storing that inside Homestuck now this at the minute by itself isn't really going to do anything what we have to do now is wrap this in an app container so let me do that first of all and by the way we're going to export this as well so export default and it's going to be create app container and we pass in the home stack so the configuration for our navigation stack so we pass that into this function that creates an app container and that app container now basically returns a component that we can render to a PA and it contains all of the information about the navigation stack so all of that built into it so when I render whatever we export here to app KS it's going to look at the Navigator and it's going to say okay well by default I'm going to show the homescreen because that's at the top of the stack whichever is the top one in this object right here that will be the screen to show by default so if you put a few details at the top it would show review details but in the future when we navigate around now in the place of that component that navigator component that this returns and we're going to place in ArcGIS if we navigate to a different screen in that place it's going to show that component instead make sense so we've exported this the next thing we need to do is import it so this is the default export we can import is whatever we want to import it as in the app.js file so I'm going to say import navigator from and we want to go into the routes folder so dot forward slash routes and then forward slash home stuck ok so again you can call this what you want because it was a default export makes sense to me to call it the navigator and then instead of outputting the home component directly we're going to output the Navigator right so this component right here is what is returned from this and it contains all the configuration of our stack navigator so when we're rendering this right here react native is going to look at it and say okay well what screen do you want me to show by default well since this is at the top of the stack right here in the configuration then I'm going to show this one and if in the future you navigate to review details if you tell me to do that then I'll show this one and we'll see how to do all that later on but for now this is going to be the default screen shown so I'm gonna save this now it's not going to work out of the box you'll notice at the minute this is not reloading and that's probably because we have an error in the original terminal remember this is where we installed some stuff but if we go back to the other terminal we can see a lot of red text there's era and that's because we've installed a load of new packages and what we need to do is actually cancel out of the process and then restart it so I'm going to say Expo start again and while that's running I'm going to click on this and I'm going to cancel it and then the new dev tools has opened up over here so I can say run on an Android device or emulator again so hopefully it should start up again with those packages installed now and our home stack and it should hopefully show the home component in the place of this so fingers crossed and we have an error and it says it can't find create stuck navigator so let's have a look over here ok we've made a little error with the spelling up there so let's save that again and hopefully this will work now and we see the home screen over here not only do we see the home screen we see this bar at the top this header now this header comes along for the ride automatically when we use a stack navigator and that's pretty awesome and in the future when we navigate between different screens we're going to be able to see a back button in the header that we can click to go back to the previous screen so all of this functionality comes along for the ride in a stack navigator automatically so we don't have to worry about creating that header we can just use this one right here and configure that later on and I'll show you that in a few lessons time for now what I want to show you is what happens if we switch these two things so if we put review details at the top I'm going to save that now and wait for this to reload and now we see the review detail screen is the first one to appear that's the default screen now because it's at the top and it's in the place of this thing right here now we don't want that we want to have the home screen as the default one so let me just undo all that and save it like so and now we have our home screen back so there we go there is the stack Navigator setup now we just need a way to navigate around now from a bird's eye perspective the app is gonna look something like this at the minute we have is the root component at the top and in there we've nested that navigates a component which remember contains all the information about our home stack and that home stack registers those two different screens the home screen and the review detail screen right so that is bringing up the home stack right here and allowing us to show by default the first screen registered which at the minute is home and it's going to allow us in the next lesson to communicate or rather navigate to the review detail screen and the back now at the minute the one thing missing is this about screen that's not included in any of this so it's probably feeling a bit left out at the moment but in the future we are going to use a different type of navigator which is going to allow us to navigate to this screen as well but for now the stack Navigator that we have is going to allow us to navigate between these two different screens and we'll see exactly how to do that in the next video

Channel: The Net Ninja

Views: 153,036

Keywords: react native, react, react native tutorial, tutorial, react native for beginners, react tutorial, react native tutorial for beginners, beginners, react vs react native, stack navigator, react navigation

Id: cS4PgI3zBzY

Length: 12min 6sec (726 seconds)

Published: Wed Dec 18 2019