Okay, We have our application.
Our details page here up and running.
We display all the information we need we have for our movie.
So what we will do in this video will style a little bit.
So at the moment it's not really styled.
So what we can do is we can actually copy some things to split it up.
So I will have a main container style for, for the whole view.
Uh, container container.
I think I misspelled it, so I will correct it here.
So this will be start container, the order will be container.
So start container here and I will have a container there.
So for the container, what we want to have is background color.
It's white here.
I will change it for that.
A dark gray as I had it in my logo.
So it is two eight to see and 35 that's the color and I can have a I don't need to have that here.
What I can do is I will add a little bit of padding.
So I will add it at ten.
So it will push things from the edges.
As you can see here, it's next to the edge.
So it will push away from the edge, that padding then.
So if I have that, you can see it is already dark.
And then we display this.
Now we can actually return this to a white or you can do F if you like.
It doesn't really matter.
So we have that icons there.
So what we need to do is we have the container.
We we pushed it a little bit and then we need to kind of style the, the title and the description.
The title.
I will do a little hack.
Well, not hack, but I will move it away from this container container in this view.
And I will put the title here in the top bar and I will show you that in a second.
So first what we do is we will do also a I will add style for description.
So I will do description like this, and then I can create a new item here, description and what I
can do for a description, I can do a font size.
So font size it will be at 2020 and then I can do color and I can do white and then I can do also some
padding there.
So padding extra ten.
So let's take a look how it looks now.
And you can see here it's a white it's a little bit pushed out from this place and it will push from
the icons there.
So that's that's already done.
What we also need to do is.
We have that and then we can style the the rest of it here.
And so the text will do.
Let's put it styles like this.
So I will make it white.
So if I will do have it here, you can see this will be white.
And then we have that title.
And I said, I will move it to the top bar here.
So what we can actually do is we can control top bar with the navigation.
So how we can do that, normally you will use the static method for a class based component, but we
have a function based component.
So what we need to do is I will go to the details here and what I will need to do is details dot and
then navigation options.
So I will do navigation of options like this.
And then also I will need to provide a screen prop prop.
So I will do screen prop like this.
If you need to use them in the navigation options, then you need to provide it here and we will use
the navigation props in a second.
So I will show you how we do that.
So basically what is happening here is we can provide a title and this title can be, let's say, movie.
So if I will save it now and I will come back here, you can see the movie title is here.
And that's why we need some screen props here, because what is happening here is we pass the props
movie.
So I have an object here on that function, but I do have it also here in navigation options.
I will need to pass the screen props here.
So instead of the movie here, what I can do is I can do screen props and then navigation, and then
I can do getparam and then I can pass the get the param from here.
The problem with this approach is what we do here is we pass the whole movie object and I can't just
go movie title.
So the quick hack for this, what I found is when we pass the.
And if this is movie click.
So we navigate this, we pass the movie here.
What we can do is we can pass another argument so I can pass a title and that's going to be movie that
title.
So we'll extract the title here, pass it as a title.
So not actually will change here because we'll still have the movie passed as a parameter, but we'll
have another one title here that we can reference here.
So if I will save it now, Titanic, you can see Titanic is here and then Avatar.
Avatar is here.
So this is nice.
And now you can see which one you are already on and you don't need to print this one there.
So we'll just remove the title from here and it's nice and consistent.
So we have the rating, we have a movie title and then we have a description here.
Okay, so all is working fine, but we this navigation options will give us much more options than our
title.
So what we can do here is we can actually style it a little bit so I can pass more parameters here,
so I can do header style.
And then let's say I can use a background color and we can do something wild like an orange.
And if you go here, you can see you have an orange here.
So in that way you can style it, uh, the way, the way you like.
And I will show you a few other styles that we can use so you can play with that and find your own styles.
So I will do a header tint tint color
and we can say this is going to be a white so I can do f for white.
And you can see here everything is white, so you can control the color of the of the top bar with header
tint color.
And then we have uh, also we can do header title style.
And we can do font weight, for example.
Bold and then font size, let's say 24.
I'm just playing around with with this.
But you can find you can see this is nice, big and bold.
And so you can play it, play with this one.
So this is how we style the components.
Now it's not great as well, but it looks much better than it was before.
So we can control all the styles, which either are styles component like this, we where we pick the
styles or we can also control the the top bar here using this navigation options.
So if you have a class based component, then navigation options will be something like a static and
then navigation options, and then you can provide your options here.
But this static is only available for a class, so we can't really use it in functional components.
So the way to to do it will be with this, uh, syntax here.
Okay, so that's enough for our styling.
In the next video, I will show you how we can actually have a button here in the top navigation and
how we can use it for another component.