1
00:00:02,310 --> 00:00:04,600
Now there's one thing you will notice.

2
00:00:05,590 --> 00:00:10,710
If you enter a goal here and here, I will quickly use the same goal over and over again

3
00:00:10,720 --> 00:00:12,000
even though that gives me an error

4
00:00:12,040 --> 00:00:17,120
but the app will continue to work, so let's ignore the warning at the bottom.

5
00:00:17,140 --> 00:00:22,690
If I entered this, often enough you see at some point of time, we'll exceed the boundaries of the screen

6
00:00:22,720 --> 00:00:25,270
but by default, you can't scroll

7
00:00:25,400 --> 00:00:29,800
and that's something which can be really confusing if you're getting started with React Native because

8
00:00:29,800 --> 00:00:31,890
if you're coming from the web, there,

9
00:00:31,930 --> 00:00:38,650
you can always scroll, the browser by default makes your page scrollable if your content exceeds the

10
00:00:38,650 --> 00:00:40,720
boundaries of the page. Here,

11
00:00:40,750 --> 00:00:42,300
that's not the same,

12
00:00:42,340 --> 00:00:48,500
you don't get scrolling just because your content goes beyond the boundaries of your screen,

13
00:00:48,520 --> 00:00:52,380
instead your content is just not reachable anymore.

14
00:00:52,420 --> 00:00:56,530
Now obviously, that's not an option, that's a horrible user experience, we want to have a scrollable

15
00:00:56,530 --> 00:01:04,330
content but in native apps, you have to be explicit about the fact that this page or a part of this page

16
00:01:04,540 --> 00:01:08,410
should be scrollable and it's the same in React Native therefore.

17
00:01:08,440 --> 00:01:16,060
So here, what we can do is we can use another component baked React Native and that's the scroll

18
00:01:16,060 --> 00:01:20,710
view and as the name suggests, this is a view which is scrollable.

19
00:01:20,710 --> 00:01:29,360
So now we can replace this view here which holds our list items with the scroll view. On the scroll view,

20
00:01:29,370 --> 00:01:31,980
you also got properties that allow you to configure it,

21
00:01:32,010 --> 00:01:38,020
you can just place your cursor here and hit control space to get an idea of what you can set or check

22
00:01:38,020 --> 00:01:39,390
out the official docs,

23
00:01:39,390 --> 00:01:45,150
for example you could set horizontal to scroll horizontally but here, I'll leave the default which is

24
00:01:45,150 --> 00:01:53,240
vertical scrolling and by just adding this, you will see that now if I add learn React Native a dozen

25
00:01:53,240 --> 00:01:54,430
times here,

26
00:01:54,740 --> 00:02:02,420
so let me fill that page, now this is scrollable as you can see, I can now scroll my content and only the

27
00:02:02,420 --> 00:02:04,760
part which is wrapped in the scroll view.

28
00:02:04,850 --> 00:02:10,850
We could have wrapped it around the entire page, so we could have replaced this view here with a scroll

29
00:02:10,850 --> 00:02:15,250
view or wrap this with a scroll view, so that would also work,

30
00:02:16,180 --> 00:02:20,770
it's also something we can do and then the entire page is scrollable,

31
00:02:20,820 --> 00:02:24,020
so if I now add learn React Native here,

32
00:02:27,950 --> 00:02:33,280
you'll see that now the entire page scrolls, here on iOS you can even scroll without items, that's

33
00:02:33,280 --> 00:02:40,600
the default iOS behavior but it of course always bounces back but that's up to you where you add this

34
00:02:40,600 --> 00:02:46,150
and here I just want to have a subsection of the screen which is scrollable so I only wrap this section

35
00:02:46,150 --> 00:02:47,170
with the scroll view

36
00:02:47,170 --> 00:02:53,290
but this is of course a super important component for any content where you can't guarantee that it

37
00:02:53,290 --> 00:02:55,040
fits onto the screen.

38
00:02:55,100 --> 00:02:59,650
Now of course, you might think that with all these device sizes available, you can never guarantee this

39
00:03:00,250 --> 00:03:04,810
but there are certain pieces of content, like an input and a button which you will always be able to fit

40
00:03:04,810 --> 00:03:10,780
onto the screen and which also can be configured to resize themselves to fit onto the screen, whereas

41
00:03:10,780 --> 00:03:16,000
there is other content, typically lists of data like this here where you can't guarantee it and where

42
00:03:16,000 --> 00:03:21,760
you just know after 10 or 20 items, it will definitely exceed any screen

43
00:03:21,850 --> 00:03:27,770
and that's the content you want to wrap into a scroll view. Other content like input buttons, hardcoded

44
00:03:27,940 --> 00:03:29,040
static text,

45
00:03:29,140 --> 00:03:35,290
so basically any content where you know how many items you'll have in advance typically can be squeezed

46
00:03:35,320 --> 00:03:42,340
onto a screen with the right tools, namely with flexbox which will also do throughout this course but

47
00:03:42,340 --> 00:03:46,360
for dynamically generated content like this, you definitely want a scroll view.