WEBVTT 00:01.400 --> 00:01.970 Okay. 00:02.120 --> 00:07.730 In this video, I will show you how we can actually add some controls into our top bar. 00:07.730 --> 00:11.800 And we'll introduce a new component for editing our movies. 00:11.810 --> 00:17.600 So what we will need to do first, let's create a new button in the top bar. 00:17.600 --> 00:20.780 So I will go to details, navigation options here. 00:20.780 --> 00:29.810 And what I can do here is I can have a header header right like this. 00:29.810 --> 00:34.760 And then what I can do here is I can include some element there. 00:34.760 --> 00:41.930 So what I will do is I will include a button and also what I will need to do is I will need to import 00:41.930 --> 00:48.620 that button there so we don't use the image and flatlist on this screen so I can remove it for now. 00:49.160 --> 00:51.440 And then we have a button there. 00:51.440 --> 00:57.590 So basically what I can have on a button is I can have a title. 00:58.010 --> 01:00.980 So this title will be added. 01:00.980 --> 01:04.220 So this whenever we click on this, we will add it. 01:04.220 --> 01:12.890 And also I will do a color and I can do color color white like this. 01:12.890 --> 01:16.490 So I will close it here and then save it. 01:17.330 --> 01:20.810 And then we have a problem with some styles. 01:20.810 --> 01:21.140 Probably. 01:21.140 --> 01:22.250 I miss a character. 01:22.370 --> 01:26.780 This shouldn't be a curly braces, this should be a parentheses. 01:26.780 --> 01:30.950 So I will change it like this and then save it. 01:32.110 --> 01:37.610 Unfortunately, my my thing starts because it failed building the JavaScript. 01:37.610 --> 01:38.990 So it kind of froze. 01:38.990 --> 01:42.710 So I'll do control C and I will start it again. 01:50.920 --> 01:53.180 So I will need to run it again. 01:53.200 --> 01:55.470 Unfortunately, that sometimes freeze. 01:55.480 --> 02:00.040 So we'll kill it and I will run it in simulator again. 02:02.480 --> 02:08.600 Okay, so clicking here, you can see I have a button here that is called edit and it is white so I 02:08.600 --> 02:10.490 can click it and nothing happens. 02:10.520 --> 02:13.380 Nothing happens because we haven't add any action to it. 02:13.400 --> 02:18.050 So what we need to do first is I will create a new component. 02:18.050 --> 02:21.860 So inside the components I will do edit. 02:21.980 --> 02:31.010 JS And what I can do is actually basically basically I will copy all the details here and I can put 02:31.010 --> 02:34.520 it in the edit and that will speed up the the process. 02:34.520 --> 02:38.030 So in this time we'll, it will use the edit. 02:38.060 --> 02:42.140 So let me put a simple text here. 02:42.140 --> 02:45.560 I will remove most of it and I will clean it in a second. 02:45.560 --> 02:55.940 So I will do edit movie just to have something to display and then we can actually, uh, leave some 02:55.940 --> 02:56.930 of it now. 02:57.260 --> 03:04.860 So I'll have edit And also this needs to have edit navigation options. 03:04.860 --> 03:06.120 We'll use it as well. 03:06.690 --> 03:09.930 And then we have a styles that we can clear after. 03:09.930 --> 03:17.640 So basically what we have here is we also trying to accept the movie because whenever we want to edit, 03:17.670 --> 03:19.380 we want to edit a specific movie. 03:19.380 --> 03:25.770 So basically what we will need to do is we need to pass from the details here, the edit this movie 03:25.770 --> 03:28.590 from the details to into edit component. 03:28.590 --> 03:37.530 So also before we will go this we need to also so I will duplicate this and import a new component from 03:37.530 --> 03:43.140 edit and then I can also duplicate this and then I will have another one. 03:43.140 --> 03:45.960 So edit will go edit like this. 03:45.960 --> 03:49.740 So we'll have another component there ready for us. 03:49.740 --> 03:56.580 And then what I can do is inside the details, I will go to the header right button and then inside 03:56.580 --> 03:58.500 here I can add on press. 03:58.740 --> 04:06.540 So if we on press and I can do it inline here, so whatever we press, I will do an arrow function and 04:06.540 --> 04:09.270 then we can use the same screen props here. 04:09.270 --> 04:16.170 So screen props like this and then navigation and then I can do navigate. 04:16.170 --> 04:20.280 And we've done it before with the in the, in the list component. 04:20.280 --> 04:23.250 So we'll use the same kind of method here. 04:23.250 --> 04:25.440 And then I will navigate to edit. 04:25.440 --> 04:26.700 So if I will test it. 04:26.700 --> 04:32.880 Now you can see here I have this and I click edit and I have edit movie. 04:32.910 --> 04:38.220 At the moment I don't pass anything there, so we don't do specific movie there. 04:38.220 --> 04:43.170 So I can come back here and then we can actually pass some extra parameters. 04:43.170 --> 04:48.120 So what I can pass, I'm expecting in the edit, I'm expecting movie as well. 04:48.120 --> 05:02.370 So what I do is I will do movie and then I can do screen props like this and then navigation Getparam 05:02.670 --> 05:07.950 and then I will take I will get the movie from here. 05:08.850 --> 05:15.270 So basically what I'm, what I'm doing there is I have screen props, navigation, navigate. 05:15.270 --> 05:20.160 This is the same method as we used here, you can see here. 05:20.160 --> 05:27.930 And then I navigate to edit and I take the this movie that has been passed here. 05:27.930 --> 05:30.180 You can see we already in this component. 05:30.180 --> 05:34.770 We have a movie and I will pass it forward to our edit. 05:34.770 --> 05:38.040 So I'm passing that here at the moment. 05:38.040 --> 05:45.420 We don't use it yet, so what I can do is edit and then instead of the movie, I can do a movie dot 05:45.450 --> 05:46.230 title. 05:46.380 --> 05:48.510 So let's see if that's working fine. 05:49.170 --> 05:55.140 So Titanic and then I will do edit and you can see, edit Titanic will come back here and inside the 05:55.140 --> 05:55.950 Titanic. 05:55.950 --> 05:58.800 And so let me come back to the avatar here. 05:58.800 --> 06:01.650 Edit And we can see I have another one. 06:01.650 --> 06:09.450 So what we did is we basically we pass our data from one component to another with some props. 06:09.450 --> 06:12.120 So I will do a clean up here. 06:12.120 --> 06:14.220 We don't use this anymore. 06:14.220 --> 06:22.110 So at the moment I, I can, I can have it here because we'll use the this later on and then I will 06:22.110 --> 06:23.400 do a little bit of cleanup. 06:23.400 --> 06:30.240 We can leave the styling as it is here and then we will remove from the edit, we'll remove the this 06:30.240 --> 06:33.480 button there because we don't want to edit edit again. 06:33.870 --> 06:36.090 So I will leave it like this. 06:36.090 --> 06:41.340 And at the moment we use only container and description here. 06:41.340 --> 06:50.610 So I will do container, I can remove the those and then I have a description and we don't need to have 06:50.610 --> 06:51.990 any styles like this. 06:56.120 --> 06:57.140 And I will save it. 06:57.410 --> 06:59.240 So it's much more. 07:00.560 --> 07:08.930 So we have a new edit component here and we can use it with some forms to actually edit the movie and 07:08.930 --> 07:11.000 install it in our database.