React Navigation 5 Complete Tutorial - React Navigation made easy | Bottom Tabs | Side Drawer

hello my dear smart developers welcome to smart code apps in this video you are going to learn react navigation version 5 in a very easy and hands-on way at the end of this video you will be very comfortable to use react navigation in your project let's see what and all topics we are covering in this video [Music] first thing here we will learn about this tags stacks basically a container which holds up the multiple screens we will learn creating it and using it in our application next we will learn about the screen navigation here we will navigate from one screen to another via programmatically like on press of something let me show that here in the screen i'm pressing on anahar so it goes to contact detail and pressing back button it comes to the same screen also pressing on the groups it gives a pop-up feel which is a model and swiping it from top to bottom closes that model once we are comfortable in navigation we will go for passing the parameter between screens in the navigation as we can see in this uh video we will allow user to type something and that type of value we will pass it to the next screen let's say let me give a smart code app [Music] and go to detail welcome smart code apps okay let me redo it let me type hello world go to detail welcome hello world yes here we pass hello world parameter from one screen to another screen bottom tabs which is very famous and common nowadays let's see the example here we can see two bottom tabs home and settings and settings is highlighted we will learn how to give our own custom icons and a theme color to match with our app and indicating which tab is highlighted and which is not and also adding some batch count for example in this screen we can see uh settings having a batch count of three we will learn how uh programmatically we can add accounts uh based on let's say you have some new upload messages or if user has uh want to see some settings new settings is available to grab user attention we can use the batch count in a bottom tabs side drawer menu is famous in android material design we will code here to open a side drawer menu programmatically for example here clicking on open drawer we should open a site drawer menu and also clicking outside the amino it should close it and also swiping from a left screen to right should open the side drawer menu also clicking on items in the menu it should navigate through respective screens also adding all this in in one project some people feel it very difficult we will learn how to do it so that a bottom tabs and side drawer menu co-exists in your project if you are new to this channel please like and subscribe to this channel and which will motivate our team to create more videos and to share source code with you also please comment if you are facing any issue and we will answer every question as early as possible in our description we have added a github link to this source code you can freely download and use it like if you stuck somewhere without wasting the time let's get started with react navigation version 5. [Music] [Music] so i just starting with opening a terminal and let me go to my project folder and here i am creating a expo project but uh when you are doing you can use expo or yarn or npm whichever you are using currently expo you need react navigation v5 enter [Music] now it is giving template option where i am choosing a blank because we will do everything from the scratch now it is downloading all dependencies uh let's wait for that okay now downloading is completed and it is showing some setup commands let me open the project in a visual studio code for this what i'm doing is uh doing a drag and drop now project is in our favorite code editor that is user studio code and we will continue from here let me open a terminal and beyond start so what and start is doing is we can go to package.json and oops okay you can see here start and start is internally calling expo start so why i'm giving and start is don't want to confuse if you are already using a yeah let me go to browser and here i'll click run io simulator but if you want to or run it on your device just download expo app from play store app store and whatever the url is showing here you can click on it or scan it from the expo app now app is ready and it is running in a simulator what i will do is i will remove a necessary code so we will add when it is required let me remove style sheet as well our text we will keep it now maybe we required it in our future oops okay let me remove the style too yes we have now empty project now what i will do is i will go to browser and open the react navigation official website and the link i will put it in our description uh the website is reactnavigation.org let me scroll to installation section why i'm doing it uh from here because in future if anything is changes you can come to react navigation.org and you can see the installation procedure and it is saying npm install react navigation slash native i i will not copy npm because i am using expo i will add expo and install now it is downloading all the navigation library download is completed now let's go back to react navigation dot or and see what extra uh libraries is required so they're saying uh react navigation requires a gesture handler re animated and react native screens and a react native safe area context and a mask review so all these libraries is a dependent library so we will just copy and we will add it to our project installation is uh successful now uh we will start implementing it so for implementing uh i will go back to the uh their official documentation and uh let's see which and all things we need to import first thing we need a react native gesture handler so copy and let me remove exposed status bar not required and importing react native gesture handler let me first explain how navigation works in mobile screen it is not very straightforward and it is not accomplished too like if you know in web you can directly navigate to particular page but in mobile we use screens instead of a page and screens need to be free defined and it should be kept in a container so for these we use a navigation container let me import navigation container from at react navigation slash native now instead of a view component we will uh replace with the navigation container why navigation container because uh this uh holds our entire whatever and navigation screens and the whatever the stacks we are going to add next so i am typing here we need to add our stack of screens going back to the documentation and react navigation slash tag is required so we install this library expo install react navigation slash tag installation is successful and now we will import this import create a stack navigator from at react navigation slash stacks now we will create a stacks using create stab navigator stack is created now we will use it inside a navigation container but to use that one we need a screen so for that let me create a two screens using a functional component function home screen uh let me return a view in this inside of view uh we will just add a text and we will say this is a home screen uh this is basically uh uh to identify uh like whether screen is changed or not and uh let me create one more uh screen we will call it as a function detail screen here let me copy the same code from the home screen returning a view with the text here we will replace home with the detail screen now we need to remove this comment and we will add a stack which we just created now so syntax is stack is a like stack dot it will be a navigator inside this we will add screens to the stack so syntax is again stack dot stream and we need to provide a name props here so name i will give a same name which we have created as a screen that's home screen and we have one more prop called component where we will pass a home screen component which we just created let me copy same thing and uh let's do same for detail screen as well here yes should be capital not as small as okay now let's save this yeah we can see the output on the stack uh the first screen we have given as a home screen and we can see this is a home screen so our creation of this tag is successful now we will add a code in a home screen to navigate to tutorial screen so what we'll do we will add a button and on press of that button we are navigating to detail screen so button title go to detail on press row method navigate we will write detail screen the same name which we have given for the screen now uh the navigate uh like uh we don't know from where it is coming when we add uh any screen inside a stack which provides a parameter route and a navigation we will use a navigation parameter to navigate to other screens so let me copy navigation it is navigation dot navigate detail screen let me save this code okay didn't import button let us import button yeah click on go to detail yes success in ios uh by default it gives a back button and the name of a previous screen and current screen name as a title to the navigation panel so what you can do is you can swipe from left to right in ios to go back to previous screen so this is a default behavior in ios let me click back to go to detail in android what you can do is you can press a back button it will go to previous screen but if you want to go back to home screen programmatically what we will do we will add a same button in a detail screen let me copy and paste and instead of go to detail go to home and home screen let's add a parameter navigation yep save go to home go to detail working as expected now uh we need to remember one thing over here which is very important in a stack when we add a screen it is added only one time so if we try to navigate to particular screen again and again it will not add any new screens in the stack no new instance now let's add a navigate to detail screen inside a detail screen and let's try clicking on detail screen multiple time no it is not going to detail screen again and again the reason is in a stack it is already present and it is just switching the screen position in a stack let me rename back to home screen for this we will add one extra input and from that whatever the entered value we will pass it to next screen so let me add a text input for that we need a value need to be saved in a state so let's use hooks to save the value set state so cost name set name equal to use state okay initial state i will give as empty later we will store our text here whatever is coming from text input so let me import text input now text input value equal to we will give it as state instead of a step we will rename it as a name set name name and on change text unchain text what we'll do is whatever the text we will do set name and pass the value from the text input okay i will make it as a react dot real estate i'm not importing hope yeah now it is successful right now we cannot see a text input so what we will do we will add one placeholder so placeholder equal to please enter your name yeah now we can see the text input now to send a value in a route we will add it as a second parameter and we will pass the same name to the detail screen now we will type some name in a text input and click go to detail here now we are seeing nothing because we need to use that parameter which came from the previous screen so for that in a detail screen we will add a text saying that welcome and name the same value which we passed in a navigation so name we will get it from a route parameter and let's uh destructure route so called name equal to route dot or params let me save yes we can see welcome ganesha so that is the name which we given in our previous screen so uh let's add some style so that we can see it clearly so style let me give a font size to 24 okay we can see it clearly now go to home let us add some style over here margin and let's increase the font size let me clear the name and let us give a new name and we'll see whether it is updating dynamically kumar go to detail we can see welcome kumar perfect stack screen provides the option props where we can add a header style and we can customize a navigation panel so option equal to header style and we will give some background color as a tomato and let's see how it comes go back to home screen yes we can see our navigation panel in a tomato color yes now we applied this color only to home screen the screen again in a white color so we have option like for our detail screen also we can define an option uh same uh like option header style and a background color but let's say we are working on a team based app and we don't want to set the color in every screen so for that we can set a color to navigator directly so that any screen we added it automatically inherits the navigator color so for that let's add and the prop name is a screen option and will give a header style and a background color save yeah now we can see detail screen and home screen both in our tomato color now we don't need this option in a home screen because we are setting color to navigator if you are customizing navigator then it's a screen option and it's only option prop if you are customizing a screen directly uh yes now we are able to do the uh color or static theme to the entire our navigation now uh in our next step what we can do is let's say now whatever the home screen this name is came up from the whatever the name we have given to the stack screen let's say we want to change this name so instead of changing the name here like we can change the title by giving options so just let me uncomment this i will say here title and i will remove these camel case and give a space let's say home screen let me save this and uh it's header style okay we don't want the style we can directly create it as a title uh yeah now this space is applied and uh whatever the name we have given it is coming as a home screen uh let's make uh same thing for the detail screen also so let me copy options here so after the component i'm just actually pasting it and let me make it this as a detailed screen so let me save this yeah we can see the space is introduced but how the name is given earlier it was a full word detail screen so this is about the like uh customizing the header and giving you a custom title okay so the next part let's say uh i want a button over here uh where uh like when i'm coming from a detail screen let's say i want something button let's say simply for done so when i click done uh that some action we need to do it so what i can do is here in option itself i can add we want button at the right so we will say header right so what we can do is we can pass a arrow function uh and oops right we can directly pass our function over here and we can return a button component so title i'll say uh done and i can say on press what it's again a function so i'll just say allied i am rest so we'll save this and let me close this button okay so now we have created a button so let me in next line so so oops something is wrong with my settings okay no issues also we have created a button and we can see this done button which appeared in our details screen so this is coming in a navigation bar so let me click on done yes it is giving a alert action saying i am pressed so we can do whatever our custom action which we need over here and we can like do our whatever business logic so this is how we can add a button over the um navigation bar okay in our next step what we can do is it is saying uh uh go back to home screen so whatever the name we have given to the uh the previous screen the same thing is appearing here in a place of back button so let's say we want to change this one only to the back inside option i will say header so we can see this button as a uh button label convert it as a back earlier it was a home screen so this is how we can uh customize the navigation bar with every component in the navigation bar we can customize how we want it so whenever i always prefer directly using of header right header back title uh so the reason is when hit we use heterodactyl directly header right directly uh the whatever the component will be written it is placed exactly at the right place where margin is applied uh properly at the right side and it is uh vertically center line so no need we need no need of worrying it uh until we are not adding any extra like a big icons over there yeah so now we got to know how to add our buttons how we can customize this back button and how we can change title of the navigation bar next step uh what we'll learn is opening a model let's say a full screen model we want something to come up over here as a pop-up and we should be able to swipe it down to close that model in ios and pressing a back button it should close from like our top to bottom so let's learn how to do it so i'm just going to the navigation documentation so it is showing the model pop-up how it is coming up so let's directly go and uh they're specifying uh whatever the model type during the creation of the stack for this what i will do is let's say we have now function app over here so let me create one more function which is model uh screen and let me say it like i think it's written so which is having nothing but but i'll just have text saying that hey i'm a model screen oops on a model screen so uh what it is doing is uh whenever like uh comes we will identify this saying that hey i'm a model and what we will do is we will apply some font size to sit properly so i'm just copying the same style okay so so this is we have now created a model screen now what we have to do is we need to create a stack where we need to separate out like whatever our regular screens and a model screen so for this what we can do is we'll create a separate stack uh whatever the stacks over there we will call it as a main stack we will create one more stack as a root stack and we will make that one as a model and we will add our root stack as well as uh main stack over there what i do first is let me create a function saying that main stack we two main stack create stack navigator and let me create one more group stack we create stack navigator okay fine so i have created it to start navigator main stack dot navigator and uh what i will do is i'll add main stack dot screen screen i i i need to write on these guys over here whatever the their stack dot navigator so i'm just copying on this part whatever we have written down here so i'm just copying it and pasting over here and let me replace stack with the main stack we have replaced the stack with the main stack and let me also copy the screen options so that the color which we have given to the screen we will get it and let me remove these things which i no longer needed um we will add a code over here so before that we have just created uh our main stack okay let me align this uh so uh sorry okay okay i'll name this as a image type screen so in the mean time we will create one more method that is our sorry root stack screen again method we will written we will create a root stack dot navigator when we creating a root stack dot navigator we will say mode as uh it is giving option as a card and a model we want it as a model we will give it as a model and let's go ahead and create a screen so we have already having a screen so let me say name as a model and let me give compound name which we have already created that is model screen so here what i can return is i can write on a push back we will add our main main uh or whatever the stack which we created and we enable it as main stack screen so call it as main stack and component will give as name stack stack screen okay [Music] navigation container and let's wrap this okay here we are so let me go to detail now go to home so now we have home and detail let's see what happened to a screen component because the screen options is defined here so what i'll do is let me copy this and add it to the and navigate this now okay we got our color back because we have changed our root stack screen now in a detailed page in below we go to home i will add the pop-up so let's go to the details screen here we have a button called go to home so what i'll do is i'll copy it and i will say open up pop-up pop-up and on press what i will do is enter a home screen i'll say my model so let's click on this here we got our model and it is saying hey i'm a model so what we can do here is we can close this or drag down the model so just to differentiate that the model color what i'll do is i'll give a different color to the model so we'll say options whatever the screen options with the header style we will copy and we will here change the color of tomato sky blue or blue okay so oops options uh sky blue is there yeah so now we can you can easily differentiate a robot model and in ios we can hold it and swipe it down so model will get close so click on open model it is open and clicking on the left that it is getting close so basically it should not be a back button so it should be a close button and uh in android when you press a back button this looks something like this yeah so let's say what i can do is header option i can make it as in null so that these options will go up but we need to introduce a button to just to get close so we'll do that one so i will go to my model screen where [Music] i'm defining my model here so you can see it is continuously going and there is no header and you can introduce your custom header so let me go to model screen here let me add a style where i will add a marching of 60 so yeah we can see that i'm a model and what we can do is even we can add a button over here so what i'll do is i'll just do i'll just import route and navigation uh i i don't want navigation so just let's just import navigation let me close the button and i will say engage navigation that go back so yeah so and then open my pop-up and i will say close this model so that's just getting close and close this model so let me say one more thing like whenever we are like hiding the header then the parameter of swiping down option it still resides so that you can just click on like a header part and you can swipe it down and you can close the navigation so uh this is how like uh we just learned how we can create a pop-up screen copper screen uh plays a very important role to give a feel to the user that he is on the same screen or he can lost anywhere in middle of the navigations and it gives a feel that the sub operations of the action is currently doing yes so this is about the model screen we will add a new new two tabs okay and we will see how we can add our images or icons to that tab and how we can show some notification number let's say we have something like a chat kind of thing so uh now what we will do is let me go to official documentation of the uh react navigation and let me travel to tab navigation and here they say we need to install the navigation slash bottom tabs so let me copy these and let me open the terminal as i'm using expo i'm doing expo install react navigation bottom tabs let this install the all the package so once uh this is successful i'll what i will do is i'll import our apps input tabs create three create uh bottom tabs from they have my two bottom tabs so what i'm doing is just importing a bottom tabs and let me just get it over here taps create bottom flaps okay oops which should be create bottom tab navigator so you can just replace it here okay it's perfect now so fast apps create a bottom tab navigator uh so inside of apps i need to add a new screen so what i can do is i will do a nested uh screen with the apps so instead of a root stack over here what we can do is let me remove this navigation container so before that let me add a navigation container and let me add tabs dot navigator and then tabs dot screen i will give it as a phone and component i give our whatever the main stack screen [Music] okay for the first home button let me add one more screen screen which currently we don't have it let's go and create this so function settings screen what we will do here we will just written a view without text saying that this is a second path and we can apply some styles so let me copy the previous text file and we'll give some margin as well okay and here we style we will add some margin of 60 so that we can see okay can't find variables tab okay let me say yes okay this is small come on okay now if we can see the two tabs which came over at our bottom of the screen so home and clicking on the setting we are in a second tab maybe i will make it as a setting staff so this is a settings tab going back to this is a home screen and we have all the options which have we have like a go to details uh on pop-up something is wrong so we need to call our root stack screen here instead of a main stack if we want a pop-up color okay so what's wrong like uh okay so if you are using a root stack screen what i can do is i can remove the navigation container and let me save this yes here we have now if you are clicking on open model it is also working and you can go traverse between settings and like whatever the next screens is available and all the options whatever you're there it is available now let's set some uh tab options what you can do is we can give a screen options we can give take as a route uh route i will return so what i can say tab icon which you will take because color and size okay let me add this component and so basically what i'm trying to do is i'm trying to customize whatever the focus the icon with a different color so let me say let and different icons so focus that i tap i will add some icons so let me add the icon name and so we are getting a route name so what i will do is is true [Music] information circle and what we'll do is animation set okay and see settings then icon name and be so what i can do is i can install so let me go to an icon icon so using import ionicon so let me import ionicons from okay you're seeing some bugs okay sorry it's a hole [Music] okay so i'm adding screen options to the screen it should be to the navigator okay so it's giving some error so i understand okay now yes we can see the icons which we have given information circle and the settings as the ios list box so clicking on that it is highlighted and that your circle becomes outlined clicking on that it becomes filled the vice versa happens with a settings tab also so now we got to know how we can add a tab with the customized icons let's say in my settings a new update is available or uh two new messages is available what we can do is you know uh like we can add options here and what we can do is we can add we can say our table batch and we'll say we have our one message go to look into that boom we can see the number one is displayed over here with a red color saying that there is something new is available so this is we can change this count to our required number so it updates dynamically so if you want to show something new uh our settings is available you can add a as a number in our icon as a badge now let's say you want to add uh one more or tap what we can do is you can just add here one more screen over here and i'm just showing you how it goes and let me comment these settings one i will say and we can see multiple e we can see multiple apps coming over here so i just copied the same component they cannot give us the name with the same name for two different component so this is how you can add how many tabs you want it but preferably never go more than five taps because the size of the or width of this screen is not very big in a mobile phone and your app is always in a portrait mode then never add it more than five so let me i do this okay we are back with these things and we have our nested screens we have a pop-up we can close this mop up we are now done with bottom tabs now the next step is we will create a side drawer menu as a next step what we will do is we will add a side drawer menu so what we can do is i'm going to react navigation documentation where it is saying draw a navigation uh copying the navigation installation so i will do expo in your case it might be a yarn or nvm so oops expo install okay so uh what i did is just copied export libraries of a site drive menu and yeah installation is successful let me just tab so what we can do is we can import the drawer also create drawer navigator from react navigation slash dryer so driver navigator i just imported so i have the app so i will create it here say create our navigator we will add a dryer to the existing bottom tabs so that we will learn how we can nest this together if you don't want nested you can use it independently so before creating the driver or the side dryer let me move this whatever the tab navigation to the net so i'll just create a navigation navigation and let me move this whatever we have created a method tab navigation okay we have successfully moved our method to the that navigation here what i will do is it's the same procedure for navi data and we'll add draw dot screen and name equal to first item and component equal to we need to create a component we will say [Music] first item and we will close this so right now we don't have a first item so let's create that so function first item which will take the navigation okay let me return a view which contains a text just to identify uh this is our first item so this is now we'll give it as a first item okay we can see that dryer has came and we can see the first item and we can click on that so whatever the name we have given it is showing a text item and next we will add some and you can copy the same text type which we have given font size as 24 and just copying the same thing over here so we can see this is first item screen okay so uh what i will do is for a second item uh i want the patch to appear so i'll add one more screen where i will call this as item i will use as whatever we just created that navigation tab navigation now we can see that you can getting two items in your site drive you know first item and when clicking on second item we are getting our tabs and we can go to details we can open up pop-up close this pop-up and we can still get a um back feel uh like if you're in a detail screen and you can get your site drive menu if you swipe it from left to right in ios now let's say i want in first item let's say i want to add one button the like how we can dynamically switch uh between this uh like a first item and second item so what i will do is i will add a button and i will give a title as go to second item and on press what we do is we have already imported the navigation so navigation dot second item let me click this button okay let me wrap the navigation and yeah we can directly go to the second item and let me now let's try to open the drawer programmatically let's say we want to add a button so i will say open draw file and on now clicking that we have a method open drawer so let me go back to the first item and let me click on open dryer okay we got this dryer open and clicking on in various screen it is closing a drawer but if you want some method inside these to close the hair we have our method so called close drawer so you can use it whichever you want it for your business logic so if this uh finishes the uh site driver menu and we can have a open dryer we can switch between the screens you can go to the next switch the tabs you can go to and we can open up pop-up screen we can close this model we can go to home directory and we can get the drawer memo whenever we are above the bottom tabs and we can go to detail when you are in a detail you can still swipe back to come back to your screen then you can get a whatever drawer you're looking for so this finishes up the uh react navigation version 5 and we have covered uh starting from the screens we have created like a nesting of the screens creating a model and customizing the navigation header and creating a bottom tabs and creating the browser navigation and switching between the navigation and listing all these and all are working as expected comment if you have faced any issues do subscribe to our channel thank you [Music] oh

Channel: Smart Code App

Views: 11,958

Keywords: react-navigation-v5, react native, react navigation bottom tab, react navigation 5, react native side drawer, reactnavigation v5 drawer, reactnavigation 5 tutorial, reactnavigation 5 stack, react navigation 5 screens, react navigation 5 params, reactnavigation custom header

Id: AuiHtKKubQM

Length: 63min 49sec (3829 seconds)

Published: Wed Dec 09 2020