WEBVTT 00:01.400 --> 00:07.100 Okay, we have our navigation prepared, so we have our roads prepared in in the application. 00:07.100 --> 00:09.260 But at the moment we don't use them yet. 00:09.260 --> 00:18.080 So the goal here will be to whenever we click on one of the items here listed as movies will be redirected 00:18.080 --> 00:22.670 to our details page and we can actually pass some params into the new view. 00:22.670 --> 00:24.440 So how can we do that? 00:25.310 --> 00:32.120 We can go to the flatlist and inside we have a view normally we would like to use on press, but I have 00:32.120 --> 00:36.800 to say on press is not available on all elements we have on React Native. 00:36.830 --> 00:41.870 That needs to be a certain elements that will accept this callback on press. 00:41.870 --> 00:49.250 So what we need to do is we need to use a certain elements to do we use on press on buttons already 00:49.250 --> 00:51.230 because buttons will have on press. 00:51.230 --> 00:58.970 But if you would like to use it on an element like this, then you need to actually wrap it with something 00:58.970 --> 00:59.720 else. 00:59.720 --> 01:09.180 So now what you will do is you have a various of options as untouchables and that's React native elements. 01:09.180 --> 01:14.850 And I will use and one that is called touchable opacity. 01:18.330 --> 01:20.370 And you can see here four of them listed. 01:20.370 --> 01:23.040 So I will go for touchable opacity. 01:23.040 --> 01:24.930 And what are the others? 01:24.930 --> 01:31.770 So opacity will whatever we clicked, it will just change the opacity a little bit so it will become 01:31.770 --> 01:36.120 a little bit more transparent for a second highlight will make it a little bit darker. 01:36.150 --> 01:37.140 Native feedback. 01:37.170 --> 01:43.590 It is inc kind of style, so it will circle that will go from from your click outside and that's available 01:43.590 --> 01:49.050 only for Android and on without feedback you will have no visual effects to to this. 01:49.080 --> 01:54.150 I will use opacity here and it doesn't really matter at this point which one. 01:54.150 --> 01:57.150 It's purely a visual. 02:01.850 --> 02:04.640 So once you you need to also import it. 02:08.720 --> 02:13.190 And once you have it, it doesn't really change anything at this point. 02:13.190 --> 02:19.190 Like we if we click it, you can see this is clickable and we have that like white feedback. 02:19.190 --> 02:20.960 And that's because we use opacity. 02:21.260 --> 02:23.150 It will go for opacity. 02:23.150 --> 02:25.880 And I use opacity because we have a dark button here. 02:25.880 --> 02:31.190 And if you have something light, then maybe you can use the touchable highlight. 02:31.190 --> 02:38.240 So at this point on touchable, we have option to do on press and you can see here and then we can use 02:38.240 --> 02:39.230 on press there. 02:39.230 --> 02:48.440 So what I will do is I will use an arrow function here and and I can do movie clicked. 02:49.910 --> 02:54.260 What I can do is I can pass an item to this method. 02:54.260 --> 03:01.340 So I will have an access to the currently clicked item and let me create a new constant. 03:01.340 --> 03:04.940 I will do constant because I am in the functional component. 03:05.060 --> 03:08.940 So actually I will do an arrow function here. 03:12.080 --> 03:13.000 I like that. 03:13.000 --> 03:21.100 And we know we will receive an item and I can call it movie here as an argument in the function. 03:21.100 --> 03:23.140 So we will have an access to the movie. 03:23.140 --> 03:33.250 So what we can do with that movies is we need to use a props and from here we can use props and then 03:33.250 --> 03:38.020 I can do a navigation navigate. 03:41.280 --> 03:44.900 And that's a method that will accept detail. 03:44.910 --> 03:51.240 So data like this and this detail is the same as we have here. 03:51.240 --> 03:54.600 So basically, if I will click here, I'm in the details. 03:54.600 --> 03:57.120 So navigation is working fine. 03:57.120 --> 04:03.090 But what we would like to achieve here is to pass some information to our details. 04:03.090 --> 04:09.990 So what we can do is, as a second argument, we can actually include some extra data. 04:09.990 --> 04:17.880 So what I will do is I will open an object and I will do movie and then movie. 04:18.420 --> 04:21.780 So the first one is the param that I would like to pass. 04:21.780 --> 04:25.560 And then this one is the data and this data is coming from here. 04:25.560 --> 04:30.120 So I will pass along with my changing navigation. 04:30.120 --> 04:32.820 I will pass that data into new component. 04:32.820 --> 04:40.540 So what I can do here in the component, what I can do is I can get that data from the params. 04:40.540 --> 04:50.380 To do that I will do constant and then I can say my params and I can do props. 04:50.920 --> 04:54.010 Actually I need to include that. 04:54.190 --> 05:10.360 So props, navigation and then I can do get params and param and then we will get movie that's the name 05:10.360 --> 05:13.270 of the param we specified here. 05:13.270 --> 05:16.060 So that's the name of the param here and the movie. 05:16.060 --> 05:18.160 And then we need to provide a default one. 05:18.160 --> 05:21.340 So by default I can do a null one. 05:21.340 --> 05:28.660 So at this point my params will actually have this data with it. 05:28.660 --> 05:33.940 So what I can do is actually I can name it maybe something like a movie that will make more sense than 05:33.940 --> 05:34.600 my param. 05:35.020 --> 05:42.120 And because we are asking here and if you need to pass more information here, you can pass it a here 05:42.540 --> 05:46.290 inside like separated by a comma and pass in something else. 05:46.980 --> 05:51.480 And here you can have another one that will just get another param. 05:51.690 --> 05:55.350 So that will be the way to handle multiple of them. 05:55.350 --> 05:58.830 So and I can say about. 06:01.350 --> 06:04.400 And then I can do movie that title. 06:04.410 --> 06:11.190 So what I'm hoping is I'm passing the whole movie and that movie will I will get it from the parents 06:11.190 --> 06:16.020 so it will be passed here and here I can actually print the name of it. 06:16.020 --> 06:20.040 So if that will be accessible and then I will print a name. 06:20.040 --> 06:27.960 So if I will save it now I'm clicking on Titanic and you can see details about Titanic going back, 06:28.800 --> 06:30.630 details about Avatar two. 06:30.630 --> 06:32.070 So you can see this. 06:32.070 --> 06:33.540 This is already working. 06:33.540 --> 06:39.090 We have the navigation and we know how to pass our information from one place to another. 06:39.090 --> 06:47.250 So this is a very good example of how we can share some data in between the components using our navigation 06:47.250 --> 06:47.910 here.