In this video we're going to very quickly take care of two things.
First off our horizontal scroll right here is showing a scroll bar.
Secondly if we ever have a similar sized device then our entire list right here is kind of cut off on
the bottom and we can't really see what's going on at the bottom of the screen.
So let's try to fix both these things inside this video.
First off we'll take care of that scroll bar the scroll bar is controlled by our flat list element which
we created inside of our results list component.
So here's results list.
There's the flat list component.
I'm going to add in an additional prop to this thing of shows horizontal scroll indicator.
And I'll set it to false.
Like so now I've got to tell you.
You can very easily make a typo inside this prop name so please make sure you have shows with a s on
the end and then horizontal scroll indicator and just double check your spelling.
If you make a typo on this prop you're not going to see a error message or a warning or anything like
that you're just going to see that the scroll indicator is still visible.
Guess I'm going to say this and now when I start to scroll through my list I don't have any scroll indicator
anymore.
OK so that definitely works.
So now the next two we need to do is make sure that we have a smaller sized device.
We can scroll horizontally vertically through this list to do so I'm going to go back to my search screen
component.
Remember this is where we show our three instances of the results list right here.
So if we ever want to make some amount of content scroll ball all we have to do is wrap it with another
primitive element from React Native called a scroll view.
I'm going to import this scroll view from React Native at the top a scroll view is essentially works
identically to a view element.
However if the scroll view detects that it has too much content inside of it to fit all on the screen
at one time it will automatically enable scrolling.
So we can have our user scroll through that content.
So I got to go back down and find my results list.
Here it is right here and I'll just wrap it with a scroll view all three of them
I'll save that and I'll test this out on my android device once again.
And now if I start to scroll vertically I can get through the entire list or at least kind of.
So it's clear that we've got some amount of scrolling here but it's not quite working as expected on.
IOW we can kind of over scroll and see everything works very easily.
But again it does not quite work as expected on my android device.
So let's take a quick pause right here.
When we come back the next video we're going to talk about a couple of different props we can provide
or some additional styling we can provide to our scroll view element to fix up this issue.