Getting Started with React Navigation v5 - Stack, Tabs, Drawer, Authentication

what's up folks my name is Spencer in this video we're going to be learning how to use react navigation v5 as far as I know react navigation is the most popular library to do navigation and react native and with this version 5 API things have changed a bit how we actually approach different problems and just how we write our navigators so I wanted to walk through the stack navigator bottom tab navigator draw navigator and building an auth flow in this video just to kind of show you what's the new workflow look like and what's this new API look and feel like so if you're interested in using react navigation to be 5 either in a new app or upgrading to it be sure to stick around ok before anything else let's go ahead and install all the dependencies we'll need so we're going to need the base react navigation slash native package we'll come back and grab these dependencies later that actually are needed to support a react navigation or react yet react navigation so I'm going to go through there we also are going to be using the stack navigator so we'll grab this package we're going to be using the drawer navigator will grab the drawer package and we're going to be using the bottom tab navigator so I'll grab that as well while those are installing we'll go back to the fundamentals getting started and then where you need to install all of these dependencies that react navigation uses to support everything it does I'm using expo in this example if you're using react native CLI same process you're just using NPM or yarn install versus X wheel install with that done we can run our project ok in just a little background I've got a project in the app directory i've got an index is what we're seeing here then also got a screen CAS which is just a bunch of screens that we're going to use to actually build this up we'll touch on this more but just know these are all here they're just very basic components that we'll use to actually fill out our as we go okay the first thing we're going to need to do whenever we worked with react navigation v5 and I'm assuming above is well first we'll delete what we have before so we can actually work on our app we're going to set it an import in which we import the navigation container from at react navigation slash native we also need to actually import our navigator which is going to be create stack navigator from at react navigation slash stack well then go ahead and import the two components or the two screens we're going to be using here we're going to set up a create account and/or a sign-in basically like an off stack so we're going to import sign in and create account from that forward slash screens now we need to create a component our component needs to be wrapped in our navigation container basically wherever we're using navigation we need to have a navigate navigation container at the root of that tree so inside of our navigation container what we can do is we're going to take this create navigator create stack navigator function and actually call that we're going to store that to a variable called auth stack we can then go ahead and use our off stack inside of our navigation container by saying auth stack navigator so that's going to be the parent and inside of there we actually specify the screens we want to use which we're going to be off stack dot screen all stack dot screen is going to take a name we'll give it sign-in and a component to render that's going to be sign it likewise we'll do the same thing for create account and you can see on our sign-in we've got a sign-in button and a create account sign in well neither of them are hooked up right now we can go ahead and do that by going into our sign-in is and then if we look in here when we press create account we want to go to our create account screen and since sign-in is registered as a screen with a navigator it's going to be passed a navigation prop on this navigation prop we can go ahead and say navigation dot push we can use push because this is within a stack navigator it pushes a stack navigator specific function and we can then specify the name of the screen we want to go to which in this case is going to be create account now if we go and from our sign-in click create account you can see we navigate to our create account screen now right here we can see in our navigation bar I've got sign in and create account those are just pulled from the actual screen name we can go ahead and override those by passing an options object inside of this options object we can pass a title and we can say sign in and we can just basically add a space to it do the same thing for create account and now if we look at it and go to create account we can see we've got that proper spacing and sign in and create account as well as the text in the back button next let's go ahead and create a tab navigator with two nested stack navigators representing kind of our normal app screen so what we're going to need is our profile screen and our home screen we're also going to import create bottom tab navigator from out react navigation slash bottom tabs now we'll just go ahead and comment out this off sack and instead we're going to go ahead and create a new variable called tabs and which we call create tab or create bottom tab navigator we can then go ahead and say just like we did with the stack navigator tabs dot navigator inside of there we're going to give it our screens tabs dot screen we're going to give it a name we've got home our component is going to equal home and we can do the same thing for our profile so we can see here we've got two tabs we've got our master list screen which is their home and then we've got our profile screen now right now we don't have a navigation bar and our buttons don't actually do anything so to fix this what we're going to do is create two new stacks we're going to create our home stack which is going to equal create stack navigator and we're going to create a profile stack which will also equal create stack navigator now we just want to give a component to our screen so rather than trying to build a component inside of here I'm gonna create a new variable called home stack screen and that's going to be a component which will render our home stack dot navigator inside of there we'll have our home stack screen which will give a name of home opponent equal to home and then we can take our home stack screen assign that to our home stack and we're going to do the same thing for our profile stack this time we're going to call it profile stack we'll update these variables profile stack navigator and profile stack not screen this time we're going to render our profile screen and then we'll take our profile stats screen component and assign it to our tab navigator so now we see we've got our home tab and we've got our profile tab with the appropriate navigators and let's actually change our profile stack to a search stack so I'm going to change profile stack to search stack and then I'm going to change profile to search and all the necessary necessary places and then I'm going to import search instead of profile okay so everything looks the same here except that I forgot to change that profile stack to search deck so now we should be back to where we need to be okay so we've got our example here we've got our different screens all of that stuff now let's go ahead and add second screens to each one of these stacks so let's go and import details and search - from screens and now we can go ahead and create a second screen on our home stack in which we are going to name this details and this is going to take details for our second search stack we're going to name that search too and assign it the component of search - so now everything looks the same let's actually go ahead and hook things up so from our home screen which we can go to we can see you've got two buttons one that's going to go to react native by example one to react native school what we want to happen here is when we press either of these buttons we say navigation dot push details now if I save this and I press either of these buttons we can see we need to actually define the variable of navigation and because this was home the home component was registered as a screen we know we're going to get a navigation pop pass to it so now we can go back and forth to it but rather than showing details at the top I want to show react native by example or react native school and the way we do that is by actually passing params when we press that button so to do that what we can do is as a second argument to push we can go ahead and specify the params that we want to pass so in this case I want to pass the name of react native by example and then for details are for react native school I want to pass a name of react native school so how do we use this well if we look at our details screen and details we'll just registered as a screen just like our master or our home screen this time though instead of accessing navigation I want to access route and with this we can actually grab different information that's passed or yeah that's passed to this screen so in this case what I want to do is access the route dot params because we're passing prams and then I want to try and grab the name so if we're out dot params dot name exists then I'm going to go ahead and render text of route params dot name so now if I go to react native by example we can see we've got details screen and react native by example likewise with react native school we can see that data there but that's not super helpful we're still seeing details up here let's go ahead and go to our index KS and where we define our home Stax screen we can again use our options this time though instead of passing an object we're going to pass a function this function is going to return an object and just like our route we can access or rather just like our screen we can access the route information here and here we want to pass a title or return a title that's equal to route params dot name now when we go to our react native by example it'll show that in the title and it'll do the same thing for react native school now if we look at our search tab we can see we've got two buttons here we've got search two which doesn't which hasn't been implemented that one we know is going to be pretty straightforward because we're just pushing a screen on our stack so all we need to do is access the navigation program that's passed to our screen and we can just call navigation dot push search too so now if I press search to will go to the search to screen what about this one where we go to react native school and basically what I want to happen is when we click react native school we jump from this screen into this stack into this detail screen with react native school so the way I can do that is once again using this navigation prop I can go ahead and say navigation dot navigate this time because I'm changing tabs we're not pushing a new screen onto a stack we're actually navigating to a different stack we need to use navigate navigates kind of our fallback it does basically everything but sometimes push may be more appropriate navigate in this case what we want to use because we're navigating from our search stack to our home stack so what I want to do here is I want to specify this I'm going to if we look back at our navigation architecture we can see we've got our we're on our search screen and I want to go to home so we want to Press Pass home as our first argument second we're going to pass an object for our parameters this time though we're going to specify what screen in our home stack we want to go to and if we look at it we can see where we actually want to go to our detail screen within our home stack so I'll specify the screen as details then I want to pass params just like we did before when we were pushing screens onto a stack this time I'm just giving it a key of params and then inside of there we'll give the object of the data we want to pass so on a pass name of react native school so now we're on the search screen if I press react native school you can see we jump to the home stack and we're on our details screen and if we press back it'll actually bring us to the root of that home stack which we navigated to next let's play with the drawer navigator so first thing I need to do is at the top of my file import create drawer navigator from at react navigation slash drawer now what we're going to do is have one drawer tab be this home stack tabs that we set up the other is going to be a simple profile stack so I'm going to go ahead and import our profile screen from screens and then I'll scroll down and before we do anything else I'm going to go ahead and create a profile stack which is going to equal create stack navigator I'm then going to say cost profile stack screen is equal to a component in which we render a profile stack dot navigator and then inside of there we'll have a profile stack dot screen the name is going to equal profile and the component will also equal profile okay with that done let's go ahead and set up our drawers well first off we need to go ahead and actually pull this tab navigator off as home tabs or just tabs because this is the only tabs we have in our app so rather than rendering it directly in here I'm gonna set up a new screen or a new variable called tabs in which I just go ahead and return that tab navigator that I had just below it now we can go ahead and actually create our drawer navigator so I'm just going to say constant drawer is equal to create drawer navigator now we can go ahead and say our drawer dot navigator inside of there we're going to have a drawer dot screen it's going to take a name we can pass home we'll pass a component this is going to be our tabs and then we can pass another one drawer dot screen name is equal to profile we'll pass a component equal to our profile stack screen so now if we render this oh we see we've already used tab so I'm going to call this tabs screen okay so cons tab screen and then I'll render that tab screen down here so now if we try to open our drawer basically all we have to do is swipe from the left edge by default we can see we got our home and we've got our profile and we can just alternate through them just like that now something else we can do is actually programmatically open up that drawer so what we can do is actually go to our home screen and we can see we've got drawer here and just like we've used navigation dot push we can go ahead and access the navigation dot toggle drawer and now when we save this well we can actually do the same thing on the profile screen so let's go down to profile and here we've got our drawer screen again we'll access the navigation prop because it was rendered with our navigator and alcohol navigation toggle drawer so if we refresh the app then press drawer we can see we can open up the drawer just like that and switch between our different tab or rather a different drawer screens okay finally let's set up an authorization flow where if a user's logged in we'll go to the home screen or this drawer navigator otherwise we'll go into the off stack so I'm just going to refactor this so we don't implicitly return from our component so basically what's going to happen is we're going to have a variable of if we're loading so if we're loading it means we're checking if a user's authorized and we're going to track all of this using state via hooks so I'm going to say react dot u State and this first variable is going to just equal is loading so by default we are loading when we're loading all we want to do is return our splash screen which is basically our loading screen so if is loading then go ahead and return splash our splash screen needs to actually be imported from our screens file so we've got splash there so now we just see this loading screen well let's say after a second we figured out okay this user is or is not logged in to simulate that what we're going to do is say react use memo or sorry use effect and inside of here we're going to set a timeout of after 1000 milliseconds we're going to go ahead and set is loading to false and then as a second argument to use effect we're going to pass a empty array because this doesn't need to ever run again just that initial time so now we can see for one second we see that is loading screen and then we'll go ahead and go into our navigation so next up we actually need to figure out how to sign in or if we're signed in so to do that we're going to set up another state variable in which we say react at use state and in here we're going to have a login token we'll just set it to asdf initially and again we'll use array destructuring here and we can say user token and then set user token so now what we can do is with this user token is if we have a user token then we're going to go ahead and render our drawer navigator if we don't have a user token then we're gonna go ahead and render our off stack so we have a user token if I go ahead and change this to no we can see we're in our off stack now how do we actually go about changing these things well to do that we're going to use contacts but before we get there let's set up our functions to actually let a user sign in sign out or sign up so I'm going to create a new variable called off context and in here I'm going to use react dot use memo and use memo is just allowing us to create this function that's then going to give us some functions to call to allow a person to sign in sign up or sign out and basically it's going to help this from being called multiple times just to try and make this a little bit more efficient and with that it's important just like use effect as a second argument to use memo we pass an empty array saying that we don't need to recalculate this but back to the point of this lesson of actually creating our sign-in function our sign up function and our sign out function so when we sign in we're going to set is loading to false and then we're also going to set our user token to some value sign up is going to be the exact same thing we're going to set loading to false and user token to whatever we're just simulating logging it for sign up however we're going to set is loading to false and then set user token to null just to simulate that we're logged out so the way we actually want to use this is by passing it down via context that way we don't need to try and pass props from our drawer navigator all the way down to our profile screen that's a lot our navigation may change we want to make this easy so we're going to use context what we want to do though is actually go into our app folder and I'm going to create a new file called taught context is inside of context I'm going to import react then we're going to export counts off context and in here I'm just going to call it react dot create context and I'm putting it in a different file because we're going to need off context and both our index KS and screen CAS and I don't want to set up a circular dependency there so I'm going to put it in a separate file they can each import from so now let's go up to the top of our file and let's import off context from that forward slash context now with our off context let's roll all the way down to our navigators I'm going to create an off context dot provider and I'm going to wrap this entire app stack in it for our value on off context top provider I'm going to pass the value equal to our off context that we defined right here off context is going to provide sign in sign and sign-out so with that complete now we actually need to enable signing in so let's go to our sign-in is screen and then in here what I want to do well actually first we need to import our off context in this file so I'm going to import off context from that forward slash off dot forward slash context and then going back to our sign-in what we can do is say Const we'll just call this off Const off is equal to react dot use context and then we just pass our off context to it now we know our off context is going to return sign in sign up or sign out so I'll just use object destructuring to go ahead and pull that sign in function off of off context now what we want to do is when a user presses a sign-in button we're going to call that sign-in function that we're getting from context regardless of where sign-in is in the stack we can easily access it via context so if I press sign in now you can see we go to the home screen and then if we let's actually refresh this and we're going to do the same thing for our create account screen we're going to grab this time sign up from our off context and when we press sign up we'll go ahead and call this function so now if I go to create account press sign up we can see we're on our home stack likewise let's go ahead and do the same thing out for our profile screen which actually has the sign out button so we'll go find profile which we've grabbed got here for signup I'm going to grab a sign out from our context and then we can go ahead past sign out or call sign out on that button press and now when I press sign out you can see it'll bring us to sign-in press sign in it'll bring us to sign up open up our drawer profile sign out we can see how that's working something we can actually do while we're testing this out is on our drawer stack navigator our drawer navigator we can find where that's defined we can actually specify an initial route name and say instead of being the homescreen window default to we're going to default to the profile screen so now when we go through and sign-in we go immediately to the profile screen so that we can more easily test all this out now one thing you may notice is when I sign in open up the drawer go to the home screen open up the drawer and go to the profile and sign out we have that navigation basically like we're pushing a screen I don't want that it's not bad but I don't want that so how do we actually go about and adjust that well I'm going to go ahead and create another stack navigator I'm gonna call this route stack and I'm going to call create stack navigator once again then I'm going to create another variable called const route stack screen in which we go ahead and render a new navigator route stack that navigator in here we're going to have two screens route stack dot screen we're going to have a name of off we're also going to have a route stack dot screen name is equal to app so for our components what do we need to do well we know we have our drawer navigator so let's go ahead and pull this out and I'm going to call this constant drawer screen in which we just go ahead and render out that drawer navigator I want to do the same thing for our off stack so I'll go ahead and grab this I'll find out where off stack is defined and then below this I'm just gonna go ahead and create Const of the stack screen in which we just go ahead and render out that off stack navigator now going back to our roots TOC let's go ahead and set our component to be rendered this is going to be our off stacks screen and then for app our component to be rendered is going to be our drawer screen so if I render this Oh actually I need to so we've defined this we actually need to render it now so I can render my route stack screen down here all right we see it but we see this a double header we don't want that so what we can do on our react stack screen is go ahead and specify that our header mode for this is going to be equal none which means don't render a header for that now when I go and press sign in nothing's happening and the reason for that is we're no longer using that user token to determine which screen should be rendered so our route stack screen needs to take a parameter of user token and then down here where we actually render a route stack screen we can pass a parameter or a prop to it because it is just a normal component in which we pass our user token so now we can say that if we have a user token go ahead and render our app screen otherwise go ahead and render our off screen so if I press sign in now we can see we go to our profile screen if I sign out it's gonna go to our sign-in screen but now we see that animation every time at least it's consistent this time which I like but I want to remove it to remove it all we have to do is pass some options to our screens so to our draw navigator I'm going to pass options and inside of this options object I'll just specify that animations animation abled is false and I want to do the exact same thing for the auth stack screen so now when I sign-in it just immediately jumps to our profile screen if I sign out it jumps over here create account we've still got that navigation but if I press sign up when we switch kind of our route are basically like our profiler the state our users in we're not seeing that navigation anymore all right I hope you found that helpful I know it was a lot of information a relatively short amount of time but hopefully it showed you kind of the workflow that you're going to have using react navigation and must say we touched on a lot of navigators there so I'll have a link to the code that I wrote in this video down below so you can look at it some more and also if you want to learn more about building react native apps maybe at a slightly slower pace I've got a course called react native by example and in that course we're going to build 10 unique apps using react native so that you can really get reps in and get comfortable with react native if you want to start building an app or you want to get a job being a mobile developer using react native I'd like to think it's a great course to get you up and running and using react native really well so I hope you enjoyed that video if you did consider checking out react native by example and be sure to subscribe to this channel and I'll see you in the next video

Channel: React Native School

Views: 156,393

Rating: 4.9331965 out of 5

Keywords:

Id: nQVCkqvU1uE

Length: 31min 52sec (1912 seconds)

Published: Thu Feb 20 2020