Hi and welcome to this tutorial.
Today we're going to be building a single donation item shown here so that we are
able to use these components whenever we want to list our donation items.
So for that we're going to have to create
a new component and we're going to call it single donation item.
And inside this directory we are going to need a file called single donation item JS.
And we're also going to need a style JS
inside which we're going to import style sheet from React native,
create a constant for style and make sure that we have our style sheet created.
And we're going to export
this style from here so that we are able to import it here.
So first things first, we're going to need to import React
and then let's import our style and then let's create
a constant for our single donation item that is definitely going to need props.
So that we have all of these information passed so far.
We're going to be returning null and we're going to export single donation
item that we are able to see it as we're building it.
So since we're going to need props,
let's get our type checker for prop types
and let's create single donation item
prop types and let's discuss what we're going to need here.
So we're not going to be downloading this
image, we're actually going to be displaying real images.
So we're going to need a Uri for the image
that is going to have to be a string and it's going to be required.
We're going to need the badge title so
that we show it to the user and that is going to be a string as well.
And it's going to be required.
We're going to need a donation title
so that's also going to be a string and is going to be required.
And we're going to need the price
for donation that is going to be a number and it's going to be required.
Let's discuss what components we're going to need to build this.
So we're going to need an image,
we're going to need a badge, we're going to need a header component.
So let's import all of these components here.
Let's say that we need an image and we're
also going to need a view container to put all of this here.
Let's import this from React native
and let's import our badge component and let's import our header component.
Great.
Now let's start using the single donation
item from our home page so that we're able to see the changes.
And right off the bat it's asking me for the required prop types that I created.
So because of this title here that was
given in the design, I'm just going to grab a random cactus image, right?
I'm going to save this and I want you to see props that we make here.
So the badge title is going to be environment.
The donation title is going to be three
cactus and then price is going to be $44.
Save this.
And now we have no errors because we have all the prop types passed here.
And let's create a view container.
I'm going to put it inside the parentheses
because I'm going to put some more items here.
And we're going to need a new container
for the image that will have a source of uri with the props that we passed.
And this is going to need some styling.
So I'll just create style so that this image is visible.
And I'll call it Style image.
Actually, I don't need two sets of braces here.
And then we're going to need a badge here
with a title that's passed through the props.
And then we're going to need a header with the title of donation title.
And then we need a price.
So let's check out this price.
So if you're going to see this you will understand that the font size and line
height and all the font styling setup is actually very similar to our type three
header that we're supposed to use here that I forgot to say here.
So it would be a great idea to pass a color that we want to use for the title
so that our header can be reused for the price as well so let's do that.
So for that, we're going to need to go
to the header and we're going to say that we have one more prop type that is
going to be a string and it's not going to be required.
And let's say that by default, the color is black.
But if a user passes a color, we want to apply that to our text styles.
So let's say that props color.
If this is available, then we want to add a color.
With the color that was passed here.
And now we can just save this.
And then here we're going to say
that for the title, we're actually using a different color than black.
So let's test that color here
and then we're going to use this for the price as well.
And here we're going to need this blue color.
And right in front of our number, we're going to need the dollar sign and what.
We also want to do is if the number is not like 44 point
and we want to show it as that what we could do is use the JavaScript function
to fixed two and now we're able to see all of our set.
Up here. Let's get rid of the home
search box so that we're exactly seeing what we have set up here.
And the only thing missing is the image, because we didn't give it any dimensions.
So let's do that.
Let's go to our styles and say that image should be how big.
Its width should be 155 and height should
be 170 so let's do that and here we're going to say that we need a width
of horizontal styling 155 and a height of vertical scale 170.
Let's import both of these styling font here.
Let's see. We see
that the image is looking great here.
So we're going to need to be styling these
items so that it becomes exactly like this.
And we're going to be doing
that in the next video because I don't want this video to become too big.
So I'll see you in the next video and thank you so much for watching.