1
00:00:00,750 --> 00:00:03,130
In the last section we discussed how a list view works.

2
00:00:03,150 --> 00:00:06,090
And now we're going to start to implement it into our application.

3
00:00:06,300 --> 00:00:08,680
I'm inside of my library list file offers.

4
00:00:08,700 --> 00:00:14,760
Begin by adding an import statement at the very top so I'm going to import a component from Riak native

5
00:00:15,000 --> 00:00:21,200
called flat list like so.

6
00:00:21,200 --> 00:00:25,570
So this flat Let's Complan right here is what we're going to use to render that sort of list view on

7
00:00:25,610 --> 00:00:26,180
the screen.

8
00:00:26,210 --> 00:00:31,430
That's going to very intelligently render only a subset of all the items that should be visible at any

9
00:00:31,430 --> 00:00:32,220
given time.

10
00:00:33,210 --> 00:00:37,560
Now inside my render method right here we're going to remove the console lock statement and the return

11
00:00:37,560 --> 00:00:46,430
that we currently have and I'll return it with an instance of flat list like so.

12
00:00:46,430 --> 00:00:49,420
So we're going to pass this thing a couple of different properties.

13
00:00:49,430 --> 00:00:54,420
So I got to give myself a little bit of space the first property that we're going to pass in here is

14
00:00:54,420 --> 00:00:57,740
the list of items that we want to render out onto the screen.

15
00:00:57,780 --> 00:01:01,660
And so for you and me that's going to be this Propst not libraries.

16
00:01:01,680 --> 00:01:05,910
That's our list of items that we want to render onto the screen at the device.

17
00:01:05,960 --> 00:01:14,450
So I'm going to say Data is this dumb props libraries like so.

18
00:01:14,600 --> 00:01:19,850
Next we're going to add on a another prop that is going to contain a function that's going to be used

19
00:01:19,850 --> 00:01:24,110
to render out each and every one of these little items on the screen.

20
00:01:24,110 --> 00:01:30,690
So I'll add on a property called render item and I'm going to make a helper method for this thing rather

21
00:01:30,690 --> 00:01:33,480
than putting a function declaration right in here.

22
00:01:33,510 --> 00:01:40,980
So I got to make a helper method right up here called render item and then inside of Rander item right

23
00:01:40,980 --> 00:01:46,140
here I'll reference that helper function like so.

24
00:01:46,170 --> 00:01:50,430
So now anytime that flat list tries to appear on the screen it's going to see the list of all these

25
00:01:50,430 --> 00:01:56,040
libraries and it's going to take like maybe the first five or 10 or however many can fit on the screen

26
00:01:56,490 --> 00:02:00,300
and it's going to call this render item function with each one.

27
00:02:00,300 --> 00:02:05,910
And so it's our job inside of render item right here to create some new widget or some new component

28
00:02:06,150 --> 00:02:11,160
that we can eventually have show up on the screen the render item function is going to be called with

29
00:02:11,160 --> 00:02:14,440
one single element out of our list of libraries.

30
00:02:14,510 --> 00:02:20,430
So I will receive that as an argument that I will call library like so now the last thing we have to

31
00:02:20,430 --> 00:02:20,910
do.

32
00:02:20,910 --> 00:02:26,250
Remember that anytime that we make a list with react we always have to provide a key on every element

33
00:02:26,250 --> 00:02:29,190
that gets render well with a flat list.

34
00:02:29,190 --> 00:02:32,770
The key system still exists but it's just a little bit different.

35
00:02:32,940 --> 00:02:38,790
Before when we put together all the keys that belong to widgets inside of a list we assign a key property

36
00:02:38,820 --> 00:02:40,650
directly to each component.

37
00:02:40,770 --> 00:02:46,680
So with that flat list we instead add a function to the flat list itself that tells it how to generate

38
00:02:46,740 --> 00:02:49,230
its own key for each item.

39
00:02:49,770 --> 00:02:55,800
So I get to add on a third property here called Key extractor and this is going to be a little arrow

40
00:02:55,800 --> 00:03:02,230
function that's going to be called with one of our libraries which I receive as an argument called simply

41
00:03:02,230 --> 00:03:02,980
the library.

42
00:03:03,030 --> 00:03:08,790
And from this we have to return some unique identifying token for this particular library.

43
00:03:08,820 --> 00:03:14,830
And so if you recall right now every one of our libraries has an I.D. associated with it.

44
00:03:14,940 --> 00:03:21,250
And so from the key extractor we'll return library dot Id like so.

45
00:03:21,310 --> 00:03:24,230
OK so that's kinda set up on the flat list itself.

46
00:03:24,250 --> 00:03:25,490
Let's come back to the next section.

47
00:03:25,510 --> 00:03:30,100
All Supreme's together this render item function which is going to be responsible for rendering out

48
00:03:30,160 --> 00:03:33,030
each individual library onto the screen.

49
00:03:33,040 --> 00:03:34,990
So quick break and I'll see you in just a minute.