1
00:00:02,180 --> 00:00:06,770
Now of course here I'm using a scroll view and you learned that a FlatList is better if you have a

2
00:00:06,770 --> 00:00:10,160
list where you don't know how many items you'll have in there.

3
00:00:10,190 --> 00:00:16,490
Now for our game, a scroll view actually will be fine because yes, we don't know how many items it will

4
00:00:16,490 --> 00:00:24,320
be and theoretically, for guessing very poorly, we'll have around 100 items in there but that will happen

5
00:00:24,380 --> 00:00:34,020
almost never and therefore typically this list will not hold more than 10, 15, 20 at most, items 

6
00:00:34,110 --> 00:00:38,480
and therefore this will very likely never cause us any performance issues

7
00:00:38,520 --> 00:00:45,210
and using a scroll view here is absolutely fine because yes, it's a list that holds multiple items, that

8
00:00:45,450 --> 00:00:52,140
will exceed our screen boundaries but it will rarely be a list with a lot of items, it will never be

9
00:00:52,140 --> 00:00:56,370
a list with more than 100 items due to the way our game works.

10
00:00:56,370 --> 00:01:01,770
So scroll view would be fine here but in case you still want to use a FlatList, let me show you this

11
00:01:01,800 --> 00:01:03,050
as well.

12
00:01:03,060 --> 00:01:08,460
For that, we can add FlatList here and that of course means that we need to import FlatList from React

13
00:01:08,460 --> 00:01:08,910
Native,

14
00:01:09,390 --> 00:01:13,020
so here, I'll import FlatList like this

15
00:01:13,020 --> 00:01:19,590
and with FlatList imported, you learned that FlatList takes a data prop which points at the data

16
00:01:19,670 --> 00:01:22,630
that you want to feed in and in our case here,

17
00:01:22,680 --> 00:01:31,710
that would be our past guesses array and that you then have a render item prop which allows you to

18
00:01:31,860 --> 00:01:37,350
output the items for every item in the data you are feeding in, so output the components for every item in

19
00:01:37,350 --> 00:01:38,250
the data

20
00:01:38,250 --> 00:01:42,870
and here I can point at render list item which should be called. Now

21
00:01:42,870 --> 00:01:48,390
right now this won't work for a couple of reasons. For one, render list item expects two values

22
00:01:48,750 --> 00:01:55,620
but render item here on FlatList will only forward one item and that's that item data which holds information

23
00:01:55,620 --> 00:01:59,950
about the index and about the item we're about to print.

24
00:01:59,970 --> 00:02:03,510
The other thing that will cause us problems is the key.

25
00:02:03,540 --> 00:02:10,710
You might remember that FlatList expects to get objects in the array you're passing in where each object

26
00:02:10,740 --> 00:02:16,130
has a key property it can extract and use as a key for efficient re-rendering.

27
00:02:16,140 --> 00:02:21,880
Now we don't have an array of objects here, we have an array of numbers and that's not going to work.

28
00:02:21,960 --> 00:02:28,680
Now we can add a key extractor here to FlatList to override its default, key extractor takes a function

29
00:02:28,770 --> 00:02:35,070
which gets our item in the end and then we have to tell FlatList where to find our key and by default,

30
00:02:35,070 --> 00:02:38,170
it looks for item.key or for item.id,

31
00:02:38,280 --> 00:02:41,860
here we want to tell it the item itself is key.

32
00:02:42,090 --> 00:02:46,580
Now FlatList however wants a key which is a string and not a number,

33
00:02:46,590 --> 00:02:48,510
otherwise it'll get a warning.

34
00:02:48,510 --> 00:02:54,480
So the next thing we have to do is the past guesses we're managing should be strings and that's no problem

35
00:02:54,480 --> 00:02:58,800
because we're only using them for printing them to the screen anyways, so we don't really care if they're

36
00:02:58,800 --> 00:03:03,750
technically stored as a number or as a string and hence here when we add a new guess, we can simply call

37
00:03:03,750 --> 00:03:09,630
toString which is a built-in Javascript method on the number to convert it to a string type and do

38
00:03:09,630 --> 00:03:16,490
the same for the initial value of course. Here where I add my initial guess, call toString there as well

39
00:03:16,500 --> 00:03:19,140
and now we have strings and they can be used as numbers

40
00:03:19,140 --> 00:03:26,030
therefore. Now as I said, render list item is expecting the wrong arguments though, numOfRound won't

41
00:03:26,030 --> 00:03:31,940
work like this, value also won't work like this, instead we're getting the item data and we can

42
00:03:31,940 --> 00:03:34,430
still expect an extra argument though,

43
00:03:34,550 --> 00:03:42,440
this however then has to be expected as the first argument because we can now simply go down to render

44
00:03:42,740 --> 00:03:49,280
item here on the FlatList and bind arguments that should be passed in, so we can add additional arguments

45
00:03:49,460 --> 00:03:55,330
besides the default argument which will be passed in. Now bind expects this as the first argument so

46
00:03:55,350 --> 00:04:00,210
that we set what this should refer to in the function we're calling, we don't care here so I'll just

47
00:04:00,210 --> 00:04:00,920
add it to this,

48
00:04:00,920 --> 00:04:03,720
you could also set it to null, it doesn't matter.

49
00:04:03,750 --> 00:04:10,350
The second argument we add here then will be the first argument received by that function and that should

50
00:04:10,350 --> 00:04:14,830
be our round number which should be 

51
00:04:14,860 --> 00:04:21,510
pastGuesses.length. Previously, I deducted the index here but that doesn't work anymore because I

52
00:04:21,510 --> 00:04:23,640
don't have access to the index anymore,

53
00:04:23,640 --> 00:04:27,430
we're not mapping manually. So I'll just pass the length in there

54
00:04:27,700 --> 00:04:34,170
and the good thing is I can get the index inside of render item out of the item data.

55
00:04:34,170 --> 00:04:39,780
This default argument will also be passed in by React and the default argument automatically is passed

56
00:04:39,840 --> 00:04:40,960
to last argument.

57
00:04:41,010 --> 00:04:43,890
So the first arguments will be the arguments you set up in bind,

58
00:04:43,890 --> 00:04:45,840
in this case, that's only one argument,

59
00:04:45,830 --> 00:04:52,620
our number of rounds or our length of the array and then any default arguments which would have been

60
00:04:52,620 --> 00:04:58,500
passed normally will be added as additional arguments at the end of your argument list here.

61
00:04:58,500 --> 00:05:01,500
Now here, number of round also isn't a fitting name anymore,

62
00:05:01,500 --> 00:05:07,530
instead it's the list length, that sounds like a better name because that's what we're getting

63
00:05:07,580 --> 00:05:13,970
but then here we can calculate our number of rounds by using list length and then by deducting 

64
00:05:13,970 --> 00:05:20,120
itemData.index because the item data you're getting automatically by React Native is an object which also

65
00:05:20,120 --> 00:05:27,440
has an index property which is the index of the item you're outputting and you also get itemData.item

66
00:05:27,920 --> 00:05:31,740
and that's the item itself which in our case is the guess.

67
00:05:32,000 --> 00:05:37,700
We now also no longer have to add a key here because that keying will be done by React Native thanks

68
00:05:37,700 --> 00:05:41,740
to the FlatList. So that was a lot of work,

69
00:05:41,750 --> 00:05:43,940
now we should be able to output a list again.

70
00:05:43,940 --> 00:05:46,590
So let's save this and let's give it a try

71
00:05:46,590 --> 00:05:48,860
here and that seems to work,

72
00:05:49,320 --> 00:05:55,440
however of course we lost the positioning now. Previously what we did is we added content container

73
00:05:55,440 --> 00:05:58,300
style, styles list here to the scroll view,

74
00:05:58,320 --> 00:06:04,200
the good thing is you can do that on the FlatList too. Whilst you can add a style just like on the scroll

75
00:06:04,200 --> 00:06:10,320
view, this style allows you for example to add a margin around the list but it doesn't allow you to align

76
00:06:10,320 --> 00:06:12,510
the content inside of the list. For that

77
00:06:12,510 --> 00:06:16,900
instead, use the content container style which is supported by FlatList as well

78
00:06:16,980 --> 00:06:22,200
and therefore here, we can also point at styles list and therefore this should now just work as our

79
00:06:22,200 --> 00:06:23,750
scroll view did before.

80
00:06:23,760 --> 00:06:32,650
So let's give this a try and you'll see we start at the bottom here and we can now start adding items.

81
00:06:32,650 --> 00:06:35,390
Now let's see if scrolling also works as it should,

82
00:06:36,050 --> 00:06:39,820
yes it does and we can see the latest item and the oldest item

83
00:06:39,950 --> 00:06:43,400
and yes there is something wrong with the positioning of the items in the list item and

84
00:06:43,420 --> 00:06:49,010
I'll come back to this but generally, this works. Let's also test it on Android,

85
00:06:49,010 --> 00:06:50,130
so there

86
00:06:50,150 --> 00:06:54,610
let's start guessing and hope we don't solve this too early,

87
00:06:54,630 --> 00:06:55,740
no, that works

88
00:06:55,740 --> 00:07:02,200
and here, we can also scroll as you can see. So that works with the FlatList as well,

89
00:07:02,200 --> 00:07:08,160
now what about these strange distribution of content here in our list items?

90
00:07:08,170 --> 00:07:15,070
Well you'll notice that the list items themselves are bigger than they were before.

91
00:07:15,160 --> 00:07:21,010
The content is distributed as if the list item would end here though and that's indeed the problem.

92
00:07:21,010 --> 00:07:27,910
We have a width of 60% of the list item and our content respects this but our borders

93
00:07:27,910 --> 00:07:29,510
strangely enough doesn't.

94
00:07:29,590 --> 00:07:34,870
To fix this strange FlatList behavior, what you can do is you can go to your list container that holds

95
00:07:34,870 --> 00:07:41,110
the overall list and set the width there to your desired list width at the end, like let's say 60%

96
00:07:41,860 --> 00:07:45,810
and give your list items a width of 100%.

97
00:07:45,820 --> 00:07:52,300
So now the list container overall is smaller, is less wide and therefore the list items assume that width

98
00:07:52,300 --> 00:07:53,850
and have the same width

99
00:07:53,950 --> 00:07:58,840
and since you rarely have to use case where your list container needs to be wider than the list items

100
00:07:59,230 --> 00:08:04,150
because what else would be in there in the list container, that should be a fine solution.

101
00:08:04,180 --> 00:08:11,300
Now if you do that, you'll notice that the width looks better but actually, the positioning now is a problem.

102
00:08:11,320 --> 00:08:17,080
Well since we now have the width controlled on the outside list container, we can get rid of align

103
00:08:17,080 --> 00:08:20,740
items center here on the list itself,

104
00:08:20,740 --> 00:08:25,760
so list, don't forget, was the style added to content container style.

105
00:08:25,810 --> 00:08:30,810
We keep the style there but I removed align items center because there is nothing to center now,

106
00:08:31,060 --> 00:08:35,050
we have the width set on the list container not on the list items,

107
00:08:35,050 --> 00:08:41,890
so thanks to them having 100%, they're centered automatically because they take up the full

108
00:08:41,890 --> 00:08:45,070
width anyways and therefore now if we give this another try, 

109
00:08:45,070 --> 00:08:52,420
this seems to work way better and the list items are actually laid out in the way they should be.

110
00:08:52,420 --> 00:08:57,760
So if we have another around here which maybe takes a bit longer,

111
00:08:57,760 --> 00:08:57,940
yes,

112
00:08:57,940 --> 00:09:04,230
looking good, then here we can see we get the same behavior as before, we get the nice style and we also

113
00:09:04,240 --> 00:09:09,760
worked around that different behavior FlatList gives us. Let's also give this a try on Android here and

114
00:09:09,760 --> 00:09:10,930
start a new game there,

115
00:09:12,670 --> 00:09:14,290
oh this will not be a long game,

116
00:09:16,120 --> 00:09:17,020
long enough,

117
00:09:17,020 --> 00:09:19,800
so there also, everything works as it should.

118
00:09:19,960 --> 00:09:25,780
And this is how you could do this with FlatList, as you see works a bit differently, we have to work

119
00:09:25,780 --> 00:09:27,600
around its different behavior there

120
00:09:27,610 --> 00:09:33,550
when it comes to adjusting the width of the list items but in the end, ultimately this now also works

121
00:09:34,090 --> 00:09:40,330
and therefore you now learned how to lay your things out with FlatList, with scroll view, what's special

122
00:09:40,330 --> 00:09:46,990
about these list views or those scrollable views in general and how you can still layout your things in

123
00:09:46,990 --> 00:09:47,970
the way you want.