React Native Tutorial #24 - Drawer Navigation

Key Takeaways

I'll rather than gang so in this video I want to take a side step away from stack navigation and talk about a different type of navigation in react native and that is draw navigation so currently we have stack navigation for navigating between the home screen and the review detail screen but now draw navigation is going to allow us to switch between home and about so a draw navigator is something like this where we have an icon like a Bergen Ave we can click it and a draw comes out and we have different screen options we can click on one of those for example about and it takes us to the about screen so that is draw navigation and it differs from a stack navigator because a stack navigator uses the whole idea of pushing screens onto the stack and pop in the back off now a draw navigator doesn't actually do that instead when we select an item from the draw it doesn't need to use pushing and popping of screens it just completely replaces the current screen with the new one so if we go from the home screen to the about screen using this draw we don't see a back button at the top and we don't pop that back off to go back to the home screen instead we just still see the burger nav icon and we can click that again and go back to the home screen so it completely replaces it right so essentially now we are going to have two different types of navigators we're going to have a stack navigator down here which is controlling the navigation between the home screen and review details and we're also going to have a draw navigator which will route between the home stack and also the about screen now there is a slight issue with this the draw navigator unlike the stack navigator does not automatically show a header so remember when we use the stack navigator we got that header in the top with the back button and we could customize that header a little bit the draw navigator doesn't come with that now it doesn't matter in the case of the home screen and the review detail screen because we already have a home stack surrounding knows which takes care of that but the about screen is not going to have that and we need a header because we want to show the little burger now icon in the header of this page as well so we can combat this by wrapping our about screen in a stack navigator as well and that way it will also have a header which we can customize like the other screens and it also means that if we did want to do any stack style navigation in the future from the about screen we could do right so now what we'll have is a draw navigator and that is going to be sitting at the top and it's going to wrap the other two stuff navigators now this means when we click on the home option in the drop it's going to show the home screen and then the home stack will be in play from there so we can use the stack navigator from there to go from the home screen to the review screen and back and then when we click on the about option in the draw it will show the about screen and the about stack will be in play so if we choose to use any of the screens for this step in the future that can take control of the navigation from there okay so essentially we're nesting these stacks inside the draw navigation so let's see how we can do all of this inside the code ok then so the first thing we need to do is install another package for the react navigation drawer much like we did for the stack navigation so to do that lets go to our terminal and inside the correct directory run npm install and it's react - navigation - draw like that press ENTER and install that package first of all now once that's installed we can go ahead and use it so I'm going to just close this down and open up the file tree and inside the routes folder I'm going to create a new file and before we actually do the draw navigation stat what I'm going to do is an about stuck because remember we said we're going to surround the about screen with a snap navigator right so much like we did for the home stack so all I'm gonna do is actually copy all of this and I'm going to paste it inside about stuck and now we can just go about editing this so first of all we need to import this create stack navigator we don't need the app container in this and actually in said Homestuck we don't need the app container anymore either because we're not going to surround our home stack with the app container or the about stack instead we're going to create a draw navigator and we're going to surround that with the app container so that can be rendered on the App KS component so let me get rid of that and instead we're just going to export defaults and it's going to be the whole stack here we're going to do the same thing for about so let me go to the abouts one over here and instead get rid of that and it's going to be about stuck now we need to whoops do this correctly for a start about stack we now need to change where we create these constants to about stuck and the default navigation options will leave as that for a second I think they're actually going to be pretty much the same as the other two screens so yeah we'll keep that and up here we need to get rid of one of these review details and we'll change this to about and over here the screen is gonna be about now here we'll say about game zone and we'll get rid of this comment we don't need that and then we don't need these two things but we do need to import the about component so import about from oops we need to spell that correctly up there about from and it's dot dot forward slash to come out of the routes folder then inter screens then it's about okay so now we have that import we've imported creates that navigator as well which we're using down here we're storing that in abouts that we're passing in the screens there's only one screen right here this one and then we're exporting about stuck at the bottom so we're exporting about stack we're also exporting home stack we don't have any kind of app container surrounding either of these at the minute but that's okay because what we're going to do is nest both of these inside a draw navigator now and then the container is going to surround the draw navigator that's going to then return as a component which we render in fjs okay so now it's create a new file and this will call draw a yes okay so now we need to create this drawn a vagator the first thing we need to do is import a couple of things at the top so we need to import create draw navigator and that is going to be from the package we just installed which is react - navigation - draw and the next thing we need to import is create app container the thing that surrounds the draw navigator so let's import now create app container and that is going to be from react navigation ok so we have those two things the next thing we need to do is create our draw a navigator so we'll store this in a constant and I'm going to call this route draw navigator ok you can call it what you want but for me this is going to be like the route menu the route navigation thing so that's why I've called it route drawn navigator that is able to create draw navigator and the same thing happens in here we pass in an object and configure the different screens so rather than create the object ok this time I'm going to just embed it directly into this method and the first one is going to be the home now this is going to be an option on the draw right so whatever this is called this is what will appear on the draw so this is an object and the screen we want to show for that is actually not really a screen it's the home stack so when we choose the home option on the draw we want to then show the Homestuck now by default that's going to show the home screen but it means then that the Homestuck is then in play and we can go between the home screen and review details and then after that one we also want to do the about option so about and that will be an object and the screen option is this time going to be the about stuck now we need to also import these two things let's do that up here oops that one's already been imported and I need to do the home once so import home stack and that's from dots /home stack okay cool so now we have this route drawn navigator with these two options these are going to show on the draw when we slide out and when we click home we're going to go to the home screen and the home stack will be in play when we choose the about option we're going to go to the about stack and that will be in play okay so now what we need to do is wrap this with the app container and that will return to as a component name which we can render inside a pas so let me now at the bottom come down here and say export default create app container and we're going to pass in the route draw navigator so we're exporting that now and we can go ahead and import it up jeaious so instead of importing the navigator from the home stack this time we want it from the draw and that's all we need to do so the navigator that we're now getting from the draw this thing right here is being imported and that is what we're rendering right here so react native is going to look at this and by default is going to look at the top option which is this and shows the home stack first of all the home stock shows us the home screen by default so that's what we see to begin with now I'm gonna save all this but it's not going to reload over here and again that's because we added a new package recently so what I'm going to do is go back over here cancel out of the process and I'm gonna run Expo starts again and that should hopefully throw up a new window the expo developer tools and I can see over here there it is I'm going to open up this and close down the current process we have going I'm gonna run on an Android device and then open this up and hope that this works now we actually get an error so I'm just gonna go take a look at my file so the draw over here about okay so this is a type should be screen not to scream so let's say that and then hopefully this will work okay so there we go so this looks like it still works and we're loading up the home screen by default and this stack still works over here now to open up the menu the draw menu we can just slide so click and hold and we can see those two things now and if we click on about it takes us now to the about screen and if we open that again oops we will make an easier way to open this in a future lesson we've got to the home screen it works so as you saw just then it was actually quite hard just to open this draw like this and to be honest a user might not know to do that so in the next video what we're going to do is create a custom header components and in that will add a little icon that we can click to open up that navigation draw