Okay, we have our list of movies displayed there, but it's not really that amazing here.
It's just a of the screen and it's hard to read.
And also we have that message here.
So what we need to do, basically I will clean up a little bit here and we'll add some styles, so to
make it a little bit better.
So we have a message here, virtualized list.
I haven't mentioned that before, but basically what we what is happening here is a missing keys for
items.
So make sure to specify a key property on each item to provide a custom assumption.
So what is happening here is that whenever we do a list in React, we need to provide a key and key
needs to be unique.
Normally from coming from our database like movies, we will have an ID so we can say key ID and that
will be unique so we can say it.
But in the React Native, this key is not really working like like it is working in the web.
So what we need to do is we need to provide another property for a flat list.
It is key extractor and then we will have two things.
So first thing will be item and another one will be index.
And that's going to be our function here.
And we can specify what would we, we would like to use as a key for our list.
So I could use index.
I know index will be integer is growing, so it will be unique.
So I can do index here and then I can do to string.
It doesn't really matter that much.
It needs to be unique.
You can also use the item ID or whatever you like so you can go here, save it.
And you can see the message is gone.
So there is no errors anymore or warnings.
And we still have that list.
So what I could do is basically I could remove that key and it's still all the same.
So it's clean.
Then it's a little bit different way how you provide a keys in React Native.
So this is done.
What I would like to do is to style it a little bit because it's small, it's off the screen so it's
hard to read.
So what we will do in this video, we'll actually add some styling to it and some more structure.
So instead of rendering just a text, what I can do is I can render a view.
So inside that view, I will also need to import it.
So I have a view already there, so that's good.
And then inside I can have my text there.
So that will give me an opportunity to work with our styles so I can do styles here and then I will
do style and then I can do item and I will have another style here and I will prepare the styles in
a second.
So style I will do item text.
So, so we have the container here that we don't really use.
So I will have item.
And then another one will be item text like this.
So you can see here I have a placeholder I assign them into here.
So what I can do is I can, uh, write some styles there so I can say flex.
It's going to be one.
Actually, I will go, I will go here.
So flex one, then I can do padding and I will push it a little bit.
Ten.
I can do height, so.
I will make it 50 each.
Uh, we.
I miss a column here.
And then we have also, we can do background color like this, and then I can do hash and I will have
that dark gray color here and can text.
I can do color.
So that will be my background color for an item.
And this one will be color of a font.
So I will do white, so f, f, f, and then I can also do font size and I will go for 24.
So I have a basic styling here and we have some problems here.
I think styles and that's supposed to be styles.
Because this is the name of a variable here, and I have that here.
So you can see Titanic is much bigger.
And then we have Avatar here and we can actually remove the container.
I don't know if we we have on on The view here.
We have the size container.
So I can remove it for now.
And you can see it's not going to be squeezed.
So we have this one semi-transparent, a kind of so we have that nice and big.
So it will be clickable then it's white and we have that background there.
So at the moment we have that list.
So what else can we do?
So we have a flat list here.
What I would like to do is I would like to have some kind of logo there.
And a similar way as we had it on our web view.
But this time I'm not going to style it from scratch with the fonts.
You can still do it in the same way as we've done it with the web.
But what I will do is I simply kind of hack it and I have a logo here, which is, as you can see,
the same logo as we had it there.
But what I did is I went in web application and I just screenshot it.
So I will have the same logo here, but this one it will be PNG.
So what I can do is that I can actually display a PNG here.
So image and then we'll go source.
And then inside will do require.
And then we can have a part here.
So we need to go up one folder and then I will go to assets and inside I will go for Amor underscore
like movie rater and then logo PNG.
So I have that.
Then I can actually I can close it here and then I can add extra style.
And here we can have another object with some styles.
I can do with.
That's gonna be 100%.
I will do height and that's going to be 135.
And I can do padding.
Top of 30, so we'll push it from the top bar.
What I can also do here is specify resize mode and resize mode will do contain
like this.
So if I will save it now.
So kind of find image.
What I need to do is I will need to import image here from React Native.
And you can see here I have my logo displayed there and then I have a little bit here, a back and then
I have a list.
It's not perfect.
We'll work on this later on, but at the moment it is readable, so we have something to work with.
So we have our list of the movies and that's actually coming dynamically from our database.
So our application is starting to get a shape.