Hi and welcome to our tutorial on React native scroll view.
The scroll view is an essential component in react native as it allows you
to display large amounts of data on a small mobile screen.
Without it you would have to limit
the amount of data displayed or create complex layouts to display it all.
The scroll view makes it easy to display
large amounts of data while keeping your app user friendly.
The examples of when you might want to use scroll view are displaying a list of items,
displaying a long form with multiple fields, displaying a large image or
displaying a section of content that takes up more space than the screen.
Now let's dive into coding and explore how to use scroll views.
You're now looking at my screen with my editor opened,
my simulator running and my metro bundlers running as well so that we're able to see
all the changes that we make in the simulator.
And I would like to talk to you about scroll views.
In order to use the scroll view you're going to have to import the scroll view
component first and then we're going to place it inside
our safe area view and we're going to use scroll view component here.
So in order to demonstrate how scroll view
works, we're going to have to have some content that becomes scrollable and I'm
going to be using an image component for that.
So let's import the image component and let's use it to display
a cake picture that I have in my assets folder
and then let's give it some style so that we give it some height that's big
enough and let's give it like 500 and the width can be 500 as well.
Let's close this and let's save it.
And now we're able to see our cake here.
So let's say we comment out our scroll view component for a second here.
If we were to place multiple image components here,
you're going to be able to see that we cannot scroll this simulator.
But if we were to put the scroll view back
and save this, we're now going to be able to scroll through it.
So as every component in react native scroll view also has its own props.
And the first prop that I want to discuss with you is a prop called shows vertical
scroll indicator and by default it's set to true.
So if we see this now when we're scrolling on the right side of the simulator,
we are seeing an indicator showing us where we are in the scrolling process.
But if we set this to false when we're going to be scrolling,
we're not going to be seeing that indicator anymore.
If we were to make our scroll view component horizontally scrollable,
which is by default set to false, but let's set it to true now,
we're going to be able to see that we can scroll horizontally instead.
And we also have the indicator here and you have a prop for this as well.
So you could do shows horizontal scroll
indicator and set it to false and then when you're going to be scrolling you're
not going to be seeing the indicator anymore.
One other thing that I want to discuss is how to style the scroll view content.
For this there's a prop that exists called content container style and you could give
it a style object and you could say that let's say background color is red.
Let's give it height greater than our pictures here so let's give it like 600 so
that we have 100 difference to see the background color.
If we save this we're going to be able
to see the red color here below our pictures because our scroll view container
has a greater height than the pictures itself.
And the last thing I want to talk about is how to control what happens on scroll.
So for this you have on scroll
event handler and you can give it a callback function.
And here we're just going to console log.
We are now scrolling.
Let's save this, let's open our terminal
and if we're going to start scrolling every time we press and start scrolling
you're going to be able to see this message here.
So this is just in case you want
to control what's happening when the user starts to scroll.
With the scroll view you can now easily display large amounts of data on a small
mobile screen making your app user friendly and easy to navigate.
Happy coding and see you in the next video.