React Native Tutorial #26 - Custom Card Component

Key Takeaways

well rather gang so in this video what I'd like to do is step away from navigation and the header a bit now and come back to our design over here or rather lack of design because currently doesn't look great and the same goes for this over here doesn't look that good so we're gonna start to address that severe problem in this video and what we're gonna do is create a custom card components and display each one of these in the card and then when you go to the details display this in a card as well now if you don't know what a card is then you're probably not familiar with anything like bootstrap or any kind of CSS framework because they all have card components all is is like a little box that sometimes round at the corners and shows a drop shadow and it looks a bit like a card with information on just a UI component that's all and that's what we're going to create now we're going to do this inside the shared folder over here because it is going to be a shared component we'll use it here and we'll use in this component and maybe on the about component as well so it makes sense to go inside the shared folder so create a card dot JS file and then at the top the first thing we need to do is import a couple of different things so I'm gonna paste those in because I'm super lazy and the first thing I've pasted in in over here I can't actually move my cursor okay the first thing I've pasted in is react and then also stylesheet and view from react native so now let's create this component so export default and then it's a functional components called card and we're going to take in some props which we'll use shortly now we're going to return a JSX template and the first thing inside this is going to be a view and this view I will apply a style prop to and that's going to be styles dot card and we're going to make those styles in a moment but inside that I'm gonna do another view and this is going to have a style as well and that style is going to be equal to Styles dot card contents now inside this view I'm not gonna hard-code any kind of data I'm not going to output the name of the reviewer or anything like that all I'm going to do is output props dots children now what is props children well if I was to use this card component in another component in a future for example say I did something like this card and then inside that I did a text widget saying hello and then I did another text widget that said hello again then when it renders this component these things right here these are the children of the component props not children so it passes these things into this card component right here and it attaches them to the children property of props so when I use props children right here inside this component because we take the props in then it grabs whatever we've nested inside the card and it outputs it right here so it is in essence doing this right so I'm doing this because then in the future we can use our card for multiple different things now if I was just to hard-code like the review title in here then it means in the future we couldn't use this card on the about screen because we'd have a random review title in there and I don't want that I want the children to be dynamic and we can choose whenever we use the card what the content of the card is going to be that makes sense okay so now let's create a style sheet so const styles is equal to style sheets and dot create and what i'm actually going to do is not add any styles on to this yet i'll make the rules so card like that and then also we want one called card contents but what i'm actually going to do is use this card first of all so we can see and then update the styles as we go forward and can preview them so i'm gonna save it there for now and then inside the home component i'm going to import the card so let me say import and it's going to be card from we want to come out of the screens folder then in the shared one and then we want card so now I can use this card component down in this component right here and we're going to use it inside this flat list so we'll keep the touchable posture because we still want to be able to touch the card and then instead of this thing right here we're going to use a card and in fact what I'll do is keep this right here and we'll cut it and then just put a card component around it so I'll paste it back in so this is the props children we're passing this in to the card which will then display right here but we're now surrounding it in these two views which we're going to style in a second so let me just save this for now and to begin with it's probably not going to look too different in fact it looks exactly the same so let's now go and style this a little bit so first of all the card itself well the first thing I want to do is give this a board of radius which curves the corners and that is going to be six pixels the higher the number the more curved it is elevation that is going to be three and the elevation is how much it comes away from the screen so the distance between the card and the back of the screen you'll see that in a second then I want to give this a background color and that is going to be f FF so white and then I'm gonna give this a shadow offset now a shadow offset is a way that we can give a shadow to something and the offset is how much to the right we want to nudge it and how much down we want to know do it so you know when you have like a box shadow when you're using CSS for web it's similar to that now this is going to be an object where we specify the width and that is going to be an offset of one to the right on the height which will be an offset of one down vertically okay so what I'm going to do is in fact just preview this so far just to see if we can see any of these changes over here it might not look too different at the minute in fact no it doesn't because we need to give it a shadow color and that is going to be three three three and also we'll give it a shadow opacity so how clear is the shadow going to be well we're gonna say not 0.3 if this was zero then we wouldn't be able to see at all if it's at 1 then it'd be very dark so I'm gonna save that now and then see if we can see any changes on the right and no we can't so what's going on right okay I've seen that this is stylesheet' card it should be Stiles I've made that mistake a couple of times now I don't know whether it's auto correction or something in vs code but anyway now hopefully we should see those changes okay so you can now if you really squint see that this is starting to look a little bit like a card maybe not but it's getting there so the next thing I want to do is give this a shadow radius and that is going to be two so if I save this now let's see what that does I think we need to give this a bit of a margin before we notice any difference so I'm going to say margin horizontal and put that at about four pixels and then margin vertical so up and down and put that at six pixels so let me save this now hopefully we can see the shadow a little bit better okay yeah so the shadow is a little bit better bit more noticeable now and this shadow radius by the way basically controls like how it blends in as it goes out further away from the card okay so now we need to add a bit of padding to the actual card content inside so I'm gonna say in fact we don't need to use padding we can use margin because it is inside the card after all some margin horizontal and that is going to be about 18 pixels and also margin vertical and that will be about 20 pixels save that and hopefully that looks quite a bit better okay cool so those cards are looking a bit better and we can still click on those and everything still works now I want to do the same thing for the review details so let's go to review details and let's place all of this inside a card as well so first of all we need to import that at the top so let me say import card from and dot /to come out of the current directory then into shared then we want the card so all I really need to do now is place all of this stuff here inside a card so I'm going to cut all that and use my card components and then paste all of that back inside and hopefully that will look a little bit better now so let me save it and then let's try clicking on one of these reviews okay so now that is inside a card as well and yes it still looks a bit pants but it will look better later on when we start to add a little icon for the rating instead of a number and maybe give some styles to the title etc so for now that's looking a lot better