1
00:00:01,130 --> 00:00:03,530
In this video we're going to very quickly take care of two things.

2
00:00:03,530 --> 00:00:07,040
First off our horizontal scroll right here is showing a scroll bar.

3
00:00:07,040 --> 00:00:11,750
Secondly if we ever have a similar sized device then our entire list right here is kind of cut off on

4
00:00:11,750 --> 00:00:14,970
the bottom and we can't really see what's going on at the bottom of the screen.

5
00:00:15,200 --> 00:00:18,160
So let's try to fix both these things inside this video.

6
00:00:18,170 --> 00:00:23,300
First off we'll take care of that scroll bar the scroll bar is controlled by our flat list element which

7
00:00:23,300 --> 00:00:26,460
we created inside of our results list component.

8
00:00:26,510 --> 00:00:27,940
So here's results list.

9
00:00:27,980 --> 00:00:29,930
There's the flat list component.

10
00:00:29,930 --> 00:00:37,100
I'm going to add in an additional prop to this thing of shows horizontal scroll indicator.

11
00:00:37,370 --> 00:00:38,540
And I'll set it to false.

12
00:00:38,540 --> 00:00:40,700
Like so now I've got to tell you.

13
00:00:40,730 --> 00:00:46,700
You can very easily make a typo inside this prop name so please make sure you have shows with a s on

14
00:00:46,700 --> 00:00:51,170
the end and then horizontal scroll indicator and just double check your spelling.

15
00:00:51,170 --> 00:00:55,310
If you make a typo on this prop you're not going to see a error message or a warning or anything like

16
00:00:55,310 --> 00:00:59,140
that you're just going to see that the scroll indicator is still visible.

17
00:00:59,140 --> 00:01:05,020
Guess I'm going to say this and now when I start to scroll through my list I don't have any scroll indicator

18
00:01:05,020 --> 00:01:05,520
anymore.

19
00:01:06,160 --> 00:01:07,820
OK so that definitely works.

20
00:01:07,820 --> 00:01:11,270
So now the next two we need to do is make sure that we have a smaller sized device.

21
00:01:11,380 --> 00:01:16,480
We can scroll horizontally vertically through this list to do so I'm going to go back to my search screen

22
00:01:16,480 --> 00:01:17,470
component.

23
00:01:17,470 --> 00:01:21,730
Remember this is where we show our three instances of the results list right here.

24
00:01:22,540 --> 00:01:27,580
So if we ever want to make some amount of content scroll ball all we have to do is wrap it with another

25
00:01:27,610 --> 00:01:30,970
primitive element from React Native called a scroll view.

26
00:01:31,110 --> 00:01:38,150
I'm going to import this scroll view from React Native at the top a scroll view is essentially works

27
00:01:38,150 --> 00:01:39,950
identically to a view element.

28
00:01:39,950 --> 00:01:45,200
However if the scroll view detects that it has too much content inside of it to fit all on the screen

29
00:01:45,200 --> 00:01:47,700
at one time it will automatically enable scrolling.

30
00:01:47,750 --> 00:01:50,990
So we can have our user scroll through that content.

31
00:01:50,990 --> 00:01:53,380
So I got to go back down and find my results list.

32
00:01:53,420 --> 00:01:59,140
Here it is right here and I'll just wrap it with a scroll view all three of them

33
00:02:03,360 --> 00:02:08,540
I'll save that and I'll test this out on my android device once again.

34
00:02:08,570 --> 00:02:14,180
And now if I start to scroll vertically I can get through the entire list or at least kind of.

35
00:02:14,600 --> 00:02:19,960
So it's clear that we've got some amount of scrolling here but it's not quite working as expected on.

36
00:02:19,960 --> 00:02:23,210
IOW we can kind of over scroll and see everything works very easily.

37
00:02:23,210 --> 00:02:27,390
But again it does not quite work as expected on my android device.

38
00:02:27,440 --> 00:02:29,000
So let's take a quick pause right here.

39
00:02:29,030 --> 00:02:32,360
When we come back the next video we're going to talk about a couple of different props we can provide

40
00:02:32,390 --> 00:02:37,070
or some additional styling we can provide to our scroll view element to fix up this issue.