1
00:00:02,320 --> 00:00:08,260
When it comes to styling a list, we of course can style both the list items and also the list

2
00:00:08,260 --> 00:00:08,810
itself.

3
00:00:08,840 --> 00:00:10,830
So let's start with the items

4
00:00:10,840 --> 00:00:17,440
and here I'll actually cut that mark up here so to say, so that jsx code for an item and I'll add a

5
00:00:17,440 --> 00:00:22,420
new function outside of the component function because we don't really need anything from inside the

6
00:00:22,420 --> 00:00:27,380
component and I'll just name this render list item, the name is up to you.

7
00:00:27,490 --> 00:00:33,850
It's a function and this function in the end should return some jsx code here,

8
00:00:33,850 --> 00:00:41,320
so it should return this jsx code here and to work correctly, it of course needs to get let's say

9
00:00:41,690 --> 00:00:44,320
our value which we want to output.

10
00:00:44,320 --> 00:00:50,950
So here, I'll then use value as a key and output value here between the text tags and now we can

11
00:00:50,950 --> 00:00:54,240
use render list item down there where we call map

12
00:00:54,250 --> 00:01:01,850
and here, there I simply want to execute render list item for every item we're mapping and I forward

13
00:01:01,880 --> 00:01:05,410
guess to that as a value in a render list item.

14
00:01:05,440 --> 00:01:08,620
Now if we do that, we should see the same result as before,

15
00:01:08,630 --> 00:01:13,720
so nothing too fancy here but now we have a leaner markup down there, leaner

16
00:01:13,730 --> 00:01:17,690
jsx code down there and have our list item jsx code here.

17
00:01:17,870 --> 00:01:23,930
Now we can style this and of course I want to style my view here, for this I'll add a style here from

18
00:01:23,930 --> 00:01:28,640
the stylesheet which I'll name list and in there,

19
00:01:28,650 --> 00:01:33,600
I actually now want to have two text items and one should be the number of the round and the second

20
00:01:33,600 --> 00:01:34,710
should be the value,

21
00:01:34,710 --> 00:01:41,940
so here I need an additional argument, I need the value but also the number of the round or numOfRound

22
00:01:41,940 --> 00:01:42,980
as I name it here

23
00:01:43,080 --> 00:01:45,640
and I want to output this dynamically here,

24
00:01:45,720 --> 00:01:49,800
maybe with this hash symbol in front of it just for stylistic reasons.

25
00:01:50,250 --> 00:01:54,030
So now we have these two texts in this list here and there,

26
00:01:54,030 --> 00:01:59,350
I actually don't want to use the text but the body text so that I have my default text styling.

27
00:01:59,370 --> 00:02:06,030
So for that, let's import body text from components body text and use body text instead of the normal

28
00:02:06,030 --> 00:02:10,860
text here in our list item. With that, we're using the right font

29
00:02:10,860 --> 00:02:17,730
and now let's add that list object to our stylesheet so that we can style the list item, actually

30
00:02:17,730 --> 00:02:21,040
this should be called list item therefore and not list.

31
00:02:21,040 --> 00:02:25,030
So let's add list item to the stylesheet now, like this

32
00:02:25,390 --> 00:02:29,490
and now of course we can style this in whatever way you want,

33
00:02:29,860 --> 00:02:38,800
I will style it in a relatively easy way here, just give it a border color of let's say black or maybe

34
00:02:38,800 --> 00:02:47,080
this slight grayish color here. A padding in all directions of let's say 15 to have some spacing, a margin

35
00:02:47,500 --> 00:02:49,360
on the vertical axis of 10

36
00:02:49,360 --> 00:02:55,480
so that we have some spacing between the list items and they don't sit right next to each other. A background

37
00:02:55,480 --> 00:02:57,280
color of white maybe

38
00:02:57,280 --> 00:03:01,210
and of course you can use different colors here if you want to.

39
00:03:01,290 --> 00:03:03,060
Now that's a start,

40
00:03:03,060 --> 00:03:07,650
now when we're setting a border color, we also need to set up border width here though otherwise we won't

41
00:03:07,650 --> 00:03:08,370
see a border

42
00:03:08,370 --> 00:03:14,850
and I'll set this to one and very important, I want to have these two text components in my view sit

43
00:03:14,850 --> 00:03:20,220
next to each other and not above each other which would be the default because a view uses flexbox

44
00:03:20,430 --> 00:03:25,830
and uses a default flex direction of column to have the item sit next to each other on a horizontal

45
00:03:25,830 --> 00:03:30,540
axis, we add flex direction row here just like this.

46
00:03:30,540 --> 00:03:35,990
And with that if we save this and the app rebuilds, let's give it a try and see how that looks like,

47
00:03:36,030 --> 00:03:40,320
yes that looks okay-ish but there still is room for improvement.

48
00:03:40,320 --> 00:03:46,320
For example, I want to set a width on that list item to make sure that it's not just as wide as its content

49
00:03:46,350 --> 00:03:54,360
needs it to be but as wide as we tell it. Now to add a width, you can add width here to list

50
00:03:54,420 --> 00:03:54,940
item

51
00:03:55,020 --> 00:04:01,200
but if we do that and set this to let's say 80%, you'll actually see that this behaves not in

52
00:04:01,200 --> 00:04:03,110
the way you want it to behave right,

53
00:04:03,110 --> 00:04:04,570
so this does not look right,

54
00:04:04,680 --> 00:04:13,260
now the content is somehow moved but the item itself is certainly not wider. To style a list properly,

55
00:04:13,260 --> 00:04:18,510
the best way is to simply wrap it into a view and then style this view.

56
00:04:18,510 --> 00:04:20,000
So here, we can add a view,

57
00:04:20,010 --> 00:04:22,290
give it a style of let's say list,

58
00:04:22,290 --> 00:04:29,130
so here I'm referring to styles list and add this list object to our stylesheet now, like this

59
00:04:29,130 --> 00:04:36,240
and on this list, we can now set a width of 80% and get rid of the width here on the list item.

60
00:04:36,240 --> 00:04:41,880
If we do this with this wrapping view, you now see the list items have the correct look and that's just

61
00:04:41,880 --> 00:04:43,620
something to be aware of.

62
00:04:43,740 --> 00:04:50,430
If you want to control the height or the width of your list, of your scroll view, then don't add the style

63
00:04:50,430 --> 00:04:51,650
to the list items,

64
00:04:51,690 --> 00:04:57,450
also don't add it necessarily directly to the scroll view because of how this works internally but

65
00:04:57,450 --> 00:05:03,250
instead simply wrap a view around the scroll view where you set that desired width and height.

66
00:05:03,290 --> 00:05:09,320
Now what you'll notice is that on the list item, it would be nice if we had the round number being

67
00:05:09,360 --> 00:05:15,630
output there and then had some spacing between the round number and our actual guess and to achieve this,

68
00:05:15,630 --> 00:05:18,590
for one we need to set a style here on list item,

69
00:05:18,720 --> 00:05:26,670
we can set justifyContent which controls how the content of this view is laid out along the main

70
00:05:26,670 --> 00:05:33,070
axis which reflects direction as the horizontal axis and there, I'll use space around to distribute

71
00:05:33,210 --> 00:05:40,260
the available free space around our text items here and now to also output the number of the round which

72
00:05:40,260 --> 00:05:48,360
we expect as an argument here in render list item, we can go down to our map function and there, we actually

73
00:05:48,360 --> 00:05:54,510
do get a second argument in this function which map calls automatically and that's the index of the

74
00:05:54,510 --> 00:05:55,680
item we're outputting,

75
00:05:55,680 --> 00:06:03,030
so we could forward that index here to render list item or index plus 1 since it will start at 0 and

76
00:06:03,030 --> 00:06:07,560
we probably want to print one for the first round instead of 0.

77
00:06:07,560 --> 00:06:15,300
Now with that out of the way, if we add this, now this looks a bit better and maybe we actually switch

78
00:06:15,300 --> 00:06:20,980
this look here from space around to space between, I think that looks nicer but before I save this and

79
00:06:20,980 --> 00:06:27,390
update this, you will also notice that one issue you have with that is that the round number is not actually

80
00:06:27,390 --> 00:06:27,970
correct.

81
00:06:28,020 --> 00:06:33,030
The first round is the bottommost round because we add new rounds at the beginning of the list,

82
00:06:33,030 --> 00:06:39,390
therefore the index is not the right measure for the route number because the index is always 0

83
00:06:39,450 --> 00:06:42,620
or if we add 1, it's 1, for the first list item

84
00:06:42,650 --> 00:06:45,700
but the first list item is actually not our first round,

85
00:06:45,780 --> 00:06:51,330
instead since we add new rounds as the first list item, the first list item is our latest round and certainly

86
00:06:51,330 --> 00:06:52,940
not the first one.

87
00:06:52,980 --> 00:07:02,670
So to fix that, what we can do is here in render list items, instead of using the index, we can of course

88
00:07:02,880 --> 00:07:12,300
use our past guesses list here and get the length of that list and then deduct the index from that

89
00:07:12,370 --> 00:07:16,810
and that gives us actually the correct round number for a given list item.

90
00:07:17,500 --> 00:07:24,310
So now if we do that and we restart this, now we see round number one is the guess seven and that stays

91
00:07:24,310 --> 00:07:26,230
number one if we add another guess

92
00:07:26,260 --> 00:07:29,520
and now this seems to work correctly here.

93
00:07:29,560 --> 00:07:36,180
You will also see that as soon as we exceed our boundaries here, of course we can scroll the list

94
00:07:36,310 --> 00:07:39,430
and that also seems to work just the way it should.

95
00:07:39,430 --> 00:07:48,280
Let's also give this a try on Android here, let's start a new game there and let's hope we don't win too

96
00:07:48,280 --> 00:07:51,000
early, yes

97
00:07:51,010 --> 00:07:54,640
that seems to work but there, I actually can't scroll.

98
00:07:54,640 --> 00:07:57,820
So on Android, this is actually not working correctly,

99
00:07:57,820 --> 00:07:59,850
this list is not scrollable there.

100
00:07:59,860 --> 00:08:01,320
So what's wrong on Android?

101
00:08:01,510 --> 00:08:04,930
Now whilst it does scroll fine on iOS, for the scroll

102
00:08:04,930 --> 00:08:12,490
view nested in a view to scroll fine on Android as well, make sure that the surrounding view actually

103
00:08:12,820 --> 00:08:15,080
uses flex one,

104
00:08:15,100 --> 00:08:20,320
so add this to the list style here which is the style applied to the view which is wrapped around the

105
00:08:20,320 --> 00:08:21,570
scroll view.

106
00:08:21,820 --> 00:08:25,120
With that added, if we now try this again on Android,

107
00:08:28,940 --> 00:08:34,700
you'll now notice that now this is scrollable as soon as you exceeds the boundaries of the screen

108
00:08:34,700 --> 00:08:37,460
and on iOS, it should still work as before

109
00:08:37,580 --> 00:08:40,810
and that being iOS, we can even scroll without it exceeding the boundaries,

110
00:08:40,820 --> 00:08:45,090
that's just the default iOS behavior that you can balance such lists a bit.

111
00:08:45,710 --> 00:08:51,800
So now we have that scrollable list here with scroll view and map and it works on both Android and

112
00:08:51,800 --> 00:08:52,310
iOS.