1
00:00:02,360 --> 00:00:08,270
Now I just showed you the scroll view and it's already time to let go and to get rid of the scroll view,

2
00:00:08,330 --> 00:00:11,000
why? The scroll view is great

3
00:00:11,000 --> 00:00:13,600
if you have a scrollable area on your screen

4
00:00:13,790 --> 00:00:19,490
but it's not so great if you have a list where you don't know how long it will be or which might be

5
00:00:19,490 --> 00:00:21,310
very long.

6
00:00:21,320 --> 00:00:27,440
Now if you know you have some content, maybe a list of data but you know it's only 20 items, so it will

7
00:00:27,440 --> 00:00:33,740
probably exceed my screen boundaries but it will never be more than 20 or 15 items,

8
00:00:33,740 --> 00:00:35,500
then you can use a scroll view

9
00:00:35,750 --> 00:00:42,500
but if you have very long lists, then a scroll view can be very inefficient because what it does is it

10
00:00:42,500 --> 00:00:47,510
renders all the elements in advance, even the ones that are not on the screen.

11
00:00:47,510 --> 00:00:53,220
That means that even the goals down there which are currently not visible are fully rendered

12
00:00:53,300 --> 00:00:58,520
and when you scroll such a very long list with a lot of elements or if you do anything else on the screen,

13
00:00:58,910 --> 00:01:00,620
that can really slow down your app.

14
00:01:00,650 --> 00:01:05,870
If you have a list with hundreds or thousands of elements and there are all always rendered even if

15
00:01:05,870 --> 00:01:09,500
you don't see them, that can really slow down your app.

16
00:01:09,500 --> 00:01:16,130
So in order to speed that up, there is a component built into React Native that handles such infinite

17
00:01:16,130 --> 00:01:20,460
lists or lists that are potentially very long in a more efficient way

18
00:01:20,510 --> 00:01:28,580
and that's the FlatList component which you also import from React Native. FlatList replaces scroll

19
00:01:28,580 --> 00:01:28,810
view

20
00:01:28,820 --> 00:01:35,960
so to say, so here we can simply use FlatList which is a self closing element and FlatList has two

21
00:01:36,050 --> 00:01:42,770
important properties - the first property is the data property where you point at your input data and this

22
00:01:42,770 --> 00:01:44,570
should point at an array.

23
00:01:44,600 --> 00:01:49,610
So here, I point at course goals because that's the data I want to output.

24
00:01:49,610 --> 00:01:57,170
The second important property is render item, that takes a function which is called for every item

25
00:01:57,170 --> 00:02:00,840
in your data to render a list item.

26
00:02:00,850 --> 00:02:04,060
This is a function which will get some data about that item,

27
00:02:04,060 --> 00:02:08,410
hence I'll name the argument item data and then it has to return a component,

28
00:02:08,410 --> 00:02:11,470
so here I'll return the same view I had before,

29
00:02:11,470 --> 00:02:16,270
just get rid of the manual mapping logic, so I'll still return this view.

30
00:02:16,270 --> 00:02:21,670
Now you don't need to set a key here anymore but I'll come back to how this is keyed in a second.

31
00:02:21,670 --> 00:02:27,060
So now here we get the item data and therefore we don't have the goal here anymore.

32
00:02:27,190 --> 00:02:35,820
An item data is a more complex object but in there what you'll have is an item property, besides item

33
00:02:35,820 --> 00:02:36,840
you also have the index,

34
00:02:36,840 --> 00:02:44,180
so the number, the position of that item in the array starting at 0 and separators which would allow you

35
00:02:44,180 --> 00:02:50,270
to basically render separators dynamically between list items, not something we'll do here but item

36
00:02:50,270 --> 00:02:52,340
will be your data,

37
00:02:52,340 --> 00:02:57,080
so one element from your input data and that here is therefore one of our goals.

38
00:02:57,230 --> 00:03:02,920
and if we do that and we save this, let's now learn React Native,

39
00:03:03,180 --> 00:03:08,430
maybe here on the iPhone to mix things up and we can add things here

40
00:03:08,670 --> 00:03:14,700
and if I add a lot and I then close the keyboard, I can scroll but you'll see that there is a warning.

41
00:03:15,630 --> 00:03:21,120
We expand this, we see virtualize list missing keys for items,

42
00:03:21,120 --> 00:03:24,450
so that is another warning related to keys.

43
00:03:24,450 --> 00:03:31,680
The reason for that is that FlatList automatically adds keys to your items but only if your data, your

44
00:03:31,680 --> 00:03:40,770
input data has a certain shape and our current shape where we simply have an array of strings is not

45
00:03:40,900 --> 00:03:45,130
supported. The shape it would expect

46
00:03:45,150 --> 00:03:53,910
is that you don't have goals which are just strings but instead that your list is a list of objects

47
00:03:54,390 --> 00:04:02,640
where you must have a key property in that object and here we'll actually create a random key now with

48
00:04:02,640 --> 00:04:09,560
Math.random and then I convert this to a string because it should be a string and of course, that's not

49
00:04:09,560 --> 00:04:10,420
perfectly unique,

50
00:04:10,430 --> 00:04:14,810
you might have the same random number twice but it's good enough for this demo here

51
00:04:14,810 --> 00:04:17,750
and now you can't have any other data in here, in that object,

52
00:04:17,750 --> 00:04:19,610
the key is the only must-have property,

53
00:04:19,610 --> 00:04:21,480
so here I'll have a value property

54
00:04:21,500 --> 00:04:24,610
but you could have named this val or text or whatever you want,

55
00:04:24,640 --> 00:04:25,720
I'll go with value

56
00:04:26,360 --> 00:04:28,190
and this is now my entered

57
00:04:28,190 --> 00:04:29,580
goal.

58
00:04:29,590 --> 00:04:36,070
So now our course goals array here is an array of objects where each object has a key property and a

59
00:04:36,070 --> 00:04:37,720
value property

60
00:04:37,720 --> 00:04:44,320
and now if we feed that course goals array into FlatList, FlatList is happy because it expects a data

61
00:04:44,320 --> 00:04:50,800
source where you have an array of objects, where every object has a key property and then anything you

62
00:04:50,800 --> 00:04:52,920
want. Now to output our data,

63
00:04:52,930 --> 00:04:59,020
it's no longer enough to access itemData.item because item is now an object and not just a string anymore but

64
00:04:59,020 --> 00:05:05,590
item will have a key and a value property now because that's what we're setting up up there and I can

65
00:05:05,590 --> 00:05:12,490
simply access the value property to output the text. And now if we save this and this rebuilds and therefore

66
00:05:12,530 --> 00:05:21,350
now if we try this again with Learn React Native, close the keyboard, you see we no longer

67
00:05:21,350 --> 00:05:27,380
get the warning and we can still scroll this of course, we get no error here either because now, we have that

68
00:05:27,380 --> 00:05:32,990
key property here. Now in case you have data where you don't have a key property and you don't want to

69
00:05:32,990 --> 00:05:41,000
transform it, let's say you had ID instead which would cause a warning as you can see if I test this,

70
00:05:43,570 --> 00:05:45,160
we get the warning here,

71
00:05:45,760 --> 00:05:52,290
in that case you can also add another property to FlatList besides data and render item, you can add

72
00:05:52,290 --> 00:05:59,440
the key extractor property which takes a function that tells FlatList how to extract your key and by

73
00:05:59,440 --> 00:06:06,190
default, the logic is I'll have a look at the item and look for a key property but now with key extractor,

74
00:06:06,190 --> 00:06:12,220
you can change this. Key extractor takes a function which takes two arguments - the item it's looking at

75
00:06:12,220 --> 00:06:17,800
and the index of that item and now you need to return a key and by default, it would look for item.key,

76
00:06:17,800 --> 00:06:21,740
so that's the default logic which you don't need to add.

77
00:06:21,940 --> 00:06:29,950
Now here, I change the key or the unique identifier to be on an ID prop and therefore, I will change

78
00:06:29,950 --> 00:06:35,920
this down there in the key extractor to get the ID as a key and now with that, you also get rid of the

79
00:06:35,920 --> 00:06:41,770
warning because you inform React Native's FlatList how to get a unique key for every item in your

80
00:06:41,770 --> 00:06:42,160
list.

81
00:06:42,670 --> 00:06:53,850
So now here, if you again learn React Native here and we add this, you'll see this works, we can scroll this and

82
00:06:54,030 --> 00:07:00,150
we also get no warning. So that's FlatList and you should use FlatList for very long lists, for lists

83
00:07:00,360 --> 00:07:05,370
where you don't know how long they will be but where they potentially are very long because that gives

84
00:07:05,370 --> 00:07:10,110
you a better performance than a scroll view which on the other hand is great if you know you only

85
00:07:10,110 --> 00:07:14,970
have a limited amount of items which will probably go beyond your screen boundaries but where you won't

86
00:07:14,970 --> 00:07:18,210
have too many redundant items rendered outside of the screen.