React Navigation Tutorial for Beginners - Complex Navigation Flows with React Native

hello everyone welcome back to Kobe veto I'm super excited to be here uh back again with you guys with another video and in this video this is going to be a huge video You're gonna learn a lot we are going to be learning about react navigation and here we have a demo of what we're gonna be doing so um before we start and actually I show you the demo I was gonna say that you may be thinking about learning um if you're a beginner you may be thinking about learning Expo router which is another kind of navigation that you can use with react native but if you are a beginner I would recommend a hundred percent that you learn first react navigation and then you jump to react router and for those who don't know what is react router I'm going to show you in a moment uh but yeah uh the idea is that react router it's a bio-based navigation system that you can use with react native as well it's brand new Expo it's developing it uh but yeah it's built on top of react navigation in react navigation it's what we're going to be learning in this in this crash course so let's see to them here we have a like a copy of Twitter that I built uh I took some components and dummy data from one open source project uh from Shopify um and yeah this is basically what we're gonna be doing it's just a list of tweets but we are gonna be interacting with the navigation we are going to learn how to create bottom tabs which is this uh these tabs that we have at the bottom of the of the application we're also going to learn how to open this driver or how to integrate this driver into our applications and as you can see this is going to work on dark Mode live mode and we're gonna learn as well how to navigate using top top tabs these are top tabs and of course all this is dummy data and as you can see we can from here open the driver for example and change from change the screen go back for example open it change screen open the driver go to fit and of course you can change the content of these screens this is just a demo um we are going to learn as well how to create our own style for the navigation and finally what I wanted to show you here is that we are going to learn as well how to use stacks for example here when I select the tweet and let's change this to be like North you're going to see that it changes automatically which is pretty amazing and it's super easy to build using the themes that comes with react navigation so you don't have to use your own colors if you don't want of course you can extend this functionality and use your own colors but yeah this is a stack we are going to learn that as well and this is going to work on Android as well so we can select a tweet we're going to learn how to pass properties to screens because when we navigate from this feed screen to the Tweet details screen we are sending the tweet that we are selecting and we are going to learn how to do that as well okay and one amazing thing that blows my mind is that when we're using Expo we can actually compile this or just run this on web and it's going to work here we have the website it's running on the localhost 19006 but it's basically the same and as you can see everything works the exact same way we can open the driver tap and just navigate here we can select one of these and we are going to navigate to this stack screen which is really amazing if we just uh just size this to be like a device size it's going to look the exact same way which is pretty pretty amazing and well guys this is basically what we're gonna be learning how to do in this crash course if that's something that interests you stick till the end and before we start if you want to download this project and play around with it you can go to code with beta.dev and project slash project you're gonna find this project here as soon as I release this video I'm gonna put it here of course you cannot see it now but yeah you can see every project that we create in this YouTube channel here so go to colbybetto.dev and check out the projects play with them if you are a beginner it's going to help you a lot you have many many examples here completely for free but if you want to take your knowledge to the next level check out the react native course this course in this course we learn how to create an application that it's already on the upstairs you can check it out download it from App Store or Google Play and check it out yourself oh and as well um not only we're gonna see navigation in this course in more detail but we learn how to use Styles components performance State Management notifications working with apis Firebase AWS amplify and we of course do the final project which is this application this is just the final project everything else is the basics to build that kind of application and then we have a bonus in which we upload the application to the App Store and Play Store and well guys if you are interested go to college we also have premium resources and free resources for everyone okay and now that that is out of the way and we know what we're gonna be doing in this video Let's actually start okay guys so before we start creating the project and I want to say that we're going to be using react navigation as you can see here react navigation it's basically basically a package or library that we can use to integrate uh all the stacks tabs drivers uh model screens in our application uh so if you want to learn more about react navigation I would recommend that you go to the official documentation and just to mention uh like I mentioned before I talked a little bit about Expo router Expo router it's a new navigation method that we can use with Expo and you can check it out as well if you are curious and if you are already familiar with react navigation I would encourage you that that you go to that you check Expo router I'm going to create a video in the future but if you are a beginner I would highly recommend that you use react navigation because react navigation it's because XP router is built on top of react navigation so if you don't know react navigation you're going to have a hard time understanding Expo router okay now um that's all I wanted to mention now I'm going to close this I don't think I'm going to need it for now and let's actually start let's actually start by creating the project that we're going to be doing so I'm going to navigate to my desktop folder then inside this folder I'm going to start by creating a new Expo project so I'm going to say Expo create export app MPX of course um and this is going to ask us what name do you want to name uh what name it's your app so I'm going to name it navigation tutorial and hit enter this is going to initialize the project and while this is being done we're gonna need to wait a little bit okay guys and the project is ready as you can see here now I'm going to access the navigation tutorial folder and then open this on Visual Studio code by running the shortcode code Dot okay guys so here we have the project and as you can see we don't have too much just an app.js file and let's start by installing some dependencies that we're going to be using let me just copy them I have them here the first one is going to be of course react navigation native which is a package the main package of react navigation then um we're gonna need to install as well well because we are going to be using uh many kind of navigations we're going to be using the tabs the bottom tabs these ones that hit right here the the home screen the notifications and settings those are bottom tapped then we're going to be using stack a stack screen it's this one basically when we open a screen on top of another screen that's basically a stack of screens so we're gonna need react navigation native stack and then we're gonna need the driver so for the driver we are going to need to install as well dryer which is basically this this is a drawer then uh we're gonna be using as well some dog tabs and those top tabs are going to be these stock tabs that we have here so we need to install as well react navigation material.tabs and reactinated that view okay then we're gonna need as well react um Native page view but this is going to be installed by Expo so we are using npm now I'm going to hit enter and once that is done we're going to have all those packages already um and ready for us and now while this is being installed we're gonna need as well some packages uh from Expo so I'm going to clear the terminal and we're going to need as you can see here and I'm going to use X4 install react to install this dependency which is going to be react native screens and react native safe area context these are per dependencies that we need to install in order to navigation to function correctly in our application we are going to need as well react native gesture Handler so I'm going to paste it here we are going to need as well reanimate it op and paste here and if you want to just copy these dependencies they are going to be available at colbybet.dev so you don't have to write them manually and then finally we're gonna need um uh react native page viewer okay paste it here and I think that's all we need for now I'm going to hit enter and now while this is being done okay that was quick okay so I'm going to clear my terminal and exit for now because now we need to make some modifications in the code in order to have these dependencies working correctly the first thing that we need to do is go to the Bible config file and we need to add a plugin and the plugin is going to be react native reanimated plugin which is the one that we installed before and let's go to the app again inside the app we're going to need to import react native gesture Handler in order to have it working correctly okay it's safe and I believe that's all we need for now but I'm actually I just remembered that because we want to be changing the the scheme of the application so we want to support dark mode we need to go to the app.json and here as you can see we have this user interface property style that is like by default so I'm going to change this to be automatic and hit save and once this is done we can actually start by running the project so let's say npx Expo start okay this is going to start the development server and now here in my iPhone 14 pro I'm going to reload my application so now I can go to my simulator and hit command Ctrl C and hit reload okay now this is going to reload this new application that we created here and for now I'm going to close my terminal okay here we have our application if we go to the app.js file you're gonna see that we have this text here and the first thing that I want to do is actually set up or create some files uh or some screens component screens so let's go to the Explorer and create a components folder as well I'm going to create a navigation folder here and this navigation is going to contain basically all the navigation that we're going to be dealing with in our application so let's just create this navigation like this for now and let's actually start by creating some navigation right so the first thing that we need to do is just import from react navigation a navigation container so I'm going to say from react navigation native which is the main package from navigation we want to import a navigation container okay and that's it for now I can just return this component so let's name this component navigation and actually I'm going to change this to the capital navigation like this and now that we can export the whole function this navigation component which is going to be basically the main container right so we can say here navigation container and then we can put here something right like we can put screens okay so let's actually start right here let's actually create some screens so let's go here again and create another folder called screens and for these screens they are going to be very basic screens so I don't want to waste your time guys um and I'm going to be copying and pasting some screens but let's start by creating a very first screen which is going to be called feed.js and this is going to be just a simple component very normal component called p and it's going to return for now and we are going to return for now A View From react native and from react native just like that and inside this view we can have a text from react native as well that says beef okay hit save and now inside this navigation we can actually put this bit screen imported like this and if we go back to the app.js file you're gonna see that this is the entry point of our application so we can specify that we want to enter in the navigation component right so we can delete this uh actually let's leave the status bar for now and well I'm going to delete it sorry and let's just return here the navigation that we created okay we are importing the navigation here and now we we have one error and this error I believe it's because we cannot find this navigation and I'm getting this wrong because it's uppercase here cool now let's actually res um restart the server so we don't have that warning okay and as you can see here we can actually go to feed and see that we have some text here some text but it's all the way up here so we can what we can do here is just change this for a safe area view quickly from react native copy this and paste it here oops there we go hit save and now we can see the text okay cool okay so at this point guys we can actually start by creating the bottom tabs that we're gonna be using uh but before I do that I want to create some components to hold it to its the dummy data that we're going to be showing so I don't want to waste too much of your time guys so I'm going to just copy paste these two components one of these is going to be a tweet and the other one is going to be a tweet content I'm going to show you what these components do in a moment but for now I'm going to close them now we're going to need data as well right so for that I have here a folder called Data and I'm going to copy this folder here and this folder is going to contain basically an array of tweets and this array I took it from an open source project uh as you can see we have many many data and we are not going to be using all of this data just like 50 items but uh yeah just to show how this is going to look this is we can use this okay now let's actually start by creating the bottom tabs so we're gonna be managing all managing all the navigation stuff inside this navigation file that we created so if you remember at the beginning we installed something from react navigation which is a bottom tabs so if I right here bottom tabs you're gonna see that we have this uh react navigation bottom of that package and from here we can import a create bottom tab Navigator uh function basically this is going to help us this is going to help us to integrate the bottom tab so now that we have that here we can say we can actually say here this is going to be the tab so we can say here const Tab and tab is going to be equal to create bottom tab Navigator and now with this instance of the Bottom now the bottom tab we can actually create a component which is going to basically contain the tab so this component is going to be I'm going to call it tab group you can name it whatever you want and if this is going to return a navigation container which is going to contain the tabs that we want in our application so I'm going to create I'm going to access to this I'm going to access to this tab variable that we created here and if I press dot we are going to see that we have this Navigator and then inside this Navigator we can actually put some um screen so I'm going to say that screen and this is a self-closing tag and we can specify the name of the route and the component that we want to render for this screen so the component that I want to render for this screen is going to be a feed so let's go to the screens we already have this feed screen so we can simply say here bit with okay and the name of this uh screen is going to be bit as well hit save and now let's actually go to the main container that we have down here and instead of rendering just one screen we can change this to render the tab group okay and the tab group is going to look something like this and if I hit save now automatically we already have one tab here which is fit and if I duplicate this we're going to have two tabs uh but we got an error because they have the same name so I'm going to name these to be P2 and we can actually navigate from these two screens but they have the same component so this is nothing too complicated now for now let's actually start by creating uh some extra screens that we're gonna need and I already have some screen so I'm going to delete this feed and drag and drop a folder that contains this feed okay now this vid I'm not going to dive into into it too much right now but basically it's just rendering with a flat list um all the the tweets okay now I also have another notifications and settings which is basically just a view with text so nothing crazy so you can create your own screens and now I'm going to change this to be if I go here you're gonna see that this is a export default feed so uh I need to import it from inside the folder that screen that we just created now I'm going to delete the page number two and uh yeah I'm getting an error because I'm trying to access an image that I have here and this image is going to be Beto which is basically um an image of my avatar from Apple and I'm using it to open the driver but yeah so we have these two screens now if I reload the application you're gonna see that we have at this point just one uh just one screen if this works of course okay let me let me actually reload everything now I just reloaded the application guys and as you can see here we have all the data in this feed screen and we have also this um this header here and I'm going to teach you in a moment how we can do that uh but yeah mainly what I want to do now uh it's just close a bit and actually duplicate this and we're gonna be using here the home screen oh sorry the settings screen and we have a sharing screen here so we're gonna be using that one and finally we have another notifications one so this is going to be notifications let me open this file so we can Auto Import this like this okay cool now I'm going to name this um with the according name so we don't get an error and if I hit save now you can see that we have these bottom tabs down here cool and we can navigate through screens and all that so everything is working great I'm going to close my terminal for now and what I want to do now is actually start customizing a little bit my bottom tap because for now we don't have any icons or nothing so the way that we can do that it's actually using a web page that has basically a library that from a library that contains icons that we can use with Expo so here actually if you want like for example a home screen you can search home and you are going to see all these screens and icons and for now I'm gonna when I'm using let's say this home from Iron icons so we can select it and copy the import and then we can copy this components so let's go up here import this then go back here and we can actually start configurating this so what we can do here is access the options inside the Tab screen and these options contain for example if I open another curly braces we can say tap our icon and this icon is going to be a component which can be basically the home screen that we can that we have here and if I go back you're gonna see that we have this icon just like that okay so you can go to this page and check out all the icons that you can use you can go back and yeah pretty much a lot of icons you can also filter them this is a pretty nice website that I use all the time so you can you do it's 100 recommended but this is not like the right way to do this or you can do this like this for each tab but there's there's a better way to do this we can actually access to the Navigator to the main navigator that contains all screens and we can say screen options and specify these options here so for example here we can say hey there shown balls for example and as you can see we are not going to see the header on any screen because these options are applying to all screens down here so I'm going to delete this options that I have in my feed for now and what we can do here is actually graph all the properties that counts with the tab Navigator so we can grab those like this we can basically return a component that is going to look like this and here we can destructure all the information and navigation that we have inside this tab so we can access the route and the navigation and well we can use navigation as well if you want but uh once that we have the route we can do cool things like specify the tab bar icon like we just did before we can select this property here and then we can destructure all the properties that we are accessing and creating a arrow function like we can destructure all the properties like color focus and size so these properties are getting for free we are getting these properties for free from the tab Navigator component so we can know when the user is pressing or when an icon or a tab is focused we can get the color and everything right so we can destructure this and use it so I'm going to structure the color focus and size and now we can actually uh say what icon we can use or what icon we want to use on each screen or on each step and the way we do that is basically just having a simple validation for example let icon name and now we can validate if the route dot name it's equal to and here we can basically copy this like bid paste it here and if the root is filled what we want to return it's an icon name and the name of the icon that we're going to be using right in this case it's going to be home now if I hit save um you're gonna see that we are not seeing anything and the reason it's because we are not returning anything so after this if statement I'm going to have a return now from Iron icons I'm going to say that the name that I want to use is going to be my icon name and if I hit save now and apply as well size I'm going to pass the size that we are getting from the properties and finally the color as well going to be equal to color let's see if this works and if I hit save we are not going to see anything because I'm not assigning the name here okay there we go so we have a bit and if I don't select it you're gonna see that the the color changes and that is because it's not focused now what I want to do here is change the icon whenever we are not pressing the whenever we are not focusing this screen so we can access the focus State and if it's focused we're going to use that home icon otherwise we want to use the home outline which is another icon and as you can see here we have this icon when we select it we switch okay that's a pretty cool thing to do and we can do basically the same thing for each screen just by adding some if else if statements now we we check here if the name of the route is equal to settings we're gonna be using settings when the the tab is focused otherwise we're going to be using a settings sharp if I hit save now we have now these icons now I want the settings to be to the right so what we can do is basically just move this to this line 29 down hit save and that's it that was super easy and there we have it guys this is how you can use these properties to specify how you want your navigation to be now apart from that we can do some cool thing uh though this is just the tab bar icon I'm going to minimize that we can actually access many many options here for example Tap bar if you tap or if you type tab bar you're gonna see a large list of things that you can use here but I want to change the active team color to be the following color that I have here which is basically Twitter blue like this hit save and of course you can change this for whatever you want so for example let's add red oops right hit save and there we have it guys so you can very you can customize many many things of this stat Navigator and you can learn more about this on the official documentation now I'm going to access another property which is going to be inactive tab bar inactive thin color it's the color when we don't that the tab is going to have when you don't when it's not active so for example you can change this as well let's say red and it's going to be red as you can see there so let's leave it great for now and that's all I wanted to show you for the tab group and that's pretty pretty amazing you can do all that with tabs now let's pass to the next um navigation um section that I that I want to touch and the navigation is going to be stack okay sometimes we want to navigate from let's say from a tweet to another screen and we we can use a stack navigator for that stack Navigator basically it's a stack of screens so you can put a screen on top of another screen and then keep going and keep going and then if you want to go back you just pop the last the last screen and you pop the next one and you can um go back that way in the same order that you entered those screens so let's use a stack navigator for that and as you can guess by now we are going to need to import from and react navigation native stack okay now inside these curly braces I can say create stack Navigator native stack Navigator and it's going to be the exact same thing that we have here guys so for this I'm going to create another variable this is going to become stack and equal to create native stack Navigator okay and we are going to do the exact same thing that we did before so let's create a component function component and this is going to be called homestack let's say group as well okay and for now let's return a homestack DOT Navigator as well and inside is Navigator we can now specify the screens that we want to have inside this step right so we can have as many screens as we want I'm going to say homestack dot screen and now we're gonna need another screen but I want this stack navigator to have access to the feed and then to have access to another screen that is going to basically just display uh what the Tweet has the Tweet details right so let's create another screen I'm going to go to my folder screens and create another folder called um homestack okay so you can have a nice structure right so let's create a new file here and for this file the name of this file is going to be tweet details screen.js let's export just a simple function component called tweet detail screen and return just a view for now we can actually return a save area view from react native and then inside of this we can return a text that says tweet details and we need to implement this in a moment so for now I'm going to just leave it like that close this screen and now we can say for example first of all we want the vid so let's use the feed here and the name of this screen can be paid and then we can duplicate this and use here the um the tweets that we can that we just created what's the name I already forgot tweet detail screen okay so let's go here and use it tweet detail screen there we have it and I like to place the name as this the same as the component so that's easier for you to refer to this name later now we can hit save and now we can use actually this um Homestay group of screens inside of um the tab group and this is a another thing cool thing that we can do with react navigation and is that we can Nest Navigators inside Navigators okay in this case instead of having this feed screen just like that inside this tab this one here we can actually use a navigator in this case we're going to use the home stack so let's copy this component and change this one here and change the name to be the exact same name hit save and as you can see now something strange happened first of all we lost our icon and now we have this header here and the reason for that is because we have now two Navigators nested one inside of another and now the header that I want to keep here is the header that I have in my um in my feed screen right so I can basically just hide the header of this home stack group and I can do that just basically saying here options and then say header shown equal to false okay it's a and let's see what we have here and now nothing really happened everything is the same but I want to as well change this um change the title of this tab bar so we can say tap our label and the label is going to be let's say beta medano which is my username of Twitter and if I hit save you're gonna see that says down here and one thing that we need to validate now it's we need to change this validation here because we don't we no longer have a route name called feed inside the start navigator but we do have a route called at Beto medano and if I hit save um you're gonna see that nothing happens oh okay okay and the name is this is the label that I put but the name is going to be homestagger okay if I hit save everything is going to be working the exact same way and now uh the the only difference is that at this point because we are rendering a homestack group here a stack we can actually navigate from screen to screen inside this home stack okay guys now if we want to navigate from fifth to three details screen uh we can now actually do it because they are inside is the same stack Navigator but now uh one thing one important thing here is that the the name of this of this screen needs to be specified when you want to navigate now if we want out the Tweet component which is each one of these um these are pressable as you can see here and they have this function called navigate that we are getting from the hook use navigation from react native navigation from react navigation okay so we can use this hook to access functions like navigate and set options about navigation on each route okay so we are on tweet we are using the function navigate and if I put my cursor here you're gonna see that we have all these events that we can use but for now I just want to use navigate and I want to navigate to my tweet details screen now if I hit save now and I press on one of these you're gonna see that we are navigating to this screen okay but each component is navigating to the same screen nothing crazy is happening here now one cool thing is that you may be wondering here is that why we are passing this to it here now when we are navigating to a screen we can specify parameters route parameters that we can use inside this tweet details screen in this case the Tweet details screen what wants to show the tweet that we are receiving right so we can pass the Tweet as a second parameter here and if I delete this and now press comma you're gonna see that we can you're gonna see that we have these arcs which basically it's arguments and we are going to pass this object to it now let's go to the Tweet detail screen and actually use these parameters so let's close all this and let's go to the Tweet detail screen and to use this we can use a hook called use router so I'm going to name this router equal to use router sorry it use route sorry use route so I'm going to say route equal to use route and inside these routes we can actually destructure some some cool things so I'm going to say route and we can see here that we have the name of the route params which is the parameters that we are passing to this screen this is very useful and we cannot also access the path of the screen right now we can basically just grab whatever we want but I want to access the params for now and let's just put that on screen but to show to show the parents like in a nice way we can use the component that we have already here which is a tweet content tweet content it's going to receive the retweets comments and likes so let's just go to the Twitter details screen and use this tweets details to its content sorry okay and let's pass the so tweet content receives a tweet as a parameter or as a property and we can pass here params perms dot tweets we know that we are getting this tweet because we are passing it when we are navigating okay and as you can see here we we get the component render correctly so I can delete now these Twitter details and the cool thing about this is that it gives um it gives us the dynamic dynamically generated screen okay so if we go back and now we select for example this tweet uh you're gonna see that we have all these information for the tweet that we selected okay cool now and something wrong is happening here uh I believe it's because I need to specify a style here say like so one it's it okay there we go so here we have all the content of each tweet that we are basically checking right but one thing that I don't like about this screen is that the title of the header it says to a detail screen and I want it just to read details so the way we can change that is using navigation uh the who gives navigation this is another hook that allows us to use properties from navigation now I want to set options of this screen at the moment in which we enter this screen so for example the name could be of something that we are passing on the parameters so let's use a use layout effect for that from react native and the use layout effect is going to be very similar to a user picked from react native if you are not familiar with hooks I would recommend that you check my react native course of course or go to the documentation of react and learn more about hooks but basically react layout use effect is going to run the first time we enter this screen before we show anything to the user so before we show anything to the user we can set options like the title of the of the screen of the header and everything so when the component or the screen loads we show the the title that we want to show in this case we can say navigation dot options set options and we can say hither title equal to Yellow just to see if this is working and yeah it is working now let's say that we want to access the the name of the user so here you can see here that we received the tweet and we can access author.name so I'm going to copy this come back here and just delete this and set author.name okay and I want to put this like this hit save okay and of course tweet doesn't exist it's inside arms dot tweet okay now let's try this okay and as you can see the name of the header is changing on each uh on each tweet which is pretty pretty cool right and we can see the details the name of the person and everything it's changing dynamically which is pretty pretty cool now we can do many many things here like for example set header shown equal to false uh anything else okay whatever you want to do with options on this screen you can do it from here before we show anything to the user which is pretty amazing so you just have to keep in mind that you have to use a use layout effect okay cool so that's uh all I wanted to show you from here now let's see that how we can show this screen in um with a different presentation this is a card presentation very standard very normal but what if I want to show I want to change this uh to be a mother for example to show this in a model way we can go back to the navigation and whenever we when where we have this screen tweet detail screen we can set options and inside options we can access the presentation and we can present this screen in many ways you can choose whatever you want here but my favorite one and more used I would say is going to be the model screen so if I select now one of these we have this nice presentation on iOS of course this is going to be a little bit different on Android but yeah you can change this as you want uh for example let's say that we want to press or send this as a full screen model and now let's select one of these and now this is a screen complete screen that covers everything and you cannot go you can no longer go back you will need to add a button if you use a full screen model I could reload the application now but let's let's create a button here let's uh just say button from react native let's give it a title the title is going to be go back and uh we can access the on press property let's create a function quickly and say navigation which we are using from the hook here and then we can use the navigate and provide the name of the screen or we can simply say go back which is gonna take the it's going to pop the last screen on the stack and it's going to return to the last uh route okay hit save press this button and the model is closed okay so for now I'm going to comment this and just leave it like normal Moda here and let's try if this is working perfect so it's working perfectly and this is how we use Stacks guys okay and of course we could have many many screens on top of another and it's going to keep working the exact same way cool now let's pass to the next uh topic that I want to show you guys in this crash course we can also use a driver right and we install it at the beginning so let's actually go back to the navigation file and as at this point I would say that you already know how to use a driver it's going to be very similar to what we have been doing here so let's import from in this case is going to be driver react navigation driver create driver Navigator okay hit save and actually guys before we jumped into this uh one really important thing that I want to show you here is that if I open this on Android let me bring this under here you're gonna see that the the navigation needs a little different on Android and let's give it a moment okay so we have everything here but when I press on this um on this screen as you can see this is not a model very similar to the iOS simulator this is a bit different and the difference is that when I press one of these I'm seeing the bottom tab so I can navigate here and then come back and if I press I can I can go back as well but I don't like this let's say that I want this uh this screen to cover the bottom tab how can we do that well the way we do that is the same way that we the the exact same way that we did when we nested the stack inside the bottom tag but what we want to do here in this case in order to have the model on top of the bottom tab we can Nest the bottom tab inside the stack okay hope you understand that uh what I'm basically doing here is just nesting the home stack group in the in the Home tab okay but what I want to do instead is actually put this tab group inside this um this stack Navigator okay so let's change this to a tab group and then instead of having this home stack group here let's put let let's just leave it like we have had it before with fit okay it said and now let's see what happens okay so we lost the header and we lost uh many many things right so let's remove this header shown equal to false there we have our header now um let's actually change the validation that we have here now it's going to be feed hit save there we have our icon but now what happens if I press one of these tweets okay we are going to get an error and the reason for that is because we need to uh um let's see let's see I I don't remember to be honest so what we are doing here is okay okay we are grabbing the the tab Navigator but now what I want to render inside these uh this main container is not going to be the the tab group it's going to be the stack okay so let's uh render the home stack group and hit save there we go so now let's press one of these okay and it's working and now the tap group title that we have here it's showing so we can actually say options [Music] um here they're shown equal to false hit save cool and now it's fixed when we whenever we press a tweet we are navigating and we are not seeing the bottom tab the reason for that is because the tab it's going it's only going to be available on the first screen which is going to be the tab that we have here me to be that bit okay cool so now if I navigate everything else is going to stay the same but when we navigate to a tweet because we have the tab the bottom tab nested inside this stack uh we are not seeing the bottom tab when we enter to this screen Okay cool so that's that's a pretty powerful uh thing that we can do with react navigation you can Nest uh Navigators inside Navigators and yeah you can scale this as you want now let's let's actually start working with the driver like I mentioned before okay so for the driver guys I'm going to be using another Domi data screen and I'm going to just drag and drop here this drawer screens which basically is just one text that says payments and we have these buttons okay so let's close this component really simple now let's create the driver and the driver it's going to be uh let's say down here okay so let's right here driver so you so you know basically it's going to be the exact same thing that we did already we can say driver equal to create Brower Navigator and we can now create a component that contains the group of screens that we want inside this driver so let's create another function call driver let's name it group as well and it's going to return a driver container driver navigation container right so Navigator and we can specify the screens inside this Navigator so I'm going to say driver again dot screen and the main screen that I want to cap here let's for now just say payments so I'm gonna specify a component I'm going to say payment screen and I'm going to open these payments so I get the autocompletes payments and I can select it it's automatically imported so we can select this name and put it here cool now if I hit save and uh now how can we make this driver accessible from on top of all the navigation that we have already because we have a stack navigation navigator that has nested a bottom Tab and then we want to add a drawer so the way we do this it's basically doing the same that we did already instead of having everything inside this homestack let's put let's comment this and put the home stack here of Stack group and let's copy the name here hit save but before I do that I want to instead of having the home stack block here let's put the driver group it's safe and as you can see we have now this home stack and let's see how it looks on iOS this Homestead it's working already okay so basically we graph this the stack Navigator and put it inside the driver we grab the bottom Tab and put it inside the stack okay so keep in mind that but uh everything is working as intended now if I go to payments you're gonna see that we have these buttons and this together but I want to hide the header that comes by default with the driver okay so how can we do that let's put this here and let's go to the driver Navigator and say here options screen options and as you know at this point here they're shown equal to false okay there we have it now we are going to need to add the header in this in this screen so what I can do here is just go to options here and say here they're shown equal to true in this specific screen okay let's go back to homestack and there we have it so everything is working as intended we can navigate from these two but uh I would say that I want to change a little bit of course I can open this by by accessing this uh this button and the method that I'm using there of course I forgot to mention it's inside P so let's go to bit and fit is using a a very similar approach that we create that we used when we when we changed this header title and we are using a use layout effect that you know at this point in this use layout effect is accessing the navigation from us navigation setting the options and the cool thing about these options is that you can use your own components so instead of having a button I'm using this component as a header left and as well you can specify a header right so I can say header right and just to show you how you can do this you can we can import a button from react native and put it a title just to say uh test okay that's it and as you can see we got this right component on the header very very powerful things that we can do with this so let's go back to the home stack and press test okay so it's working now it's looking different of course on IOS and Android uh but you can change this to to create a custom component if you want for now I'm just going to delete or comment the button okay so let's comment this here the right hit save and I think we need to reload the application sometimes to to have to see the changes and yeah guys so this is working as as expected um and we can navigate from screens now one thing that I want to do now is actually hit the last topic that I want to show you guys and it's uh the the top tax and the top tabs that are going to allow us to navigate between more screens inside the feed screen got it okay so let's close the bid let's close the payment and let's close the driver group and let's actually go on up here and do the same thing this is installed already and we are gonna be using material.taps for this now we're going to need to import create material tabs as well and let's actually create this one I'm going to minimize this let's actually create this one on top of the stack okay so let's say here uh top tabs and as you can guess at this point for the top tabs I'm going to create another Navigator so let's name it top tabs and create material.aps Navigator let's create a function component that is going to render this in this function component it's going to be named sub Dash group and return for now a top Dash component that Navigator inside this we can specify the screen so the screen that we want to cap for these top tap the main one is going to be feed as you can see as you can guess by now so let's specify the components to be beat and the name is going to be a main for now okay and now what screens we want to access from here well I want to access my following screen and I believe I don't have one let's use the payment screen so let's say component payments but the title is going to be following okay and let's use a payment again because I don't I don't have more screens but of course you can create more and the last one I'm going to use an emoji so I'm going to use this and hit save now how can we use this steps group to render inside instead of this feed here well let's search for the fifth screen and the feed screen I believe is here in the tab group and now instead of rendering this feed we want to nest uh the top tabs okay so let's remove this components and actually uh let's name it fit hit save and suddenly just like that we have access to these three screens okay now keep in mind that this stack this Navigator the top tabs and you're gonna You're Gonna Want to use this inside a screen okay so all this is inside bid you could you could say because this is the tab feed okay cool so now we can access here the following Main and everything else really really nice now one cool thing that we can do with the dog tabs is that we can actually style them as we want so let's go to the tab top tabs Navigator and set some options so I'm going to say script screen options and we can access many many options here so let's say Tap Tap bar label Style oops tab bar label style and we can change the style for this I'm going to say text transform and I want to capitalize because as you can see here these are uppercase and I just want to be uppercase if the first layer so if I if I apply this style it's working now I can duplicate this and say Bond weight and the fun way that I want to use it's both so we can actually change this as we want you can access pretty much anything uh of course if you want to style as well the tab indicator we can access that that indicator style here open curly braces and change it I want to say that I want height of five you can change it as you want border radius of Pi and then background color for now red okay and there we have it guys it's looking pretty pretty amazing now uh I want to change this color so it's the the same one as Twitter okay there we have it guys now let's say that suddenly the product manager comes and tells us that we need to add support for Dartmouth because we don't have support for dark mode at this point the component do as you can see here I change to dark mode but if I change again nothing is going to happen now and this is the reason why at the beginning of this video we change this inside the app.json we change the user interface style to be automatic which allows me to change from dark to light on iOS device if I press shift a uh it changes but nothing else changes now how can we add support for dark you're gonna be surprised guys because we want we can do this with one line of code so let's go to the main navigator that we have inside all the way here to the bottom and let's specify some options first of all the first line of code that we need to do is say theme and then the theme we can actually access the default theme that comes with react native navigation native so if I hit if I select this one this is going to be the light mode but if I use the Dark theme that comes with react navigation native and if I hit save everything is going to be dark now the device in this at this point it's in light mode that's why it's looking weird but if I change the device modes to be dark as well everything is going to be cool again now this is all we needed to do now let's use the default so we can see it right now we can access the current theme by saying current theme equal to use color scheme to use color scheme ROM react native and I believe and where is it yeah from react native okay hit save and now we can access this value inside this team so we can say if the current team it's equal to dark we can say um Dark theme otherwise we can use the defaulting nice now uh this is looking a little weird at this point because we are losing the status bar when we are in light mode okay so as you can see here anytime I change from dark to light it's changing everything it's changing these two teams but now uh I'm losing the status bar or or the battery when I go to like most and we can fix that super easily by adding a status bar status bar from Expo and simply say that the style uh that we want it's going to be Auto so it detects automatically when it changes now we can see the hour and the battery and if I change to dark mode it's gonna work the exact same way cool now if you don't want to use these colors you can extend these colors this team uh to use the the defaults that you want but for now that is going to be out of the scope of this tutorial but if you want to learn how to do that you can check out my react native course at code we better dot there uh but yeah this is how we can add easily dark mode for everything okay and if I uh navigate and as you can see here I we lost my my uh component that we have here in the feed we can open the driver from here and the driver is um also um compatible with dark mode so we are not gonna have any issues and we can navigate from here okay so react navigation guys it's um very very powerful if you know how to use it now let's see how this looks on Android if I change to Dark theme so it looks pretty nice and the cool thing is that we can apply gesture like swipe we can open the driver by swapping or we can navigate just swapping same thing here uh we got a little warning to you can just ignore it but yeah we can open the driver if I drag and drop from the side or uh and the reason why we lost the speed icon here and the feed button is because we are using now um we are seeing here uh shown I believe I don't know what we are doing at this point but uh what I can do is just um use my pressable component on the options that we have on the top tab screws yeah the dog capture so we can access these top tabs yeah and we are we can say here options yeah questions and inside these we can set the header left um Heather left and the other left is going to look like this um I need to close this okay hit save and we're gonna need navigation now if you remember uh I told you at the beginning that we can use navigation just accessing it because this tabs group is inside the main Navigator so this top tabs group is inside this navigation container which automatically passes the navigation so we can put it like this as property and now uh let's import the principle from react native and the image from react native and hit save let's see if that works let's try to reload okay okay and this is actually not working I hope you catch this error but but we need to go to where my name is it's inside here so this is going to be the that bit and the tab it's a header that we are seeing here so inside options we can actually paste this header left and hit save and there we go we have it again now uh let's try to see if this works again now this is going to break because navigation does not exist and we can access navigation the same way that we [Music] um that we did before I can say here navigation and hit save let's see if this works yeah we are using navigation from the container or from the navigation container okay we are grabbing the property automatically so we don't have to use a hook of course you can use use navigation hook to navigate uh but yeah we are opening the driver here with the metal open driver cool now the really amazing thing guys is that this is going to work on iOS on Android and at this point we have pretty much a pretty solid application but uh you can well at this point you can change just the content of the screens and you have a fully functional application but let's say that you also want to add support or um web so you can simply open the terminal and press W as you can see here now this is going to give us an error because we are not ready yet to create a website but if you want to create a website from this you can simply copy this line of code that says and Expo install react native web react Dom and web Okay so okay so I think I don't know if we need to install webpack config but I think we do so let's stop the server and let's run these commands Okay hit enter let's wait a little bit until this is done and as you can see here guys we have a warning that says that they didn't found anything for webpack so what I want to do is just copy until the ads and say MPX 4 install and X4 webpack complete okay let's wait a little bit until this is done okay and now that's installed guys so we can start the server and ignore those warnings and we can press now W as you can see here and we need to press W and we get this brand new browser that pops up uh and the website it's uh yeah it's just working this is pretty pretty amazing guys and the cool thing about this is that if I change now my system to be uh dark let's open my system settings uh well I can just toggle from here okay hit enter this is going to work as well on web pretty crazy huh and we can access everything we can open the driver we can navigate from the tabs and we can do everything we want okay so this is what I wanted to show you guys I hope you like this video I hope you learned something new I'm gonna go back to light mode uh remember that if you want to really Master navigation if you want to really Master react native go to code vibetto.def check out the react native course check out the premium resources and otherwise I'll see you in the next one don't forget to give it a like subscribe leave me a comment down below and that's it from me guys I'll see you in the next one bye

Channel: Code with Beto

Views: 48,326

Keywords: react navigation, react native, tutorial beginners, javascript, programming, reactjs, react, course, crash course

Id: QpfAyQgphgw

Length: 73min 41sec (4421 seconds)

Published: Sun May 28 2023