1
00:00:02,380 --> 00:00:08,860
Now in the list we're rendering here, our list items are as wide as the list because we're wrapping list

2
00:00:10,090 --> 00:00:12,140
on this view here around our scroll view,

3
00:00:12,140 --> 00:00:17,290
therefore this sets the width for the scroll view add that sets the width for the items in there.

4
00:00:17,290 --> 00:00:22,330
Now let's say we had a different width here on the list item, let's say the width of a list item should

5
00:00:22,330 --> 00:00:24,330
be just 60% of the list,

6
00:00:24,340 --> 00:00:30,760
so it's not 100% which is the default but just 60%. If we do that and we get started, you

7
00:00:30,760 --> 00:00:35,570
see now this sits on the left which makes sense, the default positioning here

8
00:00:35,620 --> 00:00:42,400
if you set a width on an item which is inside of a flexbox and list items are inside of a flexbox

9
00:00:42,400 --> 00:00:49,420
because scroll view internally also uses flexbox in the end, even though there are some differences

10
00:00:49,600 --> 00:00:55,550
compared to the normal flexbox and I'll come back to those but it still uses flexbox and therefore

11
00:00:55,580 --> 00:01:03,250
since we set a width, the default of stretching child items along the cross axis and the cross axis would

12
00:01:03,250 --> 00:01:08,950
be the horizontal axis because we have flex direction column as a default but the default stretching

13
00:01:08,950 --> 00:01:14,890
is overridden because we have a width on our list item, so on our child elements. Now we still might

14
00:01:14,890 --> 00:01:20,620
want to center these items in the list though and for this, you can go to the scroll view and assign a

15
00:01:20,620 --> 00:01:21,430
style there,

16
00:01:21,430 --> 00:01:28,000
though not through the style prop which you can use but which doesn't allow you to style anything but to

17
00:01:28,000 --> 00:01:34,720
style the content in a scroll view and apply for example flex settings for the content, you need to use

18
00:01:34,720 --> 00:01:40,090
the content container style and that's just something to memorize or to look up in the official docs of

19
00:01:40,090 --> 00:01:47,260
course. For scroll view and for FlatList, you have that content container style which you use to control

20
00:01:47,260 --> 00:01:50,140
the layout inside of that scroll view.

21
00:01:50,230 --> 00:01:56,620
Now here on that content container style, we can now refer to styles list and therefore, let me actually

22
00:01:56,620 --> 00:02:02,320
rename this current list style we're applying to that wrapping view the list container because in the

23
00:02:02,320 --> 00:02:06,670
end it's a container around our list and this here is the list itself.

24
00:02:06,670 --> 00:02:11,750
Alternatively, you could have named this list content of course but I'll just name it list and rename

25
00:02:11,750 --> 00:02:16,810
the other thing to list container. Therefore, this here will be renamed to list container and

26
00:02:16,810 --> 00:02:21,700
now we can add a new list property here to the stylesheet and that's now inside of the scroll view,

27
00:02:21,760 --> 00:02:28,060
styling our container or laying out our container content to be precise and there, since this uses flex

28
00:02:28,060 --> 00:02:34,750
box internally, you can use align items to control the alignment along the cross axis and set this

29
00:02:34,810 --> 00:02:41,380
to center and this should now make sure that items are centered again in case they are smaller and that's

30
00:02:41,380 --> 00:02:43,440
indeed what's happening here.

31
00:02:43,510 --> 00:02:50,170
So with that, you know how to control and lay out the content inside of a scroll view or of a list

32
00:02:50,170 --> 00:02:58,660
in general. Now what if you also want to control the flexbox along the main axis though?

33
00:02:58,660 --> 00:03:06,520
Let's say our list here actually shouldn't start right below this box here with our controls but a little

34
00:03:06,520 --> 00:03:11,620
bit further down, it should start at the bottom of the screen and then grow up to the top and then only

35
00:03:11,620 --> 00:03:14,500
be scrollable when it reaches the top.

36
00:03:14,520 --> 00:03:21,590
This can also be controlled with our list style which is the style applied to content container style,

37
00:03:21,590 --> 00:03:27,350
so with this content container style, you can control this too by adding justifyContent because justify

38
00:03:27,350 --> 00:03:33,440
content allows you to position content along the main axis of the flexbox and flexbox main axis by

39
00:03:33,440 --> 00:03:38,430
default is the vertical axis because the default direction is column.

40
00:03:38,600 --> 00:03:45,410
So here, let's now use flex end instead of the default which is flex start and flex end should now actually

41
00:03:45,410 --> 00:03:47,350
move the items to the end of the list.

42
00:03:47,360 --> 00:03:48,740
So let's see whether that works,

43
00:03:49,870 --> 00:03:50,480
huh,

44
00:03:50,570 --> 00:03:52,590
doesn't seem to work, right?

45
00:03:52,610 --> 00:03:59,670
The problem here is that the scroll view only grows this internal view which it wraps in the end when

46
00:03:59,670 --> 00:04:01,360
new items are added,

47
00:04:01,370 --> 00:04:06,310
now we want that internal view to grow automatically. On a normal view,

48
00:04:06,320 --> 00:04:08,800
we would achieve this by adding flex one.

49
00:04:08,990 --> 00:04:14,170
So let's try this here on this list styling we add to the scroll view as well.

50
00:04:14,180 --> 00:04:21,570
If we add it here, now you see this behaves correctly, it starts here at the bottom and now let's grow this

51
00:04:21,600 --> 00:04:23,860
and hope we don't solve this too early

52
00:04:24,450 --> 00:04:32,870
and you see, we can scroll. So this actually is growing and works in exactly the way we want. It's scrollable

53
00:04:32,890 --> 00:04:39,000
and generally works in the way we want but you'll notice that you actually can't really scroll it

54
00:04:39,000 --> 00:04:45,420
such that you always see the most recent item. You can scroll there but then it jumps back up and that's

55
00:04:45,420 --> 00:04:48,270
probably not what we want, on Android,

56
00:04:48,270 --> 00:04:50,370
it also doesn't work. There,

57
00:04:50,370 --> 00:04:53,340
if we now start guessing, you'll see the same behavior,

58
00:04:53,340 --> 00:04:59,110
well if I would get there, there the only difference is that it's broken for a different reason,

59
00:04:59,140 --> 00:05:05,320
I can't even scroll. So flex one doesn't really do the job,

60
00:05:05,320 --> 00:05:11,170
what you can use there instead is something we haven't used before and that's flex grow. Now flex grow

61
00:05:11,230 --> 00:05:17,230
also make sure that the item to which you add this grows and takes up as much space as it can,

62
00:05:17,230 --> 00:05:23,150
just like flex one, the difference is that flex grow works a bit differently internally,

63
00:05:23,260 --> 00:05:26,250
it's more flexible than flex. Flex

64
00:05:26,290 --> 00:05:32,050
simply says take all the available space in all directions you can get, flex grow basically instructs

65
00:05:32,050 --> 00:05:38,980
the container to be able to grow, to be able to take as much space as it can get and it will but it keeps

66
00:05:38,980 --> 00:05:39,580
the

67
00:05:39,780 --> 00:05:45,280
other behavior it has normally, in this case of the scroll view, where this is scrollable and can exceed

68
00:05:45,310 --> 00:05:47,300
the boundaries of the screen as well.

69
00:05:47,320 --> 00:05:53,080
So it's a bit more flexible and you probably don't need it that often on a normal view but on a scroll

70
00:05:53,080 --> 00:05:54,720
view, it's exactly what we need

71
00:05:54,820 --> 00:06:00,340
and I'm just showing this here because this is a special case which you just have to know or which you

72
00:06:00,340 --> 00:06:01,680
might stumble over

73
00:06:01,760 --> 00:06:07,420
and typically you then find solutions on stack overflow and so on, here you find it in this course because

74
00:06:07,660 --> 00:06:12,520
it is a scenario which you might encounter and therefore hopefully, you can then recall this lecture and

75
00:06:12,520 --> 00:06:14,140
see how to solve this.

76
00:06:14,170 --> 00:06:20,410
So I added flex grow to that list property and now let's give this another try. Here on iOS,

77
00:06:20,530 --> 00:06:30,520
if we start guessing numbers here, now you see I can actually scroll such that the latest item is visible

78
00:06:30,610 --> 00:06:33,750
and I can still also scroll such that the oldest item is visible,

79
00:06:33,760 --> 00:06:37,620
so now this is showing the behavior we want, thanks to flex grow.

80
00:06:37,750 --> 00:06:41,480
And on Android, it'll be the same if we start a game there,

81
00:06:45,510 --> 00:06:52,140
you see now I can scroll this here as well and I can see both the most recent guess and the oldest guess.

82
00:06:52,200 --> 00:06:58,860
So this is now working in the way it should here on Android and iOS and I was showing all of this

83
00:06:59,070 --> 00:07:05,490
simply so that you are aware of these patterns, of this special content container style on scroll view

84
00:07:05,670 --> 00:07:09,960
and I also wanted to make sure that you were aware of some of the issues you can run into when you start

85
00:07:09,960 --> 00:07:15,180
styling lis tsand when you want to add your own layout there, then these are some tricks which can be

86
00:07:15,180 --> 00:07:18,510
very handy if you encounter that situation in your app.