Hi, and welcome back to our tutorial.
Today we're gonna be making sure that our
single donation item looks exactly like this.
And the first thing we're gonna do is
we're gonna put this badge on top of our image.
So currently, our badge is actually
displayed like this, and we don't want to be doing that.
So let's create a view container for our badge so that we can apply styles to it.
And let's say that style's name.
Is going to be badge.
And let's go to our style file,
create a badge and let's say that we need position absolute.
And after we set it to position absolute, we don't see this anymore.
And it might be because we need the index.
So let's set it to one and great.
Now we are able to see it.
Let's see that this has from top and left borders.
So from top it should be
vertical scale 13 and from left it should be horizontal scale ten.
Let's save this. And great.
Now we see the badge appear here.
Now let's go to single donation file and let's see what's the distance between
this container for the title and price and it is 16.
So let's wrap this in a view container.
And let's say that this is a style for donation information.
Let's copy this name and paste it here.
And let's say that it needs margin. Top of
vertical scale 16 and there is some
distance between these items as well, which is Margin top five.
So let's wrap this
as well in a view container let's call the
price style that we're going to define here
and we're going to say that this has margin top of vertical scale five.
Great.
So now this is looking good.
And we want to make sure that our image is fully visible.
And for that, we're going to have to go to image and apply a resize mode contain.
Great. Now we're able to see full image.
So now that we have all of these ready,
we might want to try out how we would lay out.
For example, two
such components next to each other.
So for that we found just have to create
a view container on our home page and we're going to put two items such as
these and we're just going to apply a style.
Of flex, direction row and justify
content space between this looks great.
And we could also apply some kind of padding, which is 24 horizontally.
So let's do padding horizontal horizontal scale 24.
And if we do that, this is how it's going to be visible.
So that's all for this component.
I think we are fully ready to create this page ourselves.
And all we need to do really is define a styling for paragraph text.
But I think we're just going to take care of that in the screen component itself.
So we're ready to start building this application.
From now on,
we're going to work on the payment page separately because this is going to be
a part of a module where we're going to set up an actual payment.
Let's keep this for another module.
Thanks so much for watching.
And I'm very excited that we're going
to be moving to our new module, where you're going to be learning how
to set up a Redux store and manage data with it because it's truly amazing.
And the whole reason why we only built
the components here and never manage the data or created the actual pages is
because I want you to learn how to do all of that using Redux.
So I'll see you in the next section. Have a great day.