WEBVTT 00:01.890 --> 00:08.580 Okay, We have our list of movies, and whenever we click on the movie, we can see the details in our 00:08.580 --> 00:09.770 new component. 00:09.780 --> 00:13.170 So at the moment we have details about the movie here. 00:13.170 --> 00:17.760 So in here, what we can do is actually we can display more information. 00:17.760 --> 00:28.530 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. 00:29.910 --> 00:32.190 This is what's coming from our API. 00:32.760 --> 00:40.890 So I will come back here and then clicking here so I can see movie the title and description here. 00:40.890 --> 00:47.550 So actually I don't this needs to be curly braces that I missed, so. 00:49.910 --> 00:51.560 And then we have romantic movie. 00:51.560 --> 00:54.830 And then if I click on another one, we have another movie here. 00:54.830 --> 00:57.290 So basically this is done. 00:57.290 --> 00:59.410 This is what we have so far. 00:59.420 --> 01:02.600 But in the web version, we had also our rating. 01:02.600 --> 01:07.910 So what we can do here is we can include the rating for this movie. 01:07.910 --> 01:10.700 So how we can achieve that. 01:10.880 --> 01:17.000 In the web version, we have used font awesome for our stars icons and we can do the font awesome here 01:17.000 --> 01:17.600 as well. 01:17.600 --> 01:19.160 So how can we do that? 01:19.430 --> 01:20.690 I will use a. 01:21.420 --> 01:27.570 Plugin react native font awesome here and will use this to display the font awesome icons. 01:27.570 --> 01:33.420 What do we need to do is if you go to the installation you will see a set of installation rules that 01:33.420 --> 01:35.370 you will need to follow to install. 01:35.370 --> 01:39.210 So first thing first we need to have React Native SVG. 01:39.510 --> 01:43.020 So I will come back here and then I will close this. 01:43.020 --> 01:45.900 So Ctrl C will make a little bit more space 01:49.410 --> 01:55.020 and then I will do yarn add and then react Native SVG. 01:55.260 --> 02:00.030 What also we will need to do is we'll need to have this. 02:04.020 --> 02:04.680 And space. 02:04.680 --> 02:09.820 We can install more than one at a time or we can do it separately. 02:09.840 --> 02:11.070 It's up to you. 02:11.310 --> 02:14.550 But all of this needs to be installed. 02:14.580 --> 02:17.460 As you can see here, this is NPM install save. 02:18.120 --> 02:22.980 If you use NPM, I'm using yarn, so I will do it like this. 02:22.980 --> 02:25.680 So yarn add and that four packages. 02:27.840 --> 02:28.710 Okay, this is done. 02:28.710 --> 02:34.290 I will do expo start again and I will have my. 02:36.570 --> 02:37.500 Expo started. 02:37.500 --> 02:39.180 So we have this one. 02:41.480 --> 02:49.580 Oh, let me double check if we actually have auto start now. 02:53.130 --> 02:55.140 Or do I need to restart the application now? 02:55.140 --> 02:59.790 It's already working, so I will do a development here. 02:59.790 --> 03:04.530 So what do we need to do is we need to install a import few things here. 03:04.530 --> 03:10.080 So I will do import and then I will import font awesome icon. 03:10.080 --> 03:11.340 So font 03:14.160 --> 03:19.680 icon like this and I will import that from Ford. 03:19.830 --> 03:20.670 Awesome. 03:20.670 --> 03:23.730 And then this one react native font. 03:23.760 --> 03:24.420 Awesome. 03:25.320 --> 03:26.730 So this is simple. 03:26.730 --> 03:28.980 Import it and this is attack I can use. 03:28.980 --> 03:40.740 So I could use attack here font awesome icon and then I can do an icon here and inside I can do I can 03:40.740 --> 03:44.070 specify what kind of icon I would like to use. 03:44.070 --> 03:52.720 Actually I can self-close it here and then inside the icon I will need to do a and then name of the 03:53.140 --> 03:53.620 icon. 03:53.620 --> 03:56.680 But this I will need to import it first. 03:56.680 --> 03:59.980 So I will import that. 03:59.980 --> 04:04.030 So import far. 04:04.060 --> 04:12.160 We will need to have a star so far star from and then we can do fort awesome. 04:13.270 --> 04:14.410 Free solid. 04:14.620 --> 04:16.040 So it will be fort. 04:16.060 --> 04:16.600 Awesome. 04:19.280 --> 04:21.620 Three solid SVG icons. 04:22.010 --> 04:26.180 So I'm importing only this icon here and this icon. 04:26.180 --> 04:28.390 I can inject it there. 04:28.400 --> 04:30.170 So if I will do it now. 04:38.760 --> 04:42.540 And clicking here, you can see there is an icon there. 04:42.540 --> 04:44.750 So we have our starter. 04:44.760 --> 04:51.090 So what we also need to do is we need to have five of them so I can duplicate it. 04:54.120 --> 04:56.030 And then you can see five of them. 04:56.040 --> 05:00.950 So another thing I could do is I can wrap it in view. 05:00.960 --> 05:04.020 So I will do view style. 05:07.160 --> 05:07.910 Styles. 05:08.870 --> 05:14.630 And then I can do a star container. 05:17.820 --> 05:25.140 And then I will wrap all my phone, all my icons here. 05:25.140 --> 05:27.960 And I will also need to have the start container here. 05:27.960 --> 05:30.510 So I have a few styles here. 05:30.510 --> 05:31.650 I will add a new one. 05:31.680 --> 05:32.400 A new one. 05:34.860 --> 05:36.970 Yeah, this needs to be like this. 05:37.630 --> 05:53.590 And then what we need to do is I will do align items center and I can do also justify content center. 05:55.860 --> 05:58.620 And then flex direction. 05:59.760 --> 06:04.290 I can do row like that. 06:05.250 --> 06:15.060 So if I go here, you can see this are five stars here and they are prepared to to be ready here. 06:15.060 --> 06:23.280 So what we can have at the moment is what we need to do is we need to create a style for them based 06:23.280 --> 06:25.560 on some conditions. 06:25.580 --> 06:34.200 As you remember, what we had in our version is we had the average rating from coming from API. 06:34.230 --> 06:36.870 And based on that, we can color coded our stars. 06:36.870 --> 06:40.680 This is the same way as we've done it with the web version. 06:40.680 --> 06:42.900 So what I will do is I will do style 06:45.570 --> 06:48.720 like that and then here we can have a condition. 06:48.720 --> 06:56.130 So movie dot and then avg like average and then rating. 06:56.250 --> 06:58.140 That's what coming from the API. 06:58.140 --> 07:02.820 And then if that's bigger than zero, then I can do something. 07:02.820 --> 07:09.900 So I can add styles, styles orange and I will do that in a second. 07:09.930 --> 07:19.260 Otherwise I will do styles and let's say I will do white for now. 07:19.260 --> 07:21.930 I have the white background here. 07:21.930 --> 07:24.690 It will just disappear for for a moment. 07:24.690 --> 07:30.840 But we need to also make the background darker so it will be much nicer this way. 07:30.840 --> 07:32.820 So we have this one here. 07:32.820 --> 07:36.840 What do you mean to do is I need to create orange and white style. 07:36.840 --> 07:38.730 So first orange 07:41.220 --> 07:49.980 and then I can do color orange and I can actually type in orange. 07:49.980 --> 07:52.590 That's one of the acceptable strings. 07:52.590 --> 07:54.420 And then I can do another one. 07:54.420 --> 08:02.310 White, which is just a color of white for now. 08:02.310 --> 08:06.120 So what I have is I already color coded the first one. 08:06.120 --> 08:10.380 So you can see this is orange because it is already bigger than zero. 08:10.380 --> 08:18.540 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 08:18.540 --> 08:20.940 I will duplicate it that for every single one. 08:20.940 --> 08:25.620 But then I will increase this one for one, two, three and four. 08:26.160 --> 08:32.010 So coming back here, Titanic, you can see three and two of them disappeared. 08:32.010 --> 08:35.670 So for a moment, if I will do a black. 08:39.920 --> 08:45.530 And then Titanic, you can see three out of five and then five out of five. 08:45.560 --> 08:48.890 So this is working fine and we have that display there. 08:49.100 --> 08:56.420 So what we need to also do is we can actually include the how many number of ratings were there. 08:56.420 --> 08:59.870 So I will do a text here. 08:59.870 --> 09:05.180 And in the similar way as we had it there in the Web version in the parentheses will display. 09:05.180 --> 09:12.290 And so this this will be a normal text the parentheses and inside I will inject my movie and then I 09:12.290 --> 09:16.880 will do number of rating like this. 09:17.450 --> 09:19.850 So saving again. 09:20.570 --> 09:26.450 And then you can see here that's actually and not in inside the parentheses here. 09:26.450 --> 09:29.270 I think it's number of ratings like this. 09:30.470 --> 09:36.380 And then we see, okay, two ratings here and then I have one rating here. 09:36.380 --> 09:37.850 So this is working fine. 09:37.970 --> 09:40.230 And we have our rating system in place. 09:40.230 --> 09:43.140 We know how to use the font awesome here. 09:43.140 --> 09:50.460 So we are kind of moving forward into the place where we when we display all the information about our 09:50.460 --> 09:51.180 movies. 09:51.180 --> 09:56.700 So in the next video, we'll do a little bit of styling and we'll add more features into our application.