In this video I want to show you one or two more quick things around this flat list component so to
get started I want to make sure that my flightless component spins off the very bottom of the screen
right now on both Android and IOW all these different friends are kind of compacted up to the very top
and so on Android as we saw a little bit ago I don't even get any ability to scroll through these elements
because there's just not enough content here.
So in order to make sure that the list spans all the way past the bottom of the screen we can add in
a property or some styling to this text element right here.
So we're gonna make sure that the text element has some extra spacing above and below it to make sure
that the list is tall enough that it goes off the very bottom edge so to do so I'm gonna go down to
the bottom of the file and find my style's object and then going to expand that object and add in a
text style property once again and inside of here I'm going to add in a margin vertical property.
This is going to apply some spacing above and below every text element that we display so for margin
vertical I'm going to add in like maybe 50 or so we can then apply that styling rule to our text element
right here.
Remember by just creating a style object as we did right here nothing happens right out of the box.
We have to very manually wire up this style that we just created to some element returned from our component.
So going to find my text element.
I'm going to add in the style prop I'll put in my curly braces and we'll do styles dot text style as
a second reminder.
I just want to mention again very quickly the name of the style object that we create right here.
So in this case textile it doesn't have to actually match up or correspond to the name of the Element
whatsoever.
We could put in gibberish right here if we wanted to like a SDF.
It just has to be the same when we actually try to use it up here as well.
But in general I like to use something like textile or just simply text if you're trying to apply some
styling to a text element because it makes it really easy for us to glance at the style sheet right
here and understand where each different style is being used.
OK.
Let's save that and see how we're doing.
OK so now my list has a ton of additional vertical height to it because we added in some spacing above
and below every text element.
Now we can very easily screw scroll through this list of items and it definitely goes down beneath the
bottom the screen and on Android we've got something very similar as well.
So over here I can scroll around to OK so there's two additional props that I want to show you related
to the flat list we're going to eventually use these different props in a future application that we
work on.
So for right now I just want to show them to you and let you know that they exist.
The first prop I want to show you is the horizontal prop.
If we just add in the word horizontal to a J OSX tag like so that is equivalent to writing out horizontal
equals true inside of curly brackets like so by adding in this horizontal prop or better yet it's shorthand
by just writing out the word horizontal re centrally telling our list that we wanted to scroll horizontally
across the screen from left to right as opposed to up and down.
So if I now save this we're going to see our list laid out from left to right.
Now we can scroll horizontally through it.
Same thing on Android as well.
Now the second prop I want you to be aware of.
You'll notice that on both IAW an Android this is kind of hard to see but if you look down at the very
bottom of the screen as I scroll through that list you'll notice that there's a little scroll bar down
there.
It's right there above my kind of software buttons when I scroll.
Yeah.
There's the scroll bar.
Same thing on ISIS as well all the way down at the very bottom.
I got that little list of elements.
So in many cases we might want to hide that scroll bar and make sure that it's not visible to the user.
So to disable that scroll bar we can add in horizontal or so it shows horizontal.
There we go scroll indicator very long term right there make sure you've got the correct spelling and
capitalization all the way through and we'll set that equal to False like so that's going to keep that
scroll bar from appearing when we scroll through our list of items.
So if I now save this and I scroll through no longer do I see that scroll bar appear at the very bottom.
Same thing on Android as well now.
In many cases like right now it might seem like well who cares about that horizontal scroll.
You're going to notice that in a lot of different Web apps me mobile applications that you might use
on a everyday basis whenever you scroll through a horizontal list of items having a scroll bar on there
is actually really distracting.
And so there are many cases where we might want to show a horizontal list and hide that scroll bar and
essentially that's how we do it.
As I mentioned we're going to work on the application the future where we're going to have to make a
horizontal list and we're definitely going to want to disable a scroll indicator on that application
we built.
OK.
So that's pretty much it right now for a flat list we now know how to show a list of elements to our
user.
Let's take a pause right here in the next video we're going to start to move on to our next little mini
application.