1
00:00:00,750 --> 00:00:05,880
In the last video he added in a scroll view around all three of our different lists to add in some scrolling

2
00:00:05,880 --> 00:00:10,920
for Android now on Android you might not see the same thing right here especially if you are only running

3
00:00:10,920 --> 00:00:15,360
an OS device nonetheless go through the solution I'm about to lay out here just so you understand how

4
00:00:15,360 --> 00:00:16,280
this would work.

5
00:00:16,440 --> 00:00:20,430
So it's very clear right now that we're not quite able to scroll through everything that we would expect.

6
00:00:20,820 --> 00:00:22,280
So what's going on.

7
00:00:22,290 --> 00:00:27,030
Well in this case we essentially have our most parent view inside of our application right now which

8
00:00:27,030 --> 00:00:29,370
is the view inside of our search screen.

9
00:00:29,370 --> 00:00:35,650
This view is essentially not quite filling up the amount of space that we would expect you see by default.

10
00:00:35,670 --> 00:00:40,020
Anytime we show a view element and put some amount of content inside of it React Native is going to

11
00:00:40,020 --> 00:00:44,460
very happily throw in as much content in there as it possibly can.

12
00:00:44,460 --> 00:00:50,700
So in this case this view right here is actually spin expanding vertically even off the screen all the

13
00:00:50,700 --> 00:00:53,570
way down past the bottom activity bar that you see right there.

14
00:00:53,850 --> 00:00:59,010
To confirm this we could very quickly add in a border around this view element.

15
00:00:59,010 --> 00:01:02,520
So going to find that view element and I'll add in a manual style here.

16
00:01:02,520 --> 00:01:04,120
So I'm not going to make use my style sheets.

17
00:01:04,650 --> 00:01:13,060
I'm gonna put in a border color of red and a border width of 10 says give me a really thick border so

18
00:01:13,060 --> 00:01:19,540
we can definitely see the extents of this view element so I'll save this flip back over.

19
00:01:19,740 --> 00:01:20,600
There's the red border.

20
00:01:20,650 --> 00:01:25,180
And as soon as my content loads it now very clearly goes all the way down off the screen.

21
00:01:25,240 --> 00:01:30,730
So some content is being displayed inside that view that's going way off the very bottom edge and on

22
00:01:30,790 --> 00:01:35,060
ISIS I don't quite have the same issue just because this device is so much taller.

23
00:01:35,260 --> 00:01:40,450
So we essentially need to somehow constrain this view element until it don't try to expand and just

24
00:01:40,450 --> 00:01:43,230
fill up willy nilly as much space as possible.

25
00:01:43,300 --> 00:01:48,520
So to make sure that we tell a view element to only make use of the screen a state that's available

26
00:01:48,850 --> 00:01:53,470
we can add on that flex property that we discussed a little bit ago when we were talking about flex

27
00:01:53,470 --> 00:01:54,200
box.

28
00:01:54,340 --> 00:01:59,590
Remember the Flex property can be added to a single child that we're displaying and that's going to

29
00:01:59,590 --> 00:02:05,620
essentially tell that element to just expand and fill up all the visible space that is available.

30
00:02:05,680 --> 00:02:10,780
So back on this parent view right here I'm going to remove the Custom Border and I'll replace it with

31
00:02:10,810 --> 00:02:11,990
flex of one.

32
00:02:12,200 --> 00:02:18,010
So that's telling our most apparent view only try to use the actual visible screen a state that is visible

33
00:02:19,590 --> 00:02:26,270
so I'll save that flip back over and now once my results actually load up on Android it's a little bit

34
00:02:26,270 --> 00:02:27,830
slower than my IOW device.

35
00:02:27,830 --> 00:02:32,000
I can now see that I can scroll through all the content that's on the screen.

36
00:02:32,000 --> 00:02:32,700
Very good.

37
00:02:33,610 --> 00:02:34,040
Okay.

38
00:02:34,060 --> 00:02:38,110
You're going to see very frequently that a lot of styling issues can actually be solved by adding in

39
00:02:38,140 --> 00:02:40,360
a flex one to our most parent view.

40
00:02:40,540 --> 00:02:45,490
Essentially anytime it feels like you have some content that's being cut off or is expanding off the

41
00:02:45,490 --> 00:02:46,340
screen.

42
00:02:46,360 --> 00:02:50,620
Yeah very frequently we're going to add in a style of flex one to the most parent view.

43
00:02:51,500 --> 00:02:52,700
Okay so this looks pretty good.

44
00:02:52,810 --> 00:02:56,530
So let's pause right here once again and continue in the next video.