In the last section we discussed how a list view works.
And now we're going to start to implement it into our application.
I'm inside of my library list file offers.
Begin by adding an import statement at the very top so I'm going to import a component from Riak native
called flat list like so.
So this flat Let's Complan right here is what we're going to use to render that sort of list view on
the screen.
That's going to very intelligently render only a subset of all the items that should be visible at any
given time.
Now inside my render method right here we're going to remove the console lock statement and the return
that we currently have and I'll return it with an instance of flat list like so.
So we're going to pass this thing a couple of different properties.
So I got to give myself a little bit of space the first property that we're going to pass in here is
the list of items that we want to render out onto the screen.
And so for you and me that's going to be this Propst not libraries.
That's our list of items that we want to render onto the screen at the device.
So I'm going to say Data is this dumb props libraries like so.
Next we're going to add on a another prop that is going to contain a function that's going to be used
to render out each and every one of these little items on the screen.
So I'll add on a property called render item and I'm going to make a helper method for this thing rather
than putting a function declaration right in here.
So I got to make a helper method right up here called render item and then inside of Rander item right
here I'll reference that helper function like so.
So now anytime that flat list tries to appear on the screen it's going to see the list of all these
libraries and it's going to take like maybe the first five or 10 or however many can fit on the screen
and it's going to call this render item function with each one.
And so it's our job inside of render item right here to create some new widget or some new component
that we can eventually have show up on the screen the render item function is going to be called with
one single element out of our list of libraries.
So I will receive that as an argument that I will call library like so now the last thing we have to
do.
Remember that anytime that we make a list with react we always have to provide a key on every element
that gets render well with a flat list.
The key system still exists but it's just a little bit different.
Before when we put together all the keys that belong to widgets inside of a list we assign a key property
directly to each component.
So with that flat list we instead add a function to the flat list itself that tells it how to generate
its own key for each item.
So I get to add on a third property here called Key extractor and this is going to be a little arrow
function that's going to be called with one of our libraries which I receive as an argument called simply
the library.
And from this we have to return some unique identifying token for this particular library.
And so if you recall right now every one of our libraries has an I.D. associated with it.
And so from the key extractor we'll return library dot Id like so.
OK so that's kinda set up on the flat list itself.
Let's come back to the next section.
All Supreme's together this render item function which is going to be responsible for rendering out
each individual library onto the screen.
So quick break and I'll see you in just a minute.