[Music] so today we are going to make this beautiful bottom Napa opportunity bar in react native no libraries are used in making this bottom left bar I have very good custom from scratch so first of all I am going to make this background which is grey then I am going to add put them in a bar and I am going to add this curve and action button and then we are going to add icons home search menu VTC then we're going to add home search menu setting text if you are you searching for a custom but on the bar or tab bar you are at right place so let's get started you want going to you this bottle now get ready for parent so I have just created I'm put on navigator component which I haven't put it here and you know what applause I have hard-coded it here so in our bottom left get to class just to save time I have just set up a toggle open function background view and I have imported some important thing like a large tag in the 9030 beautiful plastic style in 10 view which we are going to use make this over bottom neck path and as you can see we have some styles to it which is going to be position which is going to be absolute float and line cells which is going to be Center and which is going to be great and with which is going to be 70 and right Jesus able to be gentle and already which is also going to be 35 we just elliptical for the radius and important to learn it bottom 35 and didn't test it is going to be 10 I'm just let me just affected God degrees readability of the code and now we are going to create or what view which is going to be touchable so I'm going to add touchable adults attack and I am going to blows it back and she'll talk and I have to format goal and one press of touchable good or feedback I'm going to add this door toggle open I hope you have talked about code we are going to take up an image which is going to take styles and these tiles are Swift which is going to be 60 and height which is also going to be 15 and resides mode which is going to be contain and source so I'm going to add my sauce so I'm going to add this action button you can hear shift option after the last before my cold and I'm going to just make it work and four will do we went up and multiple styles styles stored [Music] and style start action pattern so those of you who do not know what why I am doing this basis here just basically using multiple tiles here so we are going to create button connection button in the world starch class styles and akin madam and in a button we are going to add bit 60 height is also going to be 60 and aligned atoms Center and justify content shadow it is going to be [Music] you and Chad opacity which is going to be so pouring foam you can add as much you like and head of that which is going to be X 2 and 5 0 and we are going to add shadow bodies it is going to be 2 and radius which is going to be 30 and we are going to position it to absolute and white 0.5 and left so as you can see I have just added said offset 2 and 0 so I am also going to add shadowopacity it is going to be 5.0 and shadow below which I have a big blue we will continue to great action button styles we are going to say background color taupe uniform ID code hash ffs and text effect and eight-five height text-shadow yes it is going to be ten and borrow it which is going to be 2n broccoli which is going to be white so we have just set up our style start button is not applied shadow pasty oh my bad this shadow pasty so as you can see I have just added up Action Button in a world that will go ahead background view off the bottom left path which is going to be white so I am going to add a view which is going to be and I'm going to add some styles to it it is and I'm standing and I'm going to say privation just going to absolute and I'm going to add background color which is going to be white and I am going to add border which is to - and I am going to add and I am going to add some radius which is going to be three and when to add shadow pasty which is going to be 2.3 and I am going to add shadow area which is going to be three and I'm going to add shadow that which is going to take height three bed three and I'm going to say which is going to Martin tickle and it is going to be five and I'm going to add bottom zero wait new percent height seventy seventy flex traction it is going to be row and justify content which is going to be space between and some padding which is going to be 25 and daddy holding them to which is going to be 10 and we have just added over both of you so as you can see I have added more than we offer bottom Deborah now we are going to add some icons to it so now we are going to add our icons with text so for I think I can so we are going to add we're going to save extraction which is going to be a column and line items it is going to be Center and we are going to justify content this is going to be centered on Association f2 for byte code and then we are going to add some touchable opacity like I am past all eight so I'm going to say let dot left and click and just going to close this and in over that simple past if we are going to act or image which is first we have have or Omegan blow the tournament cold like some spice to it which is going to be 5:30 and we are going to add source to image which is 1/2 URI URI so I'm going to add and I am going to identify expected so basically sling with that let's go miss Beckett so I'm going to add a path to it which is going to be what to say I'm clicked or I'm think we just keep it client old and I'm going to add image which I have Internet and now we are going to add some text to first I can so behind over touchable the past American tribes on the text and - closet still flipping out my cool is going to be justify content central line item turn just a line item Center and I'm going to say he'd like oh my and that's all so let me just check why it's given everything that one path is empty so I'm going to say and so as you can see i intercepted our first icon so like this I am going to clean this and I'm going to make multiple copies of this so just copy and back to you so you just duplicate the view with icon and text and I am to place some Vikings with different angles and taxed like settings menu and search so as our final said we have fully completed over bottom depa you can customize it as magical and like and you know world m2g Spile I have put it like button navigator so you can use it anywhere so thank you so much for watching please write some comment if you want any questions or please subscribe to my channel