Custom Drawer Navigator in React Navigation 6

[Music] hey guys welcome back to my youtube channel today in this tutorial i am going to show you how we can add a custom drawn navigator in react navigation version 6 and here we have different colors for the active menu items that mean when we are on the home screen that time this home menu item is active and when we are on the profile screen or any other screen mentioned in this menu list that item is active in this custom drawer and let me tell you that this tutorial is a part of a tutorial series where i am showing you how to implement different types of navigators in react navigation version 6 along with some cool ui so if you haven't seen those previous tutorial yet then i will highly recommend you to see those tutorials you will get the link to that playlist in the i icon of this video or from the description below so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever i post a new tutorial on this channel so without wasting any more time let's get started with the tutorial [Music] okay so this is our project and previously we have created this screen and this home screen as well so if you haven't seen these tutorials yet i would recommend you to watch this tutorial first then it will be helpful for you and before proceeding with this tutorial i am going to change the project structure little bit here so here as you can see we have this main screen which means this screen i am going to create a new screen for this so i will cut this from here and paste it in another screen and that screen will be onboarding screen.js so here we have this screen okay let's change the onboarding to capital o and let me paste that here and along with this we need to import some api from react native and react native vector icons as well to support this screen so i am going to paste those here now save it after that i am going to create another new screen called login screen [Music] and here it will be simple screen i am not going to do much more thing here and along with these directories i will create another directory in this src directory called navigation now within this navigation i will create two file first one will be or stack dot js and another one will be abstract.js for the auth stack i am going to create stack navigators so we can use this thing which we have implemented in our first tutorial of this series so let me use that here and we need to create this stack as well so we have this stack available and for this stack first we need to copy this thing and then we have this stack and as we are using header shown false for both of these screen we can configure that in the stack navigator within screen options so here i will provide header shown as false so we can get rid of these two options and instead of main we will have this onboarding screen so let's import that and let's name it onboarding and we will have login screen here which we have just created in which we don't have anything yet now after that we can export that auth stack here so here we have the auth stack imported now if we save it nothing changed but if we click here then we will have some error because i haven't changed the on press function here instead of home it will go to login now after saving it let's click here okay we need to rebuild our app by providing this npx recreative run ios command then right now we don't have any problem so here you can see we have this login screen and we can go back to our previous screen which is our onboarding screen so for the login screen let me change some layout so that it is properly visible right now we can see it properly so we have this hot stack now similar to earth stack i will create this abstract with home screen and it will be home now if we display app stack instead of what stack and we need to import that as well and let's comment it out now we can see we have this home screen present and based upon the authentication we need to display these two different stack and as we haven't implemented the authentication in our app yet we will display one stack in here and right now i will display abstract because we don't need to do anything here right now we will work on this screen and when we will click on this profile picture that time our drawer will be opened and right now let's clear this app.js file so we don't need this home screen gaming app and we don't need this react native api as well and we can get rid of this stack also now we have cleaned our app and we have structured our app properly now let's see how we can implement raw navigator in our app for that let's go to the official documentation of the react navigation and here within api references within navigators menu we have this drawer menu and here we can see we have the installation guide for it so let me copy that and paste it here after that let's install these things as well so we have this gesture handler and reanimated i have copied it and now hit enter okay so these things are installed now within this abstract we need to implement the draw navigator and for that here we need to import react native gesture handler in our entry file so here i will do that within our index.js file at the top so it has been added now save it now we can close this file and also we need to do this cd ios pod install so let's do that and after doing that we need to rebuild our app again now go back to our root directory and rebuild the app and now here instead of this stack navigator we will use drone navigator so we need to import this thing so instead of this we will import create drone navigator and we will use this drawer instead of this stack so here it will be draw.navigator and similarly it will be drawer screen now save it now let's slide from here so here we can see we have the drawer available so we have created the draw navigator successfully now we need to create the custom drawer which we want and for that here we can see we have some other menu items as well like profile messages so we need to create those screens as well let me quickly create those screens here [Music] so here i have created this full screen profile screen messages moments and settings screen and these are some basic screen we can close these files now and we will use those here so after this home screen let's provide profile screen so it has been imported and for the name of it i will provide profile similarly we will have messages screen [Music] and last we will have the settings screen so we have imported all now save it so here we can see this list present now to customize this raw navigator we can provide drawer content and here we can pass some props to our drawer component which i haven't created yet i will create it in a moment and we will pass drawer content props to it now we need to create that custom drawer component and here we will receive props so save it and save this abstract file as well okay so here it is showing the error it is not finding this custom drawer so we need to import that now it has been imported and here we can see right now it is completely blank so it is rendering the content which are present in this custom drawer return statement so now let's start the customization of it and to customize it first we need to import few things from react navigation drawer and first we need to import drawer content scroll view and then we need to import drawer item list so now here instead of this view let's provide drawer content scroll view and within this drawer content scroll view let's provide drawer item list and let's provide these props here and for this item list as well now after saving it here we can see we have the menu present as before without providing custom drawer right so by default it has this drawer content scroll view and drawer item list so we got the items now we can do the customization of it first we need to provide the header and for that let me wrap this thing within a view and for this view style let's provide flex 1 and after this drawer content scroll view i will provide another view and here let's provide a text so here we can see at the bottom we have the custom text present we will look into it later first work on this drawer content scroll view let's provide content container style and provide a background color to it and here i will provide this background color now after that i will provide an image and i will provide that by using this image background here within the assets directory within image i have this menu bg.jpg file so i will use that image first let's provide the source here it will be assets directory images then menu vg dot jpg okay it will be dot jpg and let's provide some style to it i will provide padding 20 so here the image is visible so after this image i will have image for the user profile so i will provide that within the image api and that source is also available within our assets directory and that is called userprofile.jpg file now let's provide some style to it i will provide height and width 80 border radius 40 and merging bottom 10 pixel now save it so it's looking good after this image let's provide some text and the text will be the username so i have provided a text but this text is not visible let's provide some style to it first i need to provide white color then let's provide some font size font family roboto medium so now it is properly visible after this text let's provide another text for the coin achieved by the user let's provide any random number so it is present here for it also we need to provide custom styles i can copy the styles from here to here we don't need any font size customization and it will be roboto regular okay so it's looking good beside this text i want to provide an icon and that i can will be the react native vector icons so let me import react native vector icon iron icons and font awesome five so we will require these two library from react net effector icon and here it will be font awesome five and the name of the icon will be coins for the size of it i will provide 14 and for the color of it i will provide white color but now we can see that it is not positioned perfectly i want to position it here beside of this text for that let me wrap these two items within a view and for this view style let's provide flex direction row okay so it's looking good now after that we can see we have this color in this menu items but it is not looking good i don't want that for that let's wrap this drawer item list within a view and provide some style for this view i will provide padding at the top as well which will be 10 pixel so it's looking good but now if we look into here that we have this text along with this icon right so i want to provide that but here we can see that we don't have any separation for this item list as all the menu item list is coming from this drawer item list right so we cannot do that customization here and if we want to do that here that is also possible by providing this drawer item api but i have seen that by using this drawer item you can do the customization like providing the icon but there will be a problem like as we want to customize the active menu color but that is not possible with this drawer item actually that is possible by the documentation and if we scroll down here we can see for the drawer items we have all these props available active tin colored inactive tint color active background inactive background so these are the props available to customize it but i have seen that these props are not working for the drawer items so that's why i'm not using the drawer item here instead i am using this drawer item list but we can achieve whatever we want and that we can achieve from this drawer screens here we can provide some options and that option will be drawer icon to provide the icon for this menu item and here we need to specify the icon which we want to provide and for that we need to import icon from react native vector icons and i will use ionicons so i have imported it now let's provide the icon and here it will be home outline for the size of it i will use 22 and for the color of it i will provide a dynamic color here which we will get as a prop to this drawer icon so let's provide that color here after saving it we can see we have this icon present so similarly we need to provide these options for all of the items so for the profile i will use this icon for the messages i will use this icon it will be chat box now for the moments i will use this and for these settings i will use settings outline so all of the icons are present now but we can see here in between these two items there are lots of space but i don't want to provide that much space here i want to provide a little bit space like this so we can do those customization from these screen options let's provide drawer level style and let's provide margin left minus 25 so now the space between these two item has been reduced let's provide some other customizations like font family roboto medium for font size i will provide 15 pixel after that now let's customize the active color and we can do that by providing drawer active background color and here i will use this background color for the drawer active paint color i will use white color so this tint color is the color for the icon and the text and for this active background color it will be the background color of the menu item so it has been applied now i want to provide another color which will be the drawer inactive tint color so i don't want to provide any color for the inactive menu items i want to provide the color for the text and the icon which are inactive and that color will be this dark color so now we can see that it is looking as we want now we have just only left with this bottom part of this drawer and that we have already done within this view which we can see here right and it is pretty easy to do first let me provide some style to this view let's provide a padding 20 border top with one pixel for border top color i will provide this color so now we can see there is a clear separation to these two section now let's create the menu item here and for that we can use touchable opacity which we need to import from react native so here it has been imported for the touchable opacity on press i will provide a blank function and now let's provide some style to it and i will provide padding vertical 15 let's provide anikans icon and the icon name will be this and the size will be 22. now we need to make it like this we can wrap it within a view and for this view style okay let's provide the closing view and here for this view provide the flex direction row and for the align items let's provide center now we need to provide some style for this text as well so first let's provide font size 15 and font family roboto medium and some merchant left to it so it's looking good now i will change the text now let's copy this thing again for another menu and that menu will be sign out and for the icon it will be exit so now it's looking good now let's see if we go to profile screen that time we have this profile menu item activated right similarly for the messages and other screens as well right so it is working perfectly fine now i want to open this drawer whenever we will click on this user profile image and for that we need to go to the home screen and here in the home screen user profile image we have this go back but right now it is not going back to anything we need to open the drawer and for that we have this open drawer function now save it now after that whenever we will click on the user profile image that time our drawer will open right so this is the tutorial guys i hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorial like this and let me know by commenting down below if you have any kind of suggestion for me then also let me know and don't forget to share this tutorial with your friends and colleagues and i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 132,759

Keywords: react navigation 6 drawer, react navigation 6, react navigation 6 custom drawer, custom drawer in react navigation 6, react navigation 6 drawer custom header, custom header in react navigation drawer, active menu item in react navigation drawer, change color of active menu item in react navigation 6 drawer, react navigation v6 tutorial, react navigation v6 tutorial for beginners, react navigation tutorial for beginners

Id: l8nY4Alk70Q

Length: 21min 5sec (1265 seconds)

Published: Mon Nov 01 2021