Were almost complete with our header section to our card we just have to get our image thumbnail to
render for now.
So remember that image thumbnail is going to be just a little portrait of the artist who made this particular
album re-act needed provides built in support for rendering images and it works mostly like how a normal
image tags with each team l work the native library has an image image primitive just like the text
in view primitives that we get.
So in addition to text and view we're also going to import an image tag as well then to make use of
an image or to actually place it will use it just like normal GSX.
So inside of my existing view tag allowed a reference to image.
And of course we also have to tell this image tagged exactly what image we want it to render.
So to tell an image what we want it to render we need to pass it a source prop or a prop named source.
So we'll say Source equals something to this source referenced right here we have to provide a object
with a you are property and the you or I must be a link to an actual image that re-act native can reach
out and download and show inside the application.
So we'll play say object in here with a property of your eye and then right here this is where we have
to specify the actual address of the image that we want to show on the screen.
Now we need to figure out know of course what link is how we however to that link.
If we go back over to our album data you know the data that we're actually working with for each individual
album recall that the image that we want to show for just that little thumbnail is available on the
property thumbnail image.
That means if we have reference in here props dot album dot thumbnail image it will be the length that
we want to show.
So will reference prop's album dot thumbnail image like so cool.
One thing I want to point out really quick here before we test this out in the browser I keep saying
browser you know what I mean.
The simulator before us is on the simulator.
I want you take reference to the fact or take notice that at this point in time we've got three references
to props start album throughout our code in this component right here.
Whenever you start to get more than one reference to a prop out of our props object or you know something
out of our props object.
It's always good convention to structure that property out of our argument of props.
So right now we're only making use of the album props from the props object.
So I'm going to structure out of here.
The album object.
And then on top of that you'll notice that I'm referencing the album object three times as well.
So it might make sense to also structure out thumbnail image title and artist.
Now when I'm further destructuring out of an argument object like this I can do one of two ways I can
either restructure directly from the argument itself and say like you know give me the title and the
artist but that starts to get really long for my argument list up here.
And so I take a different approach.
I'm going to do structure inside of the function body so I'll say that I want my title my artist and
my thumbnail image from the album object now inside of my GSX I'm going to remove all the references
to props start album.
So I go down to just thumbnail image just title and just artist like so OK.
So that definitely cleans up our GSX a little bit.
It certainly makes our method a little bit more top heavy.
You might say but I find that this is usually a good approach whenever you start to make multiple references
to your props object.
OK little went off the beaten path or just a little bit.
But anyways getting back on point.
We've got our image tagged in place right now so we should be able to refresh our simulator and see
the image pop up.
So all refresh and high no success.
Well that's too bad no image appears to pop up here.
So this is a little Godso with Riak native and the images I mentioned earlier that images behave basically
the same way as their HTL cousins.
But that is really not quite true when we use an image in re-act native The image will not expand to
fill the space available to it by default.
Instead we have to manually add in a rule that tells the styling rule that is that Telzey image tag
exactly how big the image should be.
So again the image technically is rendering here right now but because we did not specify a height and
width for it our image just appears to not exist.
So to solve this we must add a style for our image.
So we'll flip on down to our styles object towards the bottom and I'm going to add in another style
property here.
I'm going to call thumbnail style and for thumbnail style I'll give it a set height of 50 and a with
50 as well.
Now we're going to pass this thumbnail style directly to that image tag.
And it should appear inside of our simulator as we would expect.
OK.
So here's my image tag.
I'm going to give this thing a new line just to make it a little bit more legible.
So now I've got the opening image some props and a closing tag right here as well.
Make sure you did not lose the closing tag.
Then we will pass in a style of styles Daut thumbnail style.
All right.
So let's test this in the simulator again or refresh.
And now it appears that in fact we do have our image popping up perfect.
So this is what we expected.
It does look a little bit creepy right now having you know five images in a row but we'll fix it up
as soon as we start adding in the other content for each card in here.
Trust me it's going to start to look really nice.
You also notice that our styling roles are the justified content rule of space around started to kick
in.
Now that the header has some additional with to it.
So we've got some whitespace before between and after each text text tag.
And it's all evenly distributed at this point.
So that's our justified content rule in action.
Okay one last little refactor I want to do in here along the same vains as destructuring from our prop's
object to reduce the references to props and album.
We're now making two references to the styles object in here as well.
So this is an optional reactor it's totally up to you.
It's something I personally like to do but it's not a necessity because we are referencing styles twice
here.
I might also choose to structure from the styles object as well so I can optionally do thumbnail style
and header content style and structure those from styles and then inside of my style object or my style
props I no longer need to reference the styles object.
I can just say directly thumbnail style and also my header content style.
So again an optional refactor.
It's something I really like to do especially once I've got a lot of different styles floating around
on the screen.
OK.
So we're definitely making progress here we've got our image popping up but you know the styling is
still a little bit off.
So let's finish up on the styling in the next section.