WEBVTT 00:01.250 --> 00:01.790 Okay. 00:01.790 --> 00:07.040 In this video, I will show you how we can actually display a list of things. 00:07.040 --> 00:10.580 And to do that, I will do a little bit of cleanup here. 00:10.580 --> 00:15.140 So what I will do is I will have a simple text here. 00:15.140 --> 00:18.080 So let's say I have this name there. 00:18.230 --> 00:23.690 I can remove actually this, we don't need it anymore. 00:23.690 --> 00:26.420 So we have a home that will be actually one flag. 00:26.420 --> 00:28.910 So it will take the full width of it. 00:28.910 --> 00:32.810 And then we have a line item center, justify content center, that's fine. 00:32.810 --> 00:34.850 And then we have a name here. 00:34.850 --> 00:37.580 We can call it, let's say a text. 00:37.580 --> 00:46.520 So we will have font size of, let's say something big 40 So if we save it now. 00:50.590 --> 00:54.640 And then we need to also apply that change text. 00:54.640 --> 00:57.760 I've changed it to text here so it's not displayed there. 00:58.780 --> 01:01.300 So we have a big name displayed there. 01:01.300 --> 01:07.000 So what will happen if I will have actually duplication of this multiple times? 01:07.000 --> 01:10.330 So I duplicate it like this and then I save it. 01:13.790 --> 01:22.190 And you can see here I have a list of the things and there are groups here, but I can't really see 01:22.190 --> 01:23.000 any of this. 01:23.000 --> 01:28.910 So if I will do one, two, three, four, five, for example. 01:32.870 --> 01:34.580 You can see one and two. 01:34.610 --> 01:35.690 It's off the screen. 01:35.690 --> 01:36.980 I don't see it there. 01:36.980 --> 01:46.760 And the reason for that is that this is actually the the view takes the whole page width and height, 01:46.760 --> 01:48.200 but it's not scrollable. 01:48.200 --> 01:53.810 Normally, uh, the functionality on the mobile we as we are used to, it's scrollable. 01:53.810 --> 02:00.020 So if you would like to have a scrollable content that will occupy the whole page, what we can do is 02:00.020 --> 02:02.420 actually we can use scroll view. 02:03.530 --> 02:14.360 So scroll view like this, then I can wrap everything here inside the scroll view so I can indent this. 02:15.980 --> 02:19.430 And also I need to make sure that I import scroll view. 02:19.460 --> 02:23.180 We don't use this anymore, so we'll import scroll view. 02:23.990 --> 02:25.520 And then I save it. 02:26.390 --> 02:29.000 And you can see here a bar a little bit. 02:29.330 --> 02:33.410 You you have it there and you already see one, two, three, four, five. 02:33.410 --> 02:39.440 And whenever you click on this and go up and down, then you can scroll it. 02:39.470 --> 02:41.480 Actually, I could remove the. 02:44.560 --> 02:46.900 This two styles. 02:46.900 --> 02:49.840 So it will be a little bit easier to see. 02:51.400 --> 02:58.150 And you can see here I have one, two, three, four, five, and then I have so I have typical scroll 02:58.150 --> 02:58.330 view. 02:58.360 --> 03:00.730 You can see the the bar there. 03:00.730 --> 03:04.060 So at this point I can actually see all of the content. 03:04.060 --> 03:09.400 I could add some padding here and there and it will be a much easier to read all of it. 03:09.400 --> 03:15.700 And so that will be the way, if you would like to have more content than on the screen, then you can 03:15.970 --> 03:17.440 use something like that. 03:17.440 --> 03:19.930 But there are other ways to do it. 03:19.930 --> 03:25.720 The scroll view can have any content, so you can have multiple different elements inside. 03:25.720 --> 03:32.890 You might have a mixture of images and then if you have some kind of list like here, for example, 03:32.890 --> 03:39.460 we might have a list of movies or something like that, Then there is a different way we can use it. 03:39.460 --> 03:48.260 So in our case, we can use something like a flat list, and flat list will be more structural than 03:48.260 --> 03:51.470 scroll view, and I will show you how we can use the flat list. 03:51.470 --> 03:55.100 I will remove this one and we do flat list. 03:55.250 --> 04:06.680 So flat list I will also do it here and flat list can be self closed tag, but we'll need to add few 04:06.680 --> 04:07.460 things there. 04:08.420 --> 04:17.630 So what a flat is flat requires some kind of a content and that content will specify as a data so it 04:17.630 --> 04:20.480 will be equal to array. 04:20.810 --> 04:24.560 So we have curly brackets and then we have an array. 04:24.560 --> 04:27.980 And inside that array we have we can have an object. 04:27.980 --> 04:36.980 So we will have key and then we can have some values here, let's say value Christian and then I can 04:36.980 --> 04:47.300 have this and let me duplicate it a few times there so I can do two, three, four, five and six here. 04:47.300 --> 04:51.500 So I have the flat list here, not like I have it here. 04:51.500 --> 04:56.930 So basically this is the any element we, uh, we would like to have and we can mix different elements 04:56.930 --> 05:00.650 here in the scroll view in the flat list. 05:00.650 --> 05:02.810 It's working a little bit different. 05:02.810 --> 05:10.400 So what we need to do is we also need to provide a render item render item like this. 05:11.550 --> 05:13.320 So curly brackets here. 05:14.150 --> 05:22.070 And then what we need to do is we can have an arrow function here and that will take an item. 05:25.840 --> 05:28.420 And then we can have it, uh, something here. 05:28.420 --> 05:39.280 So let's say we could use the text as we used before, and then we can do, uh, actually, let's give 05:39.280 --> 05:41.470 it a style of this. 05:41.470 --> 05:46.720 So it will be style of equal styles. 05:46.750 --> 05:47.890 Dot text. 05:49.870 --> 05:54.460 And then we can have inside the text. 05:54.460 --> 05:56.050 I will close it inside. 05:56.050 --> 06:04.840 What we can have is we can actually print item dot key, which is this one. 06:04.840 --> 06:08.920 So item, it's, it's the element we will have. 06:08.920 --> 06:10.450 And the key is here. 06:10.450 --> 06:11.890 So if I will save it. 06:13.380 --> 06:14.070 Now. 06:17.580 --> 06:19.150 And not in this display. 06:19.170 --> 06:23.280 Actually, this this one needs to be in the curly braces. 06:23.280 --> 06:25.080 So that will be an object. 06:28.660 --> 06:32.100 What we can do is actually we can have it in line here. 06:32.110 --> 06:39.700 So I can remove that curly brackets there and you will see we'll have like one liner here. 06:40.360 --> 06:42.280 So what we have is. 06:44.130 --> 06:46.140 I'll make it more and more readable like this. 06:46.140 --> 06:54.450 So we have an arrow function here and then we have an object of width item and then we display for each 06:54.450 --> 06:58.560 item, we'll display a text and we'll apply for each text. 06:58.590 --> 07:05.760 We'll apply this styles we have here, and then we'll use the item, which is the iteration of this 07:06.030 --> 07:09.090 loop and then key here to display. 07:09.090 --> 07:10.470 So we'll save it now. 07:12.650 --> 07:14.990 And you can see the list is there. 07:16.970 --> 07:22.760 As you can see here, the this is very similar of what we have before. 07:22.790 --> 07:26.330 I will just duplicate it here a few few times. 07:26.330 --> 07:29.420 So the difference is not really that much. 07:29.420 --> 07:32.570 So warning we have the children with the same key. 07:32.570 --> 07:35.240 So that's why because I have the six here. 07:35.240 --> 07:38.510 But the main point here is also scrollable. 07:38.510 --> 07:43.700 So basically it's a it's almost the same example as we had it with the scroll view. 07:43.700 --> 07:49.250 But as I said before, the scroll view can contain any elements inside. 07:49.250 --> 07:53.780 So you can have a it will be something like a view that you can scroll. 07:53.780 --> 07:58.700 So you can have image, you can have article, you can have paragraphs, you can have a lot of different 07:58.700 --> 07:59.270 things. 07:59.270 --> 08:06.020 This Flatlist it's more for having a list structure. 08:06.260 --> 08:14.400 So if you would like to have things like displaying in the table, then it will be perfect use case 08:14.400 --> 08:21.660 for the flat flat list because each of this item will need to be in the same format. 08:21.690 --> 08:27.810 We need to contain the same thing so it doesn't have to be just a text, it can be image, it's something. 08:27.810 --> 08:33.480 But like if you would like to have a list of the movies, you may have an image and then next to it 08:33.510 --> 08:37.020 the title and each of the item will be the same. 08:37.020 --> 08:40.740 If you would like to have like different mixtures of the content there. 08:40.740 --> 08:44.490 So then you will need to use a scroll view. 08:45.060 --> 08:53.040 Another option that you might have is the instead of the flat list will be a section list and I'm not 08:53.040 --> 08:56.190 going to show you that, but you can go to the reference to check it. 08:56.190 --> 09:02.490 But if you would like to have some headings and section inside the the flat list, the section will 09:02.490 --> 09:05.280 section list will be your option. 09:05.280 --> 09:10.680 And basically you just need to provide instead of data, you will provide the sections and then you 09:10.680 --> 09:13.620 can have a similar style as you have here. 09:13.620 --> 09:19.860 So you fit it here and then you have the render item in the similar way, the section list. 09:19.860 --> 09:25.980 It's a little bit more complicated than the flat list if you need some extra grouping inside. 09:25.980 --> 09:32.940 So that will be the two different ways of showing your data if you want to have it. 09:32.940 --> 09:39.180 And it's very important to know that both of these options are scrollable, because what we would like 09:39.180 --> 09:45.360 to have is the main view needs to be full screen and then whatever is inside, we can have it. 09:45.360 --> 09:46.290 Scroll ball.