Now there's one thing you will notice.
If you enter a goal here and here, I will quickly use the same goal over and over again
even though that gives me an error
but the app will continue to work, so let's ignore the warning at the bottom.
If I entered this, often enough you see at some point of time, we'll exceed the boundaries of the screen
but by default, you can't scroll
and that's something which can be really confusing if you're getting started with React Native because
if you're coming from the web, there,
you can always scroll, the browser by default makes your page scrollable if your content exceeds the
boundaries of the page. Here,
that's not the same,
you don't get scrolling just because your content goes beyond the boundaries of your screen,
instead your content is just not reachable anymore.
Now obviously, that's not an option, that's a horrible user experience, we want to have a scrollable
content but in native apps, you have to be explicit about the fact that this page or a part of this page
should be scrollable and it's the same in React Native therefore.
So here, what we can do is we can use another component baked React Native and that's the scroll
view and as the name suggests, this is a view which is scrollable.
So now we can replace this view here which holds our list items with the scroll view. On the scroll view,
you also got properties that allow you to configure it,
you can just place your cursor here and hit control space to get an idea of what you can set or check
out the official docs,
for example you could set horizontal to scroll horizontally but here, I'll leave the default which is
vertical scrolling and by just adding this, you will see that now if I add learn React Native a dozen
times here,
so let me fill that page, now this is scrollable as you can see, I can now scroll my content and only the
part which is wrapped in the scroll view.
We could have wrapped it around the entire page, so we could have replaced this view here with a scroll
view or wrap this with a scroll view, so that would also work,
it's also something we can do and then the entire page is scrollable,
so if I now add learn React Native here,
you'll see that now the entire page scrolls, here on iOS you can even scroll without items, that's
the default iOS behavior but it of course always bounces back but that's up to you where you add this
and here I just want to have a subsection of the screen which is scrollable so I only wrap this section
with the scroll view
but this is of course a super important component for any content where you can't guarantee that it
fits onto the screen.
Now of course, you might think that with all these device sizes available, you can never guarantee this
but there are certain pieces of content, like an input and a button which you will always be able to fit
onto the screen and which also can be configured to resize themselves to fit onto the screen, whereas
there is other content, typically lists of data like this here where you can't guarantee it and where
you just know after 10 or 20 items, it will definitely exceed any screen
and that's the content you want to wrap into a scroll view. Other content like input buttons, hardcoded
static text,
so basically any content where you know how many items you'll have in advance typically can be squeezed
onto a screen with the right tools, namely with flexbox which will also do throughout this course but
for dynamically generated content like this, you definitely want a scroll view.