We're definitely picking up in this show with our header tag here so let's keep on rolling along and
start fixing amps and the styling.
When you look at the header in the style you'll see in the simulator excuse me you'll see that there
is a little bit too little space right here and there we can definitely use a little bit more space
between the image and the text to the right hand side.
In addition it would be really nice if the first piece of text in here which was the album title was
just a little bit larger at least or hopefully a little bit bolder as well just to make it stand out
a little bit.
So let's start by fixing some of the spacing with this image here.
We'll achieve this by adding some styling to the view tag that is wrapping the image.
So on this the tag right here will set up some margin on the left and right hand side.
That means we're going to have to add another property to our styles object.
So we'll go down to our styles object at the bottom and I'm going out on another property.
They're going to call a thumbnail container style.
So the thought process behind this name right here is that the container that is containing the thumbnails
so you know thumbnail container style.
So for this container right here I also want to kind of center the thumbnail in there right.
I want to make sure this myson centered to make sure that sintered will give it the justify content
of center and align items of center as well and will give it some left and right and spacing by giving
it the margin left of 10 and a margin right of 10 as well.
Now we can add this thumbnail container style to that view that we have up top so I'll scroll back up.
I'm going to put in some new lines here.
Now that I've got a pretty good number of things I need to restructure my styles object.
And then I will pull in my thumbnail container style then we're going to take that style and just use
it on the View tag.
So hey view here you go use your style thumbnail container style cool.
Now remember the other thing that I mentioned is I would really like if our header text you know so
the text tag that has the artist title or the title was a little bit larger and maybe bolded as well.
Let's start off by just making it larger and then we'll decide whether or not we want to build it.
So I'm going to scroll back down and we're going to add a another text rule and here I'm going to put
this one right underneath the header content style because this is the one that's holding the textile.
Add a single rule to just add on to that text and call this one.
Let's do Hetter text style.
And I will give it a font size of 18 so now we'll place this textile as well.
So I will scroll back up to restructure it and then add it to our first text tag.
So here's the first text tag.
It has the album title and I'll give it the style of header text style.
All right.
Time for the moment of truth how are we doing.
How are we doing that check it out.
Let's refresh the simulator.
OK.
Now this is starting to look pretty good right here.
This is definitely coming along.
We've got the nice slightly larger you know not too large but just slightly larger album title at the
top.
We've got some spacing to the left and right hand side of the image and the image is kind of centered
vertically and horizontally inside of that container as well.
So this is definitely getting towards where we want to be.
So let's now continue and start working on the body of each card member of the body of each card we
want it to have the album artwork and we've already got access to the album artwork on our album object.
So if we go back to our album object you'll recall it's available as the image property.
So your image image image each one has the artwork image.
So we want to just add in a new card section right because this is a new section on the card and inside
of that card section we just want to show this album cover just the album cover nothing else so shouldn't
be too bad.
Well in first the card section and then Image card.
Is the image tag inside of it.
So beneath our existing card section we'll add in another one
and then we can add in an image tag as well.
Again I'll give it the source property define you or I.
And if you recall that Al or that image link you know the the actual thing we want to use here is available
as props dot album dot image.
But we are doing some destructuring so I'm going to reference just image and I'll scroll back up to
my album destructuring right here.
And I'm also going to need a structure out of my album.
I'm going to structure out the image property as well.
So I've got my title artist thumbnail image and image coming directly out of the album so I'll go back
down.
Yup we're all good to go.
Let's refresh the simulator.
And ok.
Yup.
It looks like we definitely have the additional section on here.
But as you might expect we did not set a height or a width to the image right here.
And so it didn't actually show up inside the simulator you know.
Theoretically it's there theoretically the image is there but we did not give it a high or a with.
So it gets condensed down to basically zero.
This time around however we decide on the dimensions of our image.
Things start to get a little bit interesting if you think about it.
Remember I said that we have to specify the height and the width of the image.
But this time we have an image that we want to stretch all the way from the left hand side all the way
to the right hand side.
And that with the right there that is not something that's very easy for us to hard code right.
It's not easy for us to hard code that value and here's why.
We do know in theory you know maybe we haven't really done this but in theory theory we know that with
the device that we're on right.
But then we will also have to add in like the margin over here the margin over here.
And then any internal margin to the card section as well.
In other words it's just really tough to calculate the width of our image we want it to span the entire
width of this card section right here.
So to solve this we're going to use just a little trick with re-act native styling images.
Galleries a little trick.
First we'll add in a new style to our styles object and I call this one just image style.
So then here's the trick I am going to set a fixed height.
Now I'm going to say that's going to be 300 which is a pretty respectable height.
Now here's where it gets interesting.
To make sure that the image takes up the full width available to it you know always from the left hand
side of the card to the right hand side and you throw on a property of flex 1 and a with specifically
of NULL.
So I know you know your thing yourself Stephen Noal is basically like undefined Why do we even have
to define it.
Just trust me here.
I'm going to provide a with of no.
Now I will apply this image style to that image tag.
So I go back up to the last image and I'm going to give it a style of image style and then we also need
to structure this out of our style object.
So scroll up a little bit more find my image or see my style's object right here and I'll also destructuring
out the image style.
OK.
So let's give this a shot inside of our simulator now.
I'll refresh our hot dog.
That is exactly what we wanted.
Our image is stretching all the way from the left hand side to the right hand side as well as perfect.
So let's scroll down to see you.
Wait a minute wait a minute I'm clicking and dragging here which is traditionally how you scroll in
the simulator but it appears that there is no scrolling behavior whatsoever.
So that is definitely not expected.
We have five albums on this list though so I know there are Alban's further down the list but I apparently
just cannot scroll to them.
So we definitely have a little bit of an issue here.
Let's continue in the next section in and explore this bug a little bit more.