Okay.
In this video, I will show you how we can actually display a list of things.
And to do that, I will do a little bit of cleanup here.
So what I will do is I will have a simple text here.
So let's say I have this name there.
I can remove actually this, we don't need it anymore.
So we have a home that will be actually one flag.
So it will take the full width of it.
And then we have a line item center, justify content center, that's fine.
And then we have a name here.
We can call it, let's say a text.
So we will have font size of, let's say something big 40 So if we save it now.
And then we need to also apply that change text.
I've changed it to text here so it's not displayed there.
So we have a big name displayed there.
So what will happen if I will have actually duplication of this multiple times?
So I duplicate it like this and then I save it.
And you can see here I have a list of the things and there are groups here, but I can't really see
any of this.
So if I will do one, two, three, four, five, for example.
You can see one and two.
It's off the screen.
I don't see it there.
And the reason for that is that this is actually the the view takes the whole page width and height,
but it's not scrollable.
Normally, uh, the functionality on the mobile we as we are used to, it's scrollable.
So if you would like to have a scrollable content that will occupy the whole page, what we can do is
actually we can use scroll view.
So scroll view like this, then I can wrap everything here inside the scroll view so I can indent this.
And also I need to make sure that I import scroll view.
We don't use this anymore, so we'll import scroll view.
And then I save it.
And you can see here a bar a little bit.
You you have it there and you already see one, two, three, four, five.
And whenever you click on this and go up and down, then you can scroll it.
Actually, I could remove the.
This two styles.
So it will be a little bit easier to see.
And you can see here I have one, two, three, four, five, and then I have so I have typical scroll
view.
You can see the the bar there.
So at this point I can actually see all of the content.
I could add some padding here and there and it will be a much easier to read all of it.
And so that will be the way, if you would like to have more content than on the screen, then you can
use something like that.
But there are other ways to do it.
The scroll view can have any content, so you can have multiple different elements inside.
You might have a mixture of images and then if you have some kind of list like here, for example,
we might have a list of movies or something like that, Then there is a different way we can use it.
So in our case, we can use something like a flat list, and flat list will be more structural than
scroll view, and I will show you how we can use the flat list.
I will remove this one and we do flat list.
So flat list I will also do it here and flat list can be self closed tag, but we'll need to add few
things there.
So what a flat is flat requires some kind of a content and that content will specify as a data so it
will be equal to array.
So we have curly brackets and then we have an array.
And inside that array we have we can have an object.
So we will have key and then we can have some values here, let's say value Christian and then I can
have this and let me duplicate it a few times there so I can do two, three, four, five and six here.
So I have the flat list here, not like I have it here.
So basically this is the any element we, uh, we would like to have and we can mix different elements
here in the scroll view in the flat list.
It's working a little bit different.
So what we need to do is we also need to provide a render item render item like this.
So curly brackets here.
And then what we need to do is we can have an arrow function here and that will take an item.
And then we can have it, uh, something here.
So let's say we could use the text as we used before, and then we can do, uh, actually, let's give
it a style of this.
So it will be style of equal styles.
Dot text.
And then we can have inside the text.
I will close it inside.
What we can have is we can actually print item dot key, which is this one.
So item, it's, it's the element we will have.
And the key is here.
So if I will save it.
Now.
And not in this display.
Actually, this this one needs to be in the curly braces.
So that will be an object.
What we can do is actually we can have it in line here.
So I can remove that curly brackets there and you will see we'll have like one liner here.
So what we have is.
I'll make it more and more readable like this.
So we have an arrow function here and then we have an object of width item and then we display for each
item, we'll display a text and we'll apply for each text.
We'll apply this styles we have here, and then we'll use the item, which is the iteration of this
loop and then key here to display.
So we'll save it now.
And you can see the list is there.
As you can see here, the this is very similar of what we have before.
I will just duplicate it here a few few times.
So the difference is not really that much.
So warning we have the children with the same key.
So that's why because I have the six here.
But the main point here is also scrollable.
So basically it's a it's almost the same example as we had it with the scroll view.
But as I said before, the scroll view can contain any elements inside.
So you can have a it will be something like a view that you can scroll.
So you can have image, you can have article, you can have paragraphs, you can have a lot of different
things.
This Flatlist it's more for having a list structure.
So if you would like to have things like displaying in the table, then it will be perfect use case
for the flat flat list because each of this item will need to be in the same format.
We need to contain the same thing so it doesn't have to be just a text, it can be image, it's something.
But like if you would like to have a list of the movies, you may have an image and then next to it
the title and each of the item will be the same.
If you would like to have like different mixtures of the content there.
So then you will need to use a scroll view.
Another option that you might have is the instead of the flat list will be a section list and I'm not
going to show you that, but you can go to the reference to check it.
But if you would like to have some headings and section inside the the flat list, the section will
section list will be your option.
And basically you just need to provide instead of data, you will provide the sections and then you
can have a similar style as you have here.
So you fit it here and then you have the render item in the similar way, the section list.
It's a little bit more complicated than the flat list if you need some extra grouping inside.
So that will be the two different ways of showing your data if you want to have it.
And it's very important to know that both of these options are scrollable, because what we would like
to have is the main view needs to be full screen and then whatever is inside, we can have it.
Scroll ball.