All right.
So how can we fix this problem.
Well it's not real a problem it's just the way it works now.
I'm just going to go here and just to let you know I'm going to do this.
We're just going to add some names to that list so we can you know get the problem instantly and I don't
have to type it again.
So now the first thing I'm going to do I'm going to copy the text input and the bun and I'm gonna put
them at the top so we can always get the text input.
And now I'm going to go right here to the app and I'm going to make the NAV visible.
So let me just do it.
Going to chop it and I'm going to put right here at the top.
All right.
So I'm gonna reload it and we get the nav at the top and then everything else.
Now the.
Of course to fix this issue this problem we get a component and this component is called calls scroll
and then view.
So it was cruel view works just like a div with an overflow.
That's pretty much the main idea.
So if we want to make this component or this content scroll all we need to wrap everything within this
crawl view.
So I'm going to kind of copy and just close it at the bottom.
It's going to rub pretty much everything within this cruel view.
All right.
So button you mouse and a little bit crazy with this crawling.
So I'm going to real the application and by default you don't get a width of 100 percent.
Now the scroll view of course supports styling so you can add whatever style to the scroll view.
So what I'm gonna do I'm just gonna give it a with of 100 percent.
They make it right with 100 percent.
So if I save it and we load the application we get pretty much the same behavior and an android again
same problem so command em reload.
And you know we can get it.
All right.
So now notice that the content.
Now it's a scribble.
Right.
Really cool.
This just works like a real application.
Now remember that this is going to happen this behavior will happen within the content.
You're wrapping this scroll view.
Notice that the scrolling happens on this component.
But this header you know it just stays the same.
Right.
So most of the times you're just not going to use the scroll view like this.
You're going to for example let me just delete that right here and what I'm going to do I'm going to
add the scroll view.
But you know inside this component is gonna go here and say that I want to bring my scroll view and
of course we need to import it at the top.
If not we are going to get an error message.
All right.
I'm going to go at the top and I want to type it again.
Just getting copied and paste it's going to do copy paste and if I reload the application we pretty
much get the same behavior but now everything every time we put something on the main component and
something right here I don't know like the list item.
Know let me just copy and pasted everything is gonna be scribble.
Even the list item that's most of times this is the way you use it.
And of course like like it just told you this one the scroll view works just like a div with an overflow.
If I just copy this and put it outside the scroll view everything it's going to be scribble but not
this.
Ryan you always need to remember this.
All right.
Let me just just go back.
I'm going to leave just as cruel view and the input now with the scroll view we get a few goodies for
example we get some props to trigger some callback functions.
So for example if you go right here just let me show you.
Find it scroll view and it's always on the documentation if you go to all the way to the top you get
all the props you can use.
So you get a lot of things with this.
I'm just gonna show you a couple of this ones.
OK.
So most of the times and if you ask me how many times I used you know this properties I just use three
or four in past that set I'm gonna go here and say I want on content just like this.
Let me find it on content size changed content.
There you go.
So this one it's pretty pretty useful.
So I'm gonna just open and close on this one with you.
Of course we run a function and we can alert whenever the sites change.
So I'm gonna just say hey all right go to the application to reloaded and all right.
So first we get on an alert.
And it's because when this kicks in this one it's get gets getting triggered.
And this one it's running and trying to render all the information for.
So of course on the first render we don't really have anything.
But then of course is going to detect all the names and is going to add them to the list.
So it's gonna make the scroll view bigger.
It's going to add more height it's changing the height of these Crowley starts at zero.
And once we add the names it's much bigger.
So when that happens you get away to know when you know the height changes.
So if I just add a name then teachers go at the top and at whatever.
Of course I added and height is going to change.
So if I added you know we are adding that value and the height changes so it would this one would you
get as well you get the width and as first arguments and you get height as a second argument.
So you get a way of to know you know what what's the height of what you're doing.
This gets admitted just do alert to height.
Why not.
It's going to reloaded and we get the height of the component and if I add something else.
Right.
We get you know something bigger.
So very cool really cool stuff.
This is what.
This one it's really useful.
Now the other ones and I'm going to add this because not all people know what momentum is.
So I'm going to add the momentum begin.
And this one is just like the other one is just a callback function.
And I'm going to alert something in a second and then I'm going to get a different one which is on momentum.
I'm sorry.
I'm going to do this one first and then I'm going to do the other one.
So the momentum it's when you scroll all the way down and you you know just kind of overlap this scrolling
behavior and then it goes back.
That is the momentum.
You know when it starts and when it goes back you know starts and go back.
So this is the momentum.
So get away to know when the momentum begins.
And then when the momentum ends.
So for now I'm just going to go here and say start reload the application.
And of course we get that that alert.
I'm going to go all the way to the top.
And you know we just get the start.
If I started again we get start.
You get a way to know when the user reached that which is the end.
And they do this.
So maybe you want to bring to make a call maybe to an API and bring some more data and you can put it
you know at the bottom.
So then of course you get the opposite of this which is on momentum and scroll end.
And this one of course works pretty much the same but backwards.
So I'm going to do alert and this is when the momentum ends you know when the component goes back I'm
going to combat this out because this point is just annoying.
Gonna go at the bottom and let me do it again.
I'm going to scroll and we don't get it.
We didn't get the you know the alert because it's not that begin.
If this goes goes back as in it's done going back we get the end and of course you get the good old
scrolling just like you would get for you know for web.
So I'm going to say on scroll and I'm pretty sure you get the idea of what's going to happen right here.
So going to say scroll scrolling right.
So this one is getting annoying.
As soon as I scroll something I get scoring and this is going to happen on every unit.
It's called one pixel.
Let's say I'm gonna get that callback.
Pretty cool you know.
Of course you get a lot more we could spend a day just trying to you know trying to show you this I'm
not going to do that I just want to move forward to the next component.
And of course if you if you want you can go through it through the documentation and just you know just
put it right here and see what it does.
Of course if you click on this they can give you an explanation of what you get.
All right.
OK.
So let's go to the next one and we're going to talk about a picture and slider.