We now have a list item component that will be responsible for showing a single library at a library
that this row will represent is available to us as this stock don't library.
All right.
Because we passed in the prop called Library.
So inside of this component list item right here we can just reference process a library and Boomer.
Good to go OK.
So keep in mind that that library object that we passed in here has both a title and a description.
So if I pull up in my library list Jason File and this is where we defined the libraries.
It has a title a description and of course it has the idea of wealth as well.
So we need to like basically add some GSX into our render method that shows the title and the description
you know because that's what we really want to show to the user.
That's what we want to communicate.
OK.
So inside the list item I'm thinking that we should probably make reuse of some of the components we've
already created.
Right because we've got all these great looking components already made.
So I want to reuse something out there.
I don't suggest that we show a card section component and put the name of the library inside of it.
Then whenever I use it like TAPS that card will expand with a second card 6 section with the library's
description.
So whenever a user taps on the thing that's when we want to expand it and show the library's description.
Now note that I said that we only want to use the card section component here instead of the card as
well.
And you'll see exactly why that is we checked this out inside the simulator.
OK.
So first we will import the card section of the talk.
So I will import a card section from the common folder then I will place it inside the render method.
So I will return a card section like So next we do need to place the name of the library inside of the
card section so we'll need a text tag to be able to show some text inside of here.
We don't have a text tag imported just yet so we import that from the re-act native library.
So at the top import texts from re-act native.
Now inside the text section we can place our text tag
and inside the text tag I will reference this props library dot title.
Remember the library is passed in as a prop called Title and library Earthsea has a code library and
the library itself has a property called Title.
So that's why we have this Propst out library that title right here.
OK.
Probably a good time to check this out in the simulator.
Let's see how we're doing.
Make sure everything works.
So don't flip back over the simulator.
Let's refresh.
And all right.
Hot dog.
That does not look half bad.
Definitely does not look half bad.
You'll notice that because we are using the list view component by default we get some nice scrolling
behavior.
Of course it looks like when I scroll down the with the list stops right here which is maybe not intended.
See it's kind of cut off right there.
So maybe you'll need to do a little bit of work on that front as a side note.
This is why I want to use the card section without the card with just the card section.
We get some really nice looking segmented rows like this right here.
Right like the 20s is its own distinct row.
Now the title of each library like you know battleaxe nosiest line all of these things.
They could probably stand to be a little bit larger in text.
So I think maybe we should add some styling to the text tag to accommodate for that.
So at the bottom of our file here let's add in a styles object which will have a title style property
and inside of your let's give it a font size of 18 and then you'll also notice that it kind of butts
up so the left hand side of the screen that doesn't look too nice.
So let's also give it a padding left of 15 as well just to get it to stand off from the left hand side
of the screen a little bit.
So we will then apply this style to our text tag.
I think that we might have some other styling in here to take care of.
So rather than applying it directly to the text tag I'm going to first structure the text or the title
style off the styles object.
So let's say Konst title style equals styles and then we will apply a style of title style.
All right let's check out the simulator again.
I will refresh.
All right.
Now this is starting to look pretty good it's starting to really look like a list of items.
So to still have that one last issue that when I start to scroll down the list of items gets cut off
arbitrarily right here which is probably not what I want at all.
So again we ran into this in the past.
If I flip back to my app component and I find my top level view tag I need to tell my top level view
tag to fill up as much space as possible.
Right now it's that view tag that is actually kind of cutting off our list here.
So I'm going to add the property or the style of flex 1 to my view tag and that is going to tell the
tag hey please fill up as much space as possible because we've got like a lot of content that we won't
show on the screen.
Do note that I passed the style prop here two sets of curly braces you know one is for GSX and the inner
one is for to designate a javascript object.
So let's refresh in the simulator now and when I scroll down.
Fantastic view tag is definitely taking up the full height of the screen and my content is no longer
getting cut off.
OK this looks pretty darn good.
So this really brings phase one of our application to a close.
You know we are able to render a list of items in the screen using a highly performant component the
list view.
So we're now going to move on to our next feature in which we will need to show a user details about
a particular library whenever they tap on it.
So let's start that process in the next section