WEBVTT 00:02.110 --> 00:05.170 Okay, We have our application. 00:05.290 --> 00:08.230 Our details page here up and running. 00:08.230 --> 00:11.890 We display all the information we need we have for our movie. 00:11.890 --> 00:15.460 So what we will do in this video will style a little bit. 00:15.460 --> 00:18.550 So at the moment it's not really styled. 00:18.850 --> 00:23.860 So what we can do is we can actually copy some things to split it up. 00:23.860 --> 00:28.930 So I will have a main container style for, for the whole view. 00:30.100 --> 00:32.920 Uh, container container. 00:32.920 --> 00:35.710 I think I misspelled it, so I will correct it here. 00:35.710 --> 00:39.400 So this will be start container, the order will be container. 00:39.400 --> 00:43.120 So start container here and I will have a container there. 00:43.330 --> 00:47.890 So for the container, what we want to have is background color. 00:47.890 --> 00:49.030 It's white here. 00:49.030 --> 00:50.710 I will change it for that. 00:50.710 --> 00:54.010 A dark gray as I had it in my logo. 00:54.010 --> 01:04.550 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. 01:04.550 --> 01:07.400 What I can do is I will add a little bit of padding. 01:07.400 --> 01:08.930 So I will add it at ten. 01:08.930 --> 01:11.800 So it will push things from the edges. 01:11.820 --> 01:13.940 As you can see here, it's next to the edge. 01:13.940 --> 01:17.450 So it will push away from the edge, that padding then. 01:17.690 --> 01:22.820 So if I have that, you can see it is already dark. 01:22.820 --> 01:24.530 And then we display this. 01:24.530 --> 01:30.620 Now we can actually return this to a white or you can do F if you like. 01:30.650 --> 01:31.700 It doesn't really matter. 01:31.700 --> 01:34.100 So we have that icons there. 01:34.100 --> 01:37.310 So what we need to do is we have the container. 01:37.310 --> 01:43.910 We we pushed it a little bit and then we need to kind of style the, the title and the description. 01:43.910 --> 01:44.840 The title. 01:44.840 --> 01:46.610 I will do a little hack. 01:46.700 --> 01:52.010 Well, not hack, but I will move it away from this container container in this view. 01:52.010 --> 01:56.300 And I will put the title here in the top bar and I will show you that in a second. 01:56.300 --> 02:03.830 So first what we do is we will do also a I will add style for description. 02:03.830 --> 02:15.110 So I will do description like this, and then I can create a new item here, description and what I 02:15.110 --> 02:19.250 can do for a description, I can do a font size. 02:20.000 --> 02:34.190 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 02:34.190 --> 02:35.150 padding there. 02:35.150 --> 02:37.610 So padding extra ten. 02:38.810 --> 02:40.880 So let's take a look how it looks now. 02:40.880 --> 02:46.820 And you can see here it's a white it's a little bit pushed out from this place and it will push from 02:46.820 --> 02:48.440 the icons there. 02:48.440 --> 02:51.590 So that's that's already done. 02:51.950 --> 02:54.740 What we also need to do is. 02:56.860 --> 03:01.990 We have that and then we can style the the rest of it here. 03:01.990 --> 03:04.840 And so the text will do. 03:06.400 --> 03:10.000 Let's put it styles like this. 03:13.870 --> 03:19.660 So I will make it white. 03:23.250 --> 03:28.830 So if I will do have it here, you can see this will be white. 03:29.010 --> 03:30.780 And then we have that title. 03:30.780 --> 03:33.540 And I said, I will move it to the top bar here. 03:33.540 --> 03:38.340 So what we can actually do is we can control top bar with the navigation. 03:38.340 --> 03:45.750 So how we can do that, normally you will use the static method for a class based component, but we 03:45.750 --> 03:47.160 have a function based component. 03:47.160 --> 03:55.170 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 03:55.170 --> 03:57.150 then navigation options. 03:57.150 --> 04:03.480 So I will do navigation of options like this. 04:03.480 --> 04:07.380 And then also I will need to provide a screen prop prop. 04:07.380 --> 04:11.880 So I will do screen prop like this. 04:11.910 --> 04:18.600 If you need to use them in the navigation options, then you need to provide it here and we will use 04:18.600 --> 04:20.100 the navigation props in a second. 04:20.100 --> 04:23.620 So I will show you how we do that. 04:23.620 --> 04:31.060 So basically what is happening here is we can provide a title and this title can be, let's say, movie. 04:31.060 --> 04:35.920 So if I will save it now and I will come back here, you can see the movie title is here. 04:35.920 --> 04:44.620 And that's why we need some screen props here, because what is happening here is we pass the props 04:44.620 --> 04:45.340 movie. 04:45.340 --> 04:51.430 So I have an object here on that function, but I do have it also here in navigation options. 04:51.430 --> 04:54.070 I will need to pass the screen props here. 04:54.070 --> 05:01.390 So instead of the movie here, what I can do is I can do screen props and then navigation, and then 05:01.390 --> 05:08.320 I can do getparam and then I can pass the get the param from here. 05:08.350 --> 05:15.130 The problem with this approach is what we do here is we pass the whole movie object and I can't just 05:15.370 --> 05:16.600 go movie title. 05:16.600 --> 05:22.690 So the quick hack for this, what I found is when we pass the. 05:24.130 --> 05:26.350 And if this is movie click. 05:26.350 --> 05:29.470 So we navigate this, we pass the movie here. 05:29.470 --> 05:36.040 What we can do is we can pass another argument so I can pass a title and that's going to be movie that 05:36.040 --> 05:36.490 title. 05:36.490 --> 05:39.670 So we'll extract the title here, pass it as a title. 05:39.670 --> 05:45.970 So not actually will change here because we'll still have the movie passed as a parameter, but we'll 05:45.970 --> 05:50.170 have another one title here that we can reference here. 05:50.380 --> 05:55.540 So if I will save it now, Titanic, you can see Titanic is here and then Avatar. 05:55.570 --> 05:56.560 Avatar is here. 05:56.560 --> 05:58.300 So this is nice. 05:58.780 --> 06:03.880 And now you can see which one you are already on and you don't need to print this one there. 06:03.880 --> 06:09.340 So we'll just remove the title from here and it's nice and consistent. 06:09.340 --> 06:13.570 So we have the rating, we have a movie title and then we have a description here. 06:13.600 --> 06:21.700 Okay, so all is working fine, but we this navigation options will give us much more options than our 06:21.700 --> 06:22.060 title. 06:22.060 --> 06:29.270 So what we can do here is we can actually style it a little bit so I can pass more parameters here, 06:29.270 --> 06:30.920 so I can do header style. 06:35.450 --> 06:42.620 And then let's say I can use a background color and we can do something wild like an orange. 06:46.710 --> 06:50.250 And if you go here, you can see you have an orange here. 06:50.250 --> 06:54.480 So in that way you can style it, uh, the way, the way you like. 06:54.510 --> 07:01.020 And I will show you a few other styles that we can use so you can play with that and find your own styles. 07:01.020 --> 07:04.800 So I will do a header tint tint color 07:07.290 --> 07:14.130 and we can say this is going to be a white so I can do f for white. 07:15.990 --> 07:23.250 And you can see here everything is white, so you can control the color of the of the top bar with header 07:23.250 --> 07:24.210 tint color. 07:24.210 --> 07:28.830 And then we have uh, also we can do header title style. 07:34.600 --> 07:37.150 And we can do font weight, for example. 07:46.290 --> 07:52.440 Bold and then font size, let's say 24. 07:53.760 --> 07:55.650 I'm just playing around with with this. 07:55.650 --> 07:59.160 But you can find you can see this is nice, big and bold. 07:59.160 --> 08:02.070 And so you can play it, play with this one. 08:02.310 --> 08:05.370 So this is how we style the components. 08:05.400 --> 08:10.620 Now it's not great as well, but it looks much better than it was before. 08:10.620 --> 08:19.110 So we can control all the styles, which either are styles component like this, we where we pick the 08:19.260 --> 08:27.480 styles or we can also control the the top bar here using this navigation options. 08:27.480 --> 08:35.550 So if you have a class based component, then navigation options will be something like a static and 08:35.550 --> 08:38.820 then navigation options, and then you can provide your options here. 08:38.820 --> 08:45.400 But this static is only available for a class, so we can't really use it in functional components. 08:45.400 --> 08:50.590 So the way to to do it will be with this, uh, syntax here. 08:51.040 --> 08:53.290 Okay, so that's enough for our styling. 08:53.290 --> 08:59.050 In the next video, I will show you how we can actually have a button here in the top navigation and 08:59.050 --> 09:02.320 how we can use it for another component.