Making beautiful buttons in react native

all right so the link that we were trying to use in the last video turns out it's not working it's sending a bad request but no worries I got another link for us and we'll be using this image instant which is a pretty nice image I clicked it I have a lot of other clicked image in case you want to check them out it's up here all free absolutely free uh for all the commercial use and everything hey there everyone hitesh here back again with another video and welcome to the react native series we are trying to put up the world's best react native series uh totally free on YouTube along with the source code and that's all possible because of our sponsor hash node in case you are not aware about the hash node it's the programmer's best friend for writing articles there is already a huge huge Community available for that and you can just go simply on to Hash node and start your writing your articles you can have your own custom domains there's a lot of amazing articles and knowledge already being shared you can also start your article by sharing them and recently they launched their new editor which is just crazy you absolutely should try this out you just have to click on the create and try this out the moment you hit the slash it just busy wig what you see what you get so try this out it's absolutely amazing and fantastic now moving back this is our app that we created into the last video uh this is okay ish not the perfect but the thing is the point is that we saw that how we can have touchable opacity and all of that there is a lot more that you can go ahead and work around with these touchable opacity make them look like buttons there are buttons as well that you can make in the react native we'll talk about them in some another video but right now we will be just going with a really simple so let me just go back up here and all of this so let's try to see that how we can actually write some styling for this and can turn it into a decent card that we always have been doing so just like this uh we always have been doing the font size of 20 A4 onto this one the moment we save it it looks decent but we always put up the font weight and put some padding so let's go ahead and do that font weight and we are going to call this one as bolt then we always go ahead and put up the padding and the horizontals so padding horizontal we usually go for eight so this gives a nice uh kind of a symmetry for all the headings that we have been putting up like elevated cards flat cards and all of that now let's try to make this card a tiny bit better so let's go ahead first let's go ahead and put up a width here let's try with 350. and we'll also get some height for this one so height we are gonna go ahead and get 340 as soon as I save this uh okay we can definitely use a little bit of the margins and all of that so first try let's go with the Border radius so we're going to go ahead and say border radius there we go and we'll start with six to see how does it look uh right now the card is not going to be coming into the picture itself it will soon but first let's give it a little bit of a margin as well so we'll go with the margin vertical and margin horizontal so margin vertical and let's try 12. and let's also try margin horizontal and that will also go for let's try 16. there we go so looking a little bit more like card uh but not really the card actually comes to the life itself uh when we are going to actually put up this card elevation so elevated card let's try a little bit of a background color so that we can see the card is actually there or not so background color will go with the white but definitely you can go ahead and choose a a bit of a different color so we're gonna go three four five six save that and there we go uh we have the card but rest of the elements and all the titles and everything is gone I think we can pick up a better color than the white so let's go ahead how about if we try this let's try there's nothing wrong in trying new fancy colors so try this out all right a bit better not perfect but hey there's nothing wrong in trying new things let's try elevation so this is one of my favorite property you don't have to do anything and it just gives a kind of a three-dimensional look automatically to your card one of my favorite property uh we'll also use a little bit of the offset we'll bring it from the fancy card so we have this Shadow offset so let's go ahead copy this and we'll bring it up here because that's exactly same we won't be going into shadow colors but actually we can go let's let's go into that so we'll go for shadow color let's go for a color of we'll go with the 333 uh not very much visible but to me it is but hopefully it is also visible to you we'll also go for shadow opacity Shadow opacity and we'll go with the numbers I told you the shutdown opacity range goes from 0.0 to 1 and will go for 0.3 or 4 whatever you like so there we go I'll just use this much only but you can definitely go for the shadow radius and more now what I want to do is I want to go for header container so this is the one and if you remember we actually used header container and inside that we are using the header text so this gives a tiny bit extra control for example I can go ahead and set a height onto this one let me exaggerate a bit by using a 40 and notice here now the entire height is there onto that element that view or the header container we can also go ahead and set a flex Direction onto this one so let's go ahead and say Flex direction that we'll have as a row this will give us an additional advantage that we can use justify content and align item onto this one so let's go ahead and say justify content will be Center save that there we go and now we can use align items and that can also go on to center now this brings everything in center but again notice we are just playing around by having the flex we don't need to really specific Flex because it's a flex automatically now we can transform this text into tiny bit better so this is a header text let's try to make it a tiny bit better all right so first we'll go with the color text color I'll choose white because I think that is good enough let's try this and we'll use white uh or we can go with the black as well I think black will look much better black is nice and shiny here let's also use a font size and let's give it a 15 or 16 ish font size yep 16 is good enough and let's put some weight onto this one so we'll be using font weight there we go and although we can use the bold and stuff but what you'll be noticing is actually the numbers being used because that stays much more consistent so I'll go for 600 that is the look that I am happy with as of now now coming up onto the card image we won't be going much uh 190 or this is fine enough there are more properties that you can use that you can pass on directly as a prop into these images up here so you want the image to be shrinking fit all and all of that so those properties are available and you definitely can use that now let's come back on to the body container now inside the body container we won't be doing much let's set a padding from all the sides whatever the padding you like maybe 10 or something so that it looks nice all of that and notice here our readme button follow me button are not inside this body container if you remember uh this is the body container in which all the text is going on but our these buttons and everything are outside of this one we can also make them inside no problem at all just the basic looks and feel how you like it now let's go ahead and work with the footer container so again we'll start by having a padding let's try eight there we go it's still going a bit of outside but we definitely can play around with that let's first change its Flex Direction so we'll go ahead and say instead of the column let's change it to row so that automatically read me and follow me makes onto the same line and this is the property that you'll be using quite a lot in which you sometimes want things to be top and bottom which is a default Flex Direction in react native but sometimes you want them on to the left and right or horizontally so in that you can change Flex is your best best friend around up here now let's go ahead and try align items as well so align items and we'll be going for Center save that and this is not going to be impacting right now but just give me a second we will also go for justify content and in the justify content we won't be using Center this time we'll be going space evenly save that and now we have a readme read mode and follow me button exactly the place we have now uh we can actually try a line item just like this and this is not impacting as of now but it should be because this actually moves a little bit there okay and this is it now let's try this social link let's try to have a little bit of a font size onto this one font size and we'll have a 14 of font size uh 16. yep 16 is good enough and we can have a color as well on to these ones so let's have a color of uh black would be good so let's try hash zero zero zero zero and there we go we can also have a background onto this one in case you want uh we can have a background color of white maybe that will look good maybe not we'll try save that and we can have a little bit of a padding as well oops let's go ahead and add a padding horizontal and we'll have a padding of about nine a little bit more would be good enough 10 uh maybe 20 yeah 20 is good enough and we'll have a padding vertical as well and we'll make this one as how about eight uh too big six yeah we need to change the card size a little bit so we'll go up here and the card height instead of 340 we'll make it 360. how about that yep that is the card design I'm liking it uh this is the one that I'm liking as of now you can definitely add more properties like a button elevation make them a little bit bigger you can have some of the Shadow properties something like this uh we can have a shadow offset and all these things let's try this if that makes any sense always always keep a try and uh this is not making sense so I'm not gonna have it they are making sense a little bit but I'll just remove it and then what we can have is a border radius border radius there we go and let's try four and six maybe yeah six is little bit better now it's your job to make this card a tiny bit little bit better in case you want to because there's so much room uh to make this card much more beautiful uh maybe you can have an underline here maybe these buttons can be much more better so if you'll notice here if for a moment if I just remove this uh on press let me just go ahead and comment out this on press for just a second and what you'll notice is on to this button which is a social media follow me button since this is a touchable opacity notice here I don't have to do much these all properties and styling are being added just because this is a touchable opacity uh there is a lot more ways how you can customize and modify a button but this is the one that you can have now your job is to Simply go ahead and study more about the stylings and all that surely we'll learn more about them in the upcoming videos but simply go ahead study more about touchable opacity and please please this is your assignment you have to do it is write an article more about these links and touchable opacity how you can have these linkings and the touchable opacity on hash node make sure you share that up with us in the Discord server or in the LinkedIn or on the Instagram tag hash node as well this is compulsory you cannot avoid it another thing which is compulsory is hitting that subscribe button because that is what is my motivation share the series with all of your friends around and I'll surely catch you up in the next video

Channel: Hitesh Choudhary

Views: 27,383

Keywords: Programming, javascript, React-native, react, hashnode, android, mobile apps

Id: QpTPQmBsOyI

Length: 13min 10sec (790 seconds)

Published: Thu Feb 16 2023