In the last video he added in a scroll view around all three of our different lists to add in some scrolling
for Android now on Android you might not see the same thing right here especially if you are only running
an OS device nonetheless go through the solution I'm about to lay out here just so you understand how
this would work.
So it's very clear right now that we're not quite able to scroll through everything that we would expect.
So what's going on.
Well in this case we essentially have our most parent view inside of our application right now which
is the view inside of our search screen.
This view is essentially not quite filling up the amount of space that we would expect you see by default.
Anytime we show a view element and put some amount of content inside of it React Native is going to
very happily throw in as much content in there as it possibly can.
So in this case this view right here is actually spin expanding vertically even off the screen all the
way down past the bottom activity bar that you see right there.
To confirm this we could very quickly add in a border around this view element.
So going to find that view element and I'll add in a manual style here.
So I'm not going to make use my style sheets.
I'm gonna put in a border color of red and a border width of 10 says give me a really thick border so
we can definitely see the extents of this view element so I'll save this flip back over.
There's the red border.
And as soon as my content loads it now very clearly goes all the way down off the screen.
So some content is being displayed inside that view that's going way off the very bottom edge and on
ISIS I don't quite have the same issue just because this device is so much taller.
So we essentially need to somehow constrain this view element until it don't try to expand and just
fill up willy nilly as much space as possible.
So to make sure that we tell a view element to only make use of the screen a state that's available
we can add on that flex property that we discussed a little bit ago when we were talking about flex
box.
Remember the Flex property can be added to a single child that we're displaying and that's going to
essentially tell that element to just expand and fill up all the visible space that is available.
So back on this parent view right here I'm going to remove the Custom Border and I'll replace it with
flex of one.
So that's telling our most apparent view only try to use the actual visible screen a state that is visible
so I'll save that flip back over and now once my results actually load up on Android it's a little bit
slower than my IOW device.
I can now see that I can scroll through all the content that's on the screen.
Very good.
Okay.
You're going to see very frequently that a lot of styling issues can actually be solved by adding in
a flex one to our most parent view.
Essentially anytime it feels like you have some content that's being cut off or is expanding off the
screen.
Yeah very frequently we're going to add in a style of flex one to the most parent view.
Okay so this looks pretty good.
So let's pause right here once again and continue in the next video.