Combine Bottom Tab Navigator with Stack Navigator in React Navigation 5 | React Native 2021

hi everybody in this video we will be combining stack navigator with bottom time navigator in react navigation 5. since the rise of react navigation 5 is totally a different thing there's the component based system rather than the previous static system so now the child is wrapped inside the parent component in the react navigation five so in this tutorial we would be doing is that we will be creating a nonparency simple application which would be a combination of stack navigator along with bottom time navigator so let me show how the thing would work in the bottom you can see there is screen on screen to screen three these are the particular tabs which would be there as a body type navigator now the thing that we have integrated is the stack so the first screen is having the click button if we click on it we will be pushing a stack a screen into the stack this is something which happens in a stack navigator similarly for screen 2 we have a particular dedicated stack and for the third tab we have a particular dedicated tab so this is something which which is only possible when we combine react react navigations bottom time navigator along with stack navigator so hold on with me and let's get started okay so first we would start with initializing our project so in your command terminal write react native connect with the project name i would be naming it app underscore tech underscore project this is going to be the name of our project that would be the that would be initialized so let's hold on till the installation gets completed you can skip this part let me tell you about the documentation of react navigation 5 so in this navigation tutorial i would be showing you how to integrate both the bottom tabs and stack navigator but before going through the process i want to tell you that there are particular dependencies that are required by react navigation in order to work so if you go to the url navigation.org docs slash getting started you will find a section with the heading install dependencies into bare react native project under this you can find the command it consists of all the dependencies that are required in order to run direct navigation in your react native project so let's copy this command and let's hold on till our project gets successfully initialized all right the project has been initialized access to successfully so now it's time to change the directory so i would go directly into the directory that is have underscores tag underscore project so now we are in the directory and now the command that we copied from the direct navigation documentation we will be pasting it here along with these two these all dependencies we also require two more dependencies that is react navigation slash and react navigation spec and this one is first now hit enter and let it install these dependencies all right the dependencies has been installed and trust me these are the last things that we needed to install now we would start working on a project so i would open visual studio code editor all right now we will try and test whether our app is working successfully or not since i'm on a windows machine i would be using an android emulator to test whether our app is working correctly or not so i would be writing the command react native run android all right our app has successfully installed on the mobile phone and now sk getting loaded see now we have received this particular react built-in template now quickly go to app.js file and try to remove all the existing code for now i would be writing just a hello world yeah so in the projects directory we will create a new folder named screens this will contain all of our screens quickly we will create a new file with the name screen1 not this so our type e is now i would type in hi i'm green one as i already told you this is not going to be a fancy tutorial it would be clearing all your basics not basics about how the particular things are working in the background so you can implement more styling further i will just give it my text we'll give it a color of red or tomato and this line similarly create two more screens that would be total three screens now since most of the thing is name we just need to change the name so i would copy it quickly paste it both of them name it clean to similarly for the third one should be screen three screen three screen three now we have created the screens now we will be using our app.js file as the home for our react navigation logic so quickly import iterate react navigation navigation container all right this would be containing all the child related to our navigation library now our import create bottom time navigator from add the date react navigation slash bottom tabs okay this would be responsible for creating these tabs at the bottom now let's try and create the object cost of object for create bottom tab navigator now let's go further and need all the components so navigation container as i said it would be the parent container for all of the uh high components of right navigation now tab dot navigator tap dot green with equal to three one component equal to screen it would be we need to import it so i would hit enter and you can see things have been imported correctly now let's replicate it with different kind of different screen screen 2 screen 3. okay now let's try i would save all right there's some kind of error the navigation slash needed all right it looks like we have missed a dependency that is react navigation slash need so i would go around quickly and install that okay so now we have installed the missing dependency that is react navigation slash native and after rerunning the app now the build has been started once the javascript bundle will load we would be able to see the bottom tabs so we can see how the three tabs have been created with a message hi i'm screen one on clicking this one i am screen two and on this hi i am screen 3 since the headings of the the title of the tabs are not looking very clear so i would try to give a style quickly tap bar options which consumes an object in this object we will write label style and i would pass in now you can see the fonts have gradually gradually increased i can also change the print color and active print color right active color that's my credit okay so now we have successfully created our bottom tab navigator now we need to integrate the stack navigator within it so now i will try and create another screen that would be the screen that would be pushed inside the stack each and every time so let's create a new file let's name it nutshell screen now this will consist of a message the message will be passed from each of the screen so that we can know which screen has called this nested screen so in the params i would be using route and here we would be showing route dot params dot message this is something we would be sending from our screen so don't get confused you would get to know what the ms g that is message keyword is so let's put a text align center to it all right the task of creating nested screen has been completed now i would go back to screen1.js and in each of them i would give a button to navigate to that screen so let's import touchable opacity touchable opacity acts as a button okay this would be the text and let's give a little bit of styling to both of them so now in the css or the style sheet for the button i would give color of might be yellow would be good yeah color background color would be yellow padding horizontal would be armed in adding vertical we are on seven um maybe yeah for button text i will provide a font size of 18. we should also increase the font size of our text tweeting sorry it should be not a number okay so now we would connect it through our screen so in the on press command first of all i would import the navigation prop navigation and in this i would create an arrow function called for navigation dot navigate the first argument would be the screen that we are calling we haven't given it a name so we will name it nested screen and then we would give it a ramp in the curly bracket we will give it a pram of message this is the keyword that we were using earlier in the nested screen the message would be i came from one this is the message that would be passed into its prompt now we need to do similar thing for screen 2 and screen 3 along with the message would be changing so again i would copy all all of the code for screen one and paste it to this notes similarly we would paste the code in stream v and is the text all right so you can see uh the button it's not looking that fancy we should give up give it a bit width of around 50 percent um green yeah and font color should be white and now i think we we are good to go we need to copy this code to copy these particular styles and push it into screen to screen three so screen one screen to screen i have copied the code in all of the three so now we have done most of the work now we are left with just two tasks the most crucial task is that now we need to create another file which will be consisting of our stack so let me collapse this node modules folder and created create a new file name custom navigation arcgis within this file now we will be defining a how our stack navigator for each of each of the screen would be there so let's import react from react important let's check navigator from react navigation tank now let's create an object for the stack equal to cricket stack navigator now it's time to find each of the stack each of these tabs so let's name the first one as cos first screen navi data you can name anything to these functions this will return navigator along with its type stack dot screen your name for the first one would be screen one and the component for it would be the screen one component so make sure to correctly import screen one between two screen three and nested screen now similarly now name should be same that we have provided to the nested screen and the call when we are calling for the navigation so we have called for the nested screen so we need to copy this one because the name should be exact else we would be finding an error component should be our nested screen now we would export it now let's replicate it for two more times that is for the second screen navigator and third screen navigator so i will copy it and just below it we would be naming it second screen navigator and the name for the screen that is the base screen and screen too make sure to import it similarly for the third screen all right so this was the second last step that we need to accomplish and now we have created the components which contain the stack navigator now go back to app.js file and where we have added the components of screen 1 screen 2 and screen 3 we need to replace them with the components that created in our custom navigation that is for screen navigator first screen navigator second screen navigator and third screen navigator so let's go and quickly add that the imports or all the three screens and import import for skin navigator second screen navigator third skin navigator from strum navigation so i will write in from oops it's wrong from slash custom navigation and the name would be first screen navigator second stream navigator third screen navigator now let's replace them with each of their components so the first would go with full screen navigator screen to use the tab two should be continuing secondly navigator and last one would be third thing let's hit save button and let's see the magic happens and now we can see it works correctly if i click on click me it pushes me inside the stack so the nested screen is getting pushed inside the stack similarly for screen to again if i click and click me see the messages i came from screen 2 and similarly if i go on for screen 3 there's another stack created which is having the nested screen with the message i came from screen three if i go to screen one and go back the snapshot screen gets popped out from this text and now we are again left with the first screen so this was it from today's video guys i hope now you would be able to solve any kind of problem related to direct navigation and implement further you can go on and tweak this code and the link of the github repo is in the description so go on clone the repository and tweak anything that you want this was not a very fancy tutorial but it aimed at solving the problem of combining both stack navigator and bottom tab so i hope you like this video if you did please hit the like button and for such awesome content and regular videos please subscribe my channel because i would be posting here more often so that was it from today guys thanks bye

Channel: Jaymanyoo Singh Chouhan

Views: 5,975

Keywords: react navigation 5, react navigation 5 0, react navigation 5 2018, react navigation 5 3d, react navigation 5 50, react navigation 5 6, react navigation 5 auth, react navigation 5 drawer, react navigation 5 example, react navigation 5 hooks, react navigation 5 installation, react navigation 5 tutorial, authentication, English, react native tutorials for beginners, tutorial, react native bottom tab navigator, react native app, react native android

Id: dkriklWelm0

Length: 27min 54sec (1674 seconds)

Published: Thu Oct 08 2020