We've now spent a lot of time discussing fluxbox.
So it's time to apply that knowledge to our component.
Recall that our goal that we established in the last section was to use a new view container.
Two of them in fact one is going to wrap the image to the left hand side and then another one is going
to wrap the text to the right hand side as well.
So I call this text container.
It is a view tag that is going to serve as a text container just to be clear with the terminology there
that text container should have the rules flex direction column to make everything line up vertically
and also justified content of space around to make sure that we get equal spacing of our whitespace
above the text tags between them and below as well.
So let's get started with this.
I'm in my album detail can bring it right here and here is the card section with our existing single
text tag.
So it is to this card section right here that we're going to want to add two new tags one for the image
and then one for the card.
Seems to me that text as well.
So we'll start off by importing view at the top from re-act native and then we'll also add in our two
new tags in here.
So one that will eventually house the image that we still need to add and then the second to wrap the
two lines with text that we still need to place.
So we've got the one existing text tag right here for our album title.
We'll add in another text tag to show our artist name as well.
If you recall the Jaison data that we got back from our album Here it is right here and I know it's
kind of small I mean dial it up.
There we go.
So right now we're making use of the album title property.
We also have access to the album artists property as well and that's how we get the artist's name.
So inside of our composing right here if we reference props album artist that will give the artist's
name inside of this text tag.
So we'll say prop's album artist.
And so now we would expect to have both our title of the album and the artist name in here as well.
OK.
Now last step right now we're going to out in some styling rules for this single view container right
here in our sole purpose is to make sure that this text lines up vertically number one and then it uses
that justified content of space around so that we get equal white space above between and below the
two text tags.
So we'll start off by adding in our styles object at the bottom and then I'm going to use a style name
of header content style.
If you can think of a better name and this right here definitely go for it.
Remember that all the property names that we use are more or less arbitrary right.
Is just something that has to make sense to ourselves as engineers when we come back and look at this
component some number of you know weeks months years in the future.
So it's just something that needs to make sense to ourselves.
So inside of here we'll specify our flex direction of column and justified content of space around.
Next we will apply this style to our view container right here.
So we'll say Stiles style excuse me is Styles darte Hetter content style like so.
OK.
So let's now refresh our out and see how we're doing.
So cool.
We definitely have both the album name and the artist name right beneath it.
You'll notice that right now the card that we have is kind of condensing down to just wrap or a phrase
a different way.
The Cards high is dictated by the amount of text that's sitting inside of it right now.
So at this point in time these flex blocks rules we add specifically the justified content space around.
It appears that it's not really doing anything at this point in time.
It's when we start to resize the height of this thing you know the height of this section right here
that we're going to see how that justified content of space around works the height of this section
right here is going to start to change as soon as we add in that image tag.
So let's continue on the next section and start working on getting that image tagged in here.
So we have a current section with some measurable you know kind of non minimum height.
So I'll see in the next section