1
00:00:00,700 --> 00:00:05,680
In this video I want to show you one or two more quick things around this flat list component so to

2
00:00:05,680 --> 00:00:10,210
get started I want to make sure that my flightless component spins off the very bottom of the screen

3
00:00:10,660 --> 00:00:15,460
right now on both Android and IOW all these different friends are kind of compacted up to the very top

4
00:00:15,670 --> 00:00:19,960
and so on Android as we saw a little bit ago I don't even get any ability to scroll through these elements

5
00:00:20,080 --> 00:00:22,350
because there's just not enough content here.

6
00:00:22,690 --> 00:00:27,070
So in order to make sure that the list spans all the way past the bottom of the screen we can add in

7
00:00:27,130 --> 00:00:30,630
a property or some styling to this text element right here.

8
00:00:30,790 --> 00:00:35,650
So we're gonna make sure that the text element has some extra spacing above and below it to make sure

9
00:00:35,650 --> 00:00:40,510
that the list is tall enough that it goes off the very bottom edge so to do so I'm gonna go down to

10
00:00:40,510 --> 00:00:46,450
the bottom of the file and find my style's object and then going to expand that object and add in a

11
00:00:46,510 --> 00:00:53,550
text style property once again and inside of here I'm going to add in a margin vertical property.

12
00:00:53,620 --> 00:00:59,360
This is going to apply some spacing above and below every text element that we display so for margin

13
00:00:59,360 --> 00:01:05,860
vertical I'm going to add in like maybe 50 or so we can then apply that styling rule to our text element

14
00:01:05,860 --> 00:01:06,940
right here.

15
00:01:06,940 --> 00:01:12,110
Remember by just creating a style object as we did right here nothing happens right out of the box.

16
00:01:12,160 --> 00:01:17,770
We have to very manually wire up this style that we just created to some element returned from our component.

17
00:01:17,780 --> 00:01:19,530
So going to find my text element.

18
00:01:19,530 --> 00:01:28,620
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

19
00:01:28,620 --> 00:01:29,490
a second reminder.

20
00:01:29,490 --> 00:01:34,260
I just want to mention again very quickly the name of the style object that we create right here.

21
00:01:34,260 --> 00:01:38,880
So in this case textile it doesn't have to actually match up or correspond to the name of the Element

22
00:01:38,880 --> 00:01:39,930
whatsoever.

23
00:01:39,930 --> 00:01:43,070
We could put in gibberish right here if we wanted to like a SDF.

24
00:01:43,250 --> 00:01:46,710
It just has to be the same when we actually try to use it up here as well.

25
00:01:46,710 --> 00:01:51,780
But in general I like to use something like textile or just simply text if you're trying to apply some

26
00:01:51,780 --> 00:01:56,190
styling to a text element because it makes it really easy for us to glance at the style sheet right

27
00:01:56,190 --> 00:01:59,020
here and understand where each different style is being used.

28
00:01:59,940 --> 00:02:00,280
OK.

29
00:02:00,330 --> 00:02:03,150
Let's save that and see how we're doing.

30
00:02:03,230 --> 00:02:08,600
OK so now my list has a ton of additional vertical height to it because we added in some spacing above

31
00:02:08,600 --> 00:02:10,690
and below every text element.

32
00:02:10,760 --> 00:02:15,110
Now we can very easily screw scroll through this list of items and it definitely goes down beneath the

33
00:02:15,110 --> 00:02:18,970
bottom the screen and on Android we've got something very similar as well.

34
00:02:19,130 --> 00:02:24,660
So over here I can scroll around to OK so there's two additional props that I want to show you related

35
00:02:24,660 --> 00:02:29,160
to the flat list we're going to eventually use these different props in a future application that we

36
00:02:29,160 --> 00:02:29,940
work on.

37
00:02:30,000 --> 00:02:33,840
So for right now I just want to show them to you and let you know that they exist.

38
00:02:33,990 --> 00:02:37,780
The first prop I want to show you is the horizontal prop.

39
00:02:38,520 --> 00:02:43,980
If we just add in the word horizontal to a J OSX tag like so that is equivalent to writing out horizontal

40
00:02:44,310 --> 00:02:51,650
equals true inside of curly brackets like so by adding in this horizontal prop or better yet it's shorthand

41
00:02:51,740 --> 00:02:57,050
by just writing out the word horizontal re centrally telling our list that we wanted to scroll horizontally

42
00:02:57,110 --> 00:03:01,070
across the screen from left to right as opposed to up and down.

43
00:03:01,070 --> 00:03:05,330
So if I now save this we're going to see our list laid out from left to right.

44
00:03:05,480 --> 00:03:09,120
Now we can scroll horizontally through it.

45
00:03:09,260 --> 00:03:13,740
Same thing on Android as well.

46
00:03:13,760 --> 00:03:15,700
Now the second prop I want you to be aware of.

47
00:03:15,800 --> 00:03:20,120
You'll notice that on both IAW an Android this is kind of hard to see but if you look down at the very

48
00:03:20,120 --> 00:03:24,200
bottom of the screen as I scroll through that list you'll notice that there's a little scroll bar down

49
00:03:24,200 --> 00:03:25,080
there.

50
00:03:25,080 --> 00:03:29,090
It's right there above my kind of software buttons when I scroll.

51
00:03:29,270 --> 00:03:29,500
Yeah.

52
00:03:29,510 --> 00:03:30,950
There's the scroll bar.

53
00:03:30,950 --> 00:03:33,980
Same thing on ISIS as well all the way down at the very bottom.

54
00:03:33,980 --> 00:03:36,090
I got that little list of elements.

55
00:03:36,230 --> 00:03:41,490
So in many cases we might want to hide that scroll bar and make sure that it's not visible to the user.

56
00:03:41,840 --> 00:03:48,170
So to disable that scroll bar we can add in horizontal or so it shows horizontal.

57
00:03:48,170 --> 00:03:54,350
There we go scroll indicator very long term right there make sure you've got the correct spelling and

58
00:03:54,350 --> 00:04:00,080
capitalization all the way through and we'll set that equal to False like so that's going to keep that

59
00:04:00,080 --> 00:04:03,700
scroll bar from appearing when we scroll through our list of items.

60
00:04:03,740 --> 00:04:09,530
So if I now save this and I scroll through no longer do I see that scroll bar appear at the very bottom.

61
00:04:09,530 --> 00:04:12,600
Same thing on Android as well now.

62
00:04:12,650 --> 00:04:17,080
In many cases like right now it might seem like well who cares about that horizontal scroll.

63
00:04:17,090 --> 00:04:21,290
You're going to notice that in a lot of different Web apps me mobile applications that you might use

64
00:04:21,350 --> 00:04:27,110
on a everyday basis whenever you scroll through a horizontal list of items having a scroll bar on there

65
00:04:27,110 --> 00:04:28,900
is actually really distracting.

66
00:04:28,970 --> 00:04:34,550
And so there are many cases where we might want to show a horizontal list and hide that scroll bar and

67
00:04:34,610 --> 00:04:36,420
essentially that's how we do it.

68
00:04:36,560 --> 00:04:40,250
As I mentioned we're going to work on the application the future where we're going to have to make a

69
00:04:40,250 --> 00:04:44,540
horizontal list and we're definitely going to want to disable a scroll indicator on that application

70
00:04:44,570 --> 00:04:45,920
we built.

71
00:04:45,920 --> 00:04:46,130
OK.

72
00:04:46,160 --> 00:04:50,630
So that's pretty much it right now for a flat list we now know how to show a list of elements to our

73
00:04:50,630 --> 00:04:51,550
user.

74
00:04:51,560 --> 00:04:55,520
Let's take a pause right here in the next video we're going to start to move on to our next little mini

75
00:04:55,520 --> 00:04:56,210
application.