React Navigation V6 in React Native with TypeScript

hey guys today we'll be looking into how to  implement navigation into your react native app   all right so first thing we'll need is the  app itself so i'll just go through this   guide really quickly so we can just copy this  command and i'll just go ahead and name my app food delivery app once that's done let's cd into it  let's cd into ios and save pod install all right and that's done we can  just go back and say npm run ios so for me this failed and what i'm going to  do is just close this and say npm install   and then go to in ios and save all install  once that's done go back and say npm run ios let's rename the file to tsx now we can just go ahead and remove all of  this let's say view text restaurants app   and let's say we have a very simple menu  which is in View let's say Text profile restaurants and let's say explore let's add a style to it say styles content and now let's create those screens let's create a restaurant component which  will be just a card with the restaurant let's populate our Explore page with restaurants let's say in profile we'll just have and a button and in restaurants will  just have my list of restaurants so now if we want to look at the explore  screen we can just clean this up here and say return explore screen and of course we have to import react here is the explore screen  let's add some styles to it let's also add a title for each page of course you would put this into  a global variable because you're   repeating it all the time but for the  purpose of this tutorial we'll just   keep it simple so in order to see this  profile screen let's say profile screen and we have an error here let's  see of course has to be in text   here's the profile screen  let's add some styles to it and then same for the Restaurants  let's copy the container now in order to see our restaurant screen just  do this and now we see the restaurant screen   so how do we navigate between those so to  make basic navigation work just transition   from one screen to another we'll need  stack and what stack is is a component   that basically maintains a history of  navigation and allows you to transition   between screens so let's say we create a  very simple component which is called menu touchable opacity which we'll need from react native say text explorer and say restaurants and profile let's remove this  unnecessary things that we copied so now on press of this button go to explore that's what we have  to do with all of those links let's also rename this component to menu  and in restaurants let's import that we have a menu here let's add some style to links let's say also it's navigation here so of course don't mind the design of this  app the most important for us to understand   is how to create navigation here now what  we want to do is when you click on explore   restaurants or profile it goes to that screen   so let's head down to react navigation let's  scroll down and we have to install this of course do save because we need to   have this in our package package.json now  we need to install the appear dependencies now we can go to the ios folder and say pod  install so for android what we have to do is   in our main activity class so you  will have to go to main activity and just put this here and  also import this library here now we have to go into the app delete this and wrap the app  in the navigation container next thing we have to do is install this stack so  we can just continue here and copy this command   go to our root directory and say  npm install native stack save once   that's done let's go to ios and save pod  install and then let's relaunch the app so now what we have to do is to define the  screens of the app so we have to import   create stack navigator from native stack and let's  create our first stack so let's say root stack   you can call it whatever you want   and now what we have to do instead of showing  this we have to say root stack navigator   and let's define screens let's say screen  name explore component explore screen and let's do the same for restaurants and profile all right if we want our initial screen to be  something else we can just say initial route name   and let's say that we want profile to appear first   we can say that and just reload and  now our initial screen is profile   but for us we can just say by default it will just  grab the first one that it finds if we replace restaurants with explore and reload that you see  that we have restaurant screen but let's revert   that we just need explore here i like to define  this explicitly so there would be no confusion   so now if we go to our explore screen here and  add a menu we can see that our menu doesn't do   anything yet so let's fix that let's go  to menu so now in order to fix that we   have to import navigation from the screen  so only screens have this navigation prop so if we would want to use this  navigation prop would just have to   do navigation and then in the component itself  i use that navigation but instead of doing that   we can just use the hook that comes with the  library and we can just say navigation use   navigation and then here we can just  say navigation navigate restaurants let's remove this now if we click on restaurants  we can go into restaurants page   and see the restaurants page if we  go back here to explore we're back   at explore so this is basically how stack  navigation works let's do this for explore and profile now we can click around let's reload profile screen restaurants and explore will  not work because we are already in this screen   now if we would want to still go to the explore  screen from the explore screen let's say we have   a user profile screen and this user profile  can have other user profiles like in instagram   whenever you have a follower you can  go into his profile and then from   his profile you can go into his follower and  it's all nested so what we could do is say push let's reload that and if we go to explore it  will infinitely stack and push the navigation   of that screen we'll see how  to use that with restaurants   so in order to fix this typescript error  what we have to do is define the types   so if we go back to the app and here we can just  say export type root stack or amps and say explore restaurants and profile and then here  we can just use this type and then you have to go to menu and here  we can just say stack navigation prop   and then pass in here our root stack params now we have the navigation type if we say explores   it'll draw an error because there is no such  screen here now if we go to restaurants each   restaurant here should be a link to its own  screen so let's make a screen called restaurant let's make a very simple page so now this screen has to take in a name or id or  something which would identify the screen and show   information about this particular  restaurant so let's go back   to the app dsx and you find that there is  also a restaurant screen say restaurant let's say restaurant screen and now it will draw  an error because there is no restaurant in type   and in restaurant what we have to do is pass in  the name of this restaurant let's say name string   in the real world it would be an id or something  like that so you could fetch the real restaurant   information based on your server data but  for this example we can just say name here   so now if we go to the restaurant page itself we  have to define a type which will accept the name   and will be a navigation prop so what we can say  is type props equals native stack screen props and   here we just say root stack params and then we  define which of these screens is the restaurant   so we can just say restaurant and now here we  can just say react fc props and now inside here we can say name and then use this name in our  text so now let's go to restaurants and let's   define that this restaurant card is a button  which has an on press prop let's say on press a function let's say touchable opacity and let's say it executes on press function when on press occurs so now in the  restaurants what we can do is say on press and the same navigation and in the restaurant  screen itself we can use navigation as a prop   because it's a screen so we can  just say navigation navigate   restaurant and here we can also specify a type native stack screen props root params restaurants   and since it's a type we'll just say props and  here in the restaurants card we also have to   pass the name to the on press in order to know  which name was passed so let's say name string and now here we'll receive the name and here we  can just pass in our params which will be the name   as we can see here so we can just say name name or  just name so now if we repeat that for all of them and of course before we proceed here  what we have to do is go to the app   and see restaurant screen here it has to return  a view let's remove this and move it right here so now it will say that we don't have a name here  but we have two objects here navigation and route   so what we'll need is route and in the route   we have key name params and pap so we need  params and we'll see that we have our name here   let's select that now whenever we click  on the sushi restaurant for example   we'll see that it's a sushi restaurant if we  go back and click on the burger restaurant   we see that it's a burger restaurant and so  on now if we go to sushi restaurant and let's   say there will be related restaurants let's  see there will be text related restaurants restaurant card let's say name sushi one sushi two and sushi three and on press of  each of those we can grab the second parameter   navigation and say navigation navigate restaurant  with the name of sushi one and you could do   the on press function in the component  itself it really depends on your use case   but in case you want to be in control of what  happens whenever the card is pressed in your   parent component you can just do unpress so let's  say sushi 2 and sushi 3. now we have a sushi   restaurant with related restaurants if we click  on sushi 2 it will change the title to sushi 2 and   sushi 3. but this is not real navigation because  we can't go back in instagram for example whenever   you click on the user you can go back to that user  and check all of your history so in order to do   this here we can say instead of navigation  we can say push now if we click on sushi   and then click on sushi 1 we can see that  we have pushed a new screen on the stack   if we go to sushi 2 and then sushi 3 our  history is still preserved because if we go to   restaurant back we can see that  it's sushi 1 sushi 2 and sushi 3.   so this way you can nest the same screens inside  of stack navigator so stack is really the basis of   wall navigation now let's say instead of this ugly  navigation here we want a nice bottom navigation   on the bottom of the screen in order to do that  we have to install the bottom navigation so   let's just say npm install bottom tabs say save  let's go to cd ios and save pod install now let's   relaunch the app now we can go back to the  app and just say create bottom tab navigator so now if we go to the app we'll see restaurants  profile which we can click on and transition   between screens very easily now if we click  on restaurant it will give us an error because   there is no params name so we have to do  something differently here if we remove   restaurants and go to the restaurant screen  and click on the restaurant it will fail   again because the screen is not registered so in  order to solve this we have to nest navigators   we have to create a different stack navigator  for the restaurants page itself so whenever you   go to the restaurants this stack has to have  a history of all restaurants that you go to   and you have to be able to go back so the  history of the restaurant screen will be separate   but this stack will be connected to the  app using the create bottom tab navigator   let's try to do that so first things first  we have to also add this type here and now we   have to create a different stack let's say resto  runs stack and let's say create stack navigator and now this stack navigator will have  a different type restorance stack params so this will have two screens it will have the  restaurant screen and then a single restaurant   screen so we can just say restaurants  and restaurant now let's just copy this now we can set this type here so we have to  create a new component saying rest torrent screen and let's configure this  navigator let's say restorance stack and let's say restaurant stack does  screen first name will be restaurants and the component will be the  same as here restaurant screen and then there will be a restaurant a single  restaurant screen so let's say restaurant screen   so we also have to say navigator here   and let's say that initial route  name for this will be restaurants also let's fix this navigator and let's also rename this to restaurant stack and let's rename restaurants right here to be this now whenever we reload the app and go  to restaurants and go to a restaurant   go back you see that the state of  this stack is maintained so sushi 3   if we go to back to explore and go back to  restaurant stack our sushi 3 remains the same   this is because restaurant screen has its own  history now let's go back at what we did here   so there's root stack for amps which has all the  screens and then the restaurant stack has the   restaurant stack params which has restaurants and  then a single restaurant we renamed the stack to   be different in order to not be mixing restaurant  screen with the restaurant stack so now you can   see how this all plays in together our stack is  the main component but create bottom navigator   ties everything together so in the same way as  restaurants let's say explore also has a history   of restaurants that you can go to  so we can copy this stack navigator and instead of saying restaurants let's say explore let's create explore stack per amps let's say explore and restaurant and then here we can just say rest the run screen  and we have to rename this to explore stack params and now let's use this in the root  stack so let's say explore screen let's rename this now we have the explore screen and  also it came up with a warning that   there is a duplicate name for the route so  let's fix that and let's say explore stack and now in the root stack branch we also  have to say explore stack we also have   to fix one thing in the explorer screen as  you see it doesn't have the on press method   so what we can do is reuse the same logic as  we had in the and also we have to say this   and in the explore screen what we  can say is type props import this and let's say explores deck now in  the props we have to get navigation and same like in restaurants we can just do on press navigate to a sushi restaurant now if we go back to the app  and click on sushi sushi 2   we can go to restaurant stack click on burger  and click on sushi 3. and now in the explore   stack it's sushi 2 and in the restaurant  stack is sushi 3 all with different histories   so now you see how those stack navigators came  into working with each other now if we want to go   from explore stack to some restaurant in  a restaurant stack we can go to explore   and here for example just as a test say navigation  navigate restaurant stack here say screen restaurant and here say params hello from explore  now if we go to restaurants near you and there   is a sushi restaurant we click on that and we  can see that we are now in the restaurant stack   which says hello from explorer if we go back we  are in the restaurant screen because this is the   parent screen so in order to fix this typescript  area here what we have to do is go to the app   and say navigator screen params and  pass in our restaurant stack for amps   what we also have to do is according to the  documentation we have to set the all the screens   that don't have any params to them to undefined so  we can leave this as is because if we would put in   undefined here this would mean that this  object would be optional but for restaurant   what we have is name which is required  everywhere so we have to leave it like this same for restaurants same for explore now  if we go back to the explore screen   we will not see this error anymore and if we type  in something else we'll see that there's an error   because there is no such screen defined in  typescript and we can check that it works   yes we are redirected to the restaurant stack  hello from explorer now let's say we want to   style the tab bar icons we can do that right here  so first what we'll need is just a couple of icons let's create a new folder icons say explore icon profile icon and the restaurant icon now you can just go ahead and copy this from  my github which i'll have in the description   so now what we need is this library here  so let's just go ahead and install it and by the way you have noticed  that there is an error right here   so to fix this error it's just not finding  children or not treating children as if they   are a gsx object so what we can do to fix this  is say npm install types react native save dev now if we go back to this code here   you'll see that now we have no  error what we have here is also   saying that we don't have explore screen which is  which is true we have explore stack so let's just   fix this here now let's go back to the profile  icons go ahead and copy this in also to explore we'll need this now if we go back to app we  can also remove this type here so we have those three menu items here   so let's start with the explorer  stack we have the pattern options and then options we have to say number icon gets color and size of an icon and then say explore icon then pass in this color and size now for the label what we have to do is  say tab bar label and then say explore   in order not to show explore  stack but show explore   now you'll see this error this means that  we just have to go and do pod install now just restart the app so now as you can see it works we have the   label and the icon now you might be wondering  where this color and size comes from   in the icon and this comes from the screen  option so what we can say is screen options tab bar active tint color #e67a15 and as you see it changes that in color  and is then passed to our component   we can also say tab bar inactive tint color and define the inactive color of the icons  what we can also do is hide the header so   we can say header shown walls now it's gone  here and we can also hide this header because   we're kind of handling it our own way  so we can just say here screen options   header shown false and we can do  the same for the rest of the screens now we can see that the header is gone everywhere let's also add icons to the  rest of the screens here say restaurant icon and profile icon there we go we have the explore icon here oh  and sorry we also have to change restaurants just a label now we have it explore restaurants  and profile with each of their icons so now if   we'll go to any restaurants we'll see a problem  here we cannot go back because we have removed the   header with their default pack functionality so  what we have to do is go to the restaurant screen and add this button right  here let's create a component   for that because that might be repeatable  so let's say top back navigation let's say TopBackNavigation right away let's grab navigation   because we'll need this for the callback  functionality save view let's create a button we'll also need a back icon so let's create that copy this from my github let's use it here now what we have to do here is just say on press navigation go back so if we go to the  restaurant screen we have to add this here   so let's say top back navigation there  we just have to import react here now one more thing we have to  do here is under lick color let's go to a restaurant and  then go to an asset restaurant   no matter how much we go we can  always go back to a previous item   so that's it for the tab bar now we can look  at the drawer navigation and that's going to be   extremely simply all we have to do is just copy  all of this let's just save this for reference   and just say app tab navigator update  the imports you can just remove this and let's duplicate let's call this app drawer navigator now we have  to install the drawer component   let's open up a terminal and say  npm install react navigation drawer now we'll need pods pod install restart the app we'll need to modify index ts  here and say app drawer navigator let's also go ahead and remove this  navigation because we don't need this anymore just say menu and also in explorer so in our app drawer navigator we  have to find this create bottom tab   navigator and just replace it with the drawer  navigator let's say create drawer navigator   now we'll see some errors that's because it's   called differently so in drawer it's called a  drawer icon and drawer label let's repeat that let's save and now we can see that the tapped  indicator is gone but now we have to open Drawer   Navigator in order to do this we need another  navigation component which will be called   top drawer navigation it's going to be very similar to the back  navigator so let's just copy this and instead   of back i can let's import a new icon let's say  in icons drawer menu icon copy this from my github let's go back and here let's say drawer menu  icon and let's rename that top drawer navigator   let's copy this so we'll need it  in the restaurant screen of course import that we'll need it in the profile screen and we'll need it in explore screen let's save that so now if we go  back to the drawer navigator we   also have to change this navigation  function we have to say open drawer you'll notice the typescript error here in order  to fix this we'll just say drawer navigator   navigation prop and pass road  stack params here save this   and now we see that we have this method here  open drawer now let's go ahead and click on this   and we'll see that we have a drawer  here we can go to restaurants   profile and explore if we click on  explore and go to restaurants then go back you'll see that we're back at the screen of  explore and we can see our navigation here   same with restaurants and our link to the restaurant  screen here also works so that's how simple it is let's see  what error do we have here tab bar active   yes this should be drawer active tint  color same with this one drawer inactive   thin color we don't need the menu  anymore so we can just delete this delete all the imports so now we have a clean typescript checked project  here now let's say there was a login screen   some authentication functions that you have in  the app what you have to do is just go to the   drawer navigation let's actually just switch it  to a tab navigation let's say app tab navigator you see how easy it is to just switch  between so let's say we have a login screen   login dsx and and have a signup so now all we have to do here is say that  if the user is logged in then we display   those screens but if not then we just  display a stack of authentication so   that would be a login screen and a sign  up screen so you can say render content make a function which will be inside of the app and it will render content let's say is logged in equals  false and let's say if is logged in then we return the screens that we had before but otherwise will return the off stack let's  say root stack screen name of stack component will be off stack  which we don't have yet let's add off stack to the params here and let's create the off stack return let's say off stack navigator let's create a type for it let's create it first create native stack navigator this will be a type of stack params which will be login define and   sign up also undefined we don't  have any programs for them yet and let's say of stack screen component will be login let's also name this login and let's go to login screen  and also say login screen same for sign up just for easier importing say login screen and sign up screen now we just have to use this in our component here also  you have to import react now what you'll notice that there is a tab  navigation on the off screen we just have   to move this root navigation to the roof stack  because we don't have it in the intro screens let's move this and here we can just say render content instead now also what i noticed is that we don't need  the screen defined here because it's not in a   navigator so we can just say off stack of screen  stack save it now we have a login screen here   if we go to here and say is logged in to true we  see our app with normal navigation if we say false   then we're back to the login screen so whenever  you would have any logic with authentication   it depends on what you're using is it firebase  is it asking storage so it depends on your use   case i usually do this with firebase and redux  for example i would have a user object in redux   and if it's not empty then i know that the user  is logged in after the firebase authentication   flow completes and then in container i would say  something like const user equals use selector   and just say something like state apps state and  say state current user and here i would just check   if the current user exists then i would output the  stack of the app otherwise i would just show the   login screens and whenever a user is logged in  i'm setting the current user to the user object   and this way i know that he is authenticated  and i have to show the actual app stack   now of course if we remove this and go to the  login screen you can again use navigation here and here we can just say  touchable highlight on press navigation navigate you can just say sign up and let's just say profile icon here now if we click on this you'll see  that we are in the sign up screen   because it's a stack with two screens  now we cannot go for example to explore you'll see an error here we can also go to the  explorer stack because it's not in this navigator   if we go back to the tab navigator you'll see that  we have the off screen stack with only two screens   we have a navigator here and here we have a  rootstack navigator with all of the other screens   but since we're logged out we are just  defining the off stack screen the app   doesn't see this navigator here so we can  only navigate between those screens here   so that's why the sign up works and the  explorer doesn't in order to fix this   area here we can just say native stack  navigation prop and say off stack params   now we can see it's gone we're using the off  stack params that we've defined in the off   screen and now if we go back it's type because if  we type in something we'll get an error because   this only can be login or sign up so that's it  for the tutorial guys i hope this was helpful   if you have any questions  just drop them in the comments   if you want more content like this feel free to  subscribe to my channel and i'll see you next time

Channel: DanielGSC

Views: 304

Keywords: react native, react navigation, react native navigation, react navigation tutorial, react native tutorial, react native typescript, typescript react native, react native 2021, react native typescript tutorial, react native typescript navigation, react navigation v6, react navigation 6 tutorial, react native navigation typescript, react native app, react navigation typescript, react native navigation v6, react native navigation 6, stack navigation react native

Id: UzMbu3XKEoM

Length: 49min 44sec (2984 seconds)

Published: Thu Dec 02 2021