Okay, We have our list of movies, and whenever we click on the movie, we can see the details in our
new component.
So at the moment we have details about the movie here.
So in here, what we can do is actually we can display more information.
So what I could do is I can also so let's have it this at our title and then I can have also a description.
This is what's coming from our API.
So I will come back here and then clicking here so I can see movie the title and description here.
So actually I don't this needs to be curly braces that I missed, so.
And then we have romantic movie.
And then if I click on another one, we have another movie here.
So basically this is done.
This is what we have so far.
But in the web version, we had also our rating.
So what we can do here is we can include the rating for this movie.
So how we can achieve that.
In the web version, we have used font awesome for our stars icons and we can do the font awesome here
as well.
So how can we do that?
I will use a.
Plugin react native font awesome here and will use this to display the font awesome icons.
What do we need to do is if you go to the installation you will see a set of installation rules that
you will need to follow to install.
So first thing first we need to have React Native SVG.
So I will come back here and then I will close this.
So Ctrl C will make a little bit more space
and then I will do yarn add and then react Native SVG.
What also we will need to do is we'll need to have this.
And space.
We can install more than one at a time or we can do it separately.
It's up to you.
But all of this needs to be installed.
As you can see here, this is NPM install save.
If you use NPM, I'm using yarn, so I will do it like this.
So yarn add and that four packages.
Okay, this is done.
I will do expo start again and I will have my.
Expo started.
So we have this one.
Oh, let me double check if we actually have auto start now.
Or do I need to restart the application now?
It's already working, so I will do a development here.
So what do we need to do is we need to install a import few things here.
So I will do import and then I will import font awesome icon.
So font
icon like this and I will import that from Ford.
Awesome.
And then this one react native font.
Awesome.
So this is simple.
Import it and this is attack I can use.
So I could use attack here font awesome icon and then I can do an icon here and inside I can do I can
specify what kind of icon I would like to use.
Actually I can self-close it here and then inside the icon I will need to do a and then name of the
icon.
But this I will need to import it first.
So I will import that.
So import far.
We will need to have a star so far star from and then we can do fort awesome.
Free solid.
So it will be fort.
Awesome.
Three solid SVG icons.
So I'm importing only this icon here and this icon.
I can inject it there.
So if I will do it now.
And clicking here, you can see there is an icon there.
So we have our starter.
So what we also need to do is we need to have five of them so I can duplicate it.
And then you can see five of them.
So another thing I could do is I can wrap it in view.
So I will do view style.
Styles.
And then I can do a star container.
And then I will wrap all my phone, all my icons here.
And I will also need to have the start container here.
So I have a few styles here.
I will add a new one.
A new one.
Yeah, this needs to be like this.
And then what we need to do is I will do align items center and I can do also justify content center.
And then flex direction.
I can do row like that.
So if I go here, you can see this are five stars here and they are prepared to to be ready here.
So what we can have at the moment is what we need to do is we need to create a style for them based
on some conditions.
As you remember, what we had in our version is we had the average rating from coming from API.
And based on that, we can color coded our stars.
This is the same way as we've done it with the web version.
So what I will do is I will do style
like that and then here we can have a condition.
So movie dot and then avg like average and then rating.
That's what coming from the API.
And then if that's bigger than zero, then I can do something.
So I can add styles, styles orange and I will do that in a second.
Otherwise I will do styles and let's say I will do white for now.
I have the white background here.
It will just disappear for for a moment.
But we need to also make the background darker so it will be much nicer this way.
So we have this one here.
What do you mean to do is I need to create orange and white style.
So first orange
and then I can do color orange and I can actually type in orange.
That's one of the acceptable strings.
And then I can do another one.
White, which is just a color of white for now.
So what I have is I already color coded the first one.
So you can see this is orange because it is already bigger than zero.
So what I need to do is I will need I will make a little bit more space for this to be easier seen and
I will duplicate it that for every single one.
But then I will increase this one for one, two, three and four.
So coming back here, Titanic, you can see three and two of them disappeared.
So for a moment, if I will do a black.
And then Titanic, you can see three out of five and then five out of five.
So this is working fine and we have that display there.
So what we need to also do is we can actually include the how many number of ratings were there.
So I will do a text here.
And in the similar way as we had it there in the Web version in the parentheses will display.
And so this this will be a normal text the parentheses and inside I will inject my movie and then I
will do number of rating like this.
So saving again.
And then you can see here that's actually and not in inside the parentheses here.
I think it's number of ratings like this.
And then we see, okay, two ratings here and then I have one rating here.
So this is working fine.
And we have our rating system in place.
We know how to use the font awesome here.
So we are kind of moving forward into the place where we when we display all the information about our
movies.
So in the next video, we'll do a little bit of styling and we'll add more features into our application.