WEBVTT 00:02.160 --> 00:02.760 Okay. 00:03.120 --> 00:07.710 We have our list of movies already dynamic in our application. 00:07.710 --> 00:14.790 So if we go to the application now, it's not really functional that much because it's just a list of 00:14.790 --> 00:15.390 the movies. 00:15.390 --> 00:21.600 So what I would like to do in this video is whatever we click on one of the movies here, we'll go to 00:21.600 --> 00:25.530 the details page and we can display some more information about this movie. 00:25.530 --> 00:27.600 So how can we achieve that? 00:27.630 --> 00:30.330 We first, we need to enable navigation. 00:30.330 --> 00:37.890 Then we need to make it this list clickable and then redirect to the detail space and add a path. 00:37.890 --> 00:43.800 Some props to the new view and I will show you how we can do that in this video. 00:43.800 --> 00:47.400 So first thing first we need to go to App.js. 00:47.400 --> 00:53.910 And in the same way as we've done it before in the previous section, we need to enable navigation. 00:54.450 --> 01:10.440 So I will close the server here and I will do yarn, add, react navigation and React Navigation stack. 01:22.970 --> 01:23.690 Okay, this is. 01:23.690 --> 01:24.080 Hold on. 01:24.080 --> 01:27.170 If I will open the package.json. 01:27.170 --> 01:31.210 Here I have React navigation, React Navigation stack. 01:31.220 --> 01:38.510 What I found is, is if you install gesture handler with a yarn or MPM, it might be buggy. 01:38.510 --> 01:43.550 There's some bug open back here so I will insert with expo. 01:46.320 --> 01:49.920 And that will install the proper version of it, which is 1.3. 01:49.950 --> 01:51.750 Probably that will be resolved soon. 01:51.750 --> 01:54.540 So you can do it with yarn or NPM. 01:54.570 --> 01:56.650 At the moment the solution is with expo. 01:56.700 --> 02:04.050 It doesn't really matter but will pick the version that is working for the uh for the current expo project. 02:04.920 --> 02:10.770 React Native Gesture Handler. 02:23.930 --> 02:29.900 And you can see Expo can also install things and this is what it has been installed and we have 1.3 02:29.900 --> 02:30.320 version. 02:30.320 --> 02:31.820 The latest is 1.4. 02:31.820 --> 02:38.570 So if you installed that with yarn or NPM, you will have the version that is not really supported with 02:38.570 --> 02:39.320 this expo. 02:39.320 --> 02:46.670 So once we have that, then we can enable some application Json here. 02:46.670 --> 02:52.520 So what we need to do is we need to create navigation here and this will be the same way as we've done 02:52.520 --> 02:53.270 it before. 02:53.270 --> 02:54.770 So import. 02:57.050 --> 03:05.300 Create app container from React. 03:08.070 --> 03:09.470 Navigation 03:12.020 --> 03:20.060 and this supposed to be curly brackets here um like that from react navigation and then import. 03:25.140 --> 03:29.760 Create Stack Navigator. 03:30.600 --> 03:35.340 And that's going to be from React. 03:38.720 --> 03:40.580 Navigation stack. 03:42.050 --> 03:43.100 Okay, we have that. 03:43.100 --> 03:44.960 So we will do this one. 03:44.960 --> 03:47.000 So, So. 03:47.000 --> 03:52.220 Constant App Navigator. 03:55.000 --> 03:58.990 And that's going to be this method here. 04:00.370 --> 04:12.190 And then inside object so we can have list or movie list and that's going to be screen movie list like 04:12.190 --> 04:12.820 this. 04:13.420 --> 04:23.500 Also, what I will need to do is I will duplicate it and I will do detail and then I will do detail. 04:24.010 --> 04:28.390 So also I will need to create a new component here. 04:28.540 --> 04:30.820 So I will do detail. 04:32.200 --> 04:40.510 JS And then inside the list I can just quickly hack it so it will save me time for typing these things 04:40.510 --> 04:41.020 up. 04:41.020 --> 04:45.670 So I will leave it for now and just have inside view. 04:45.670 --> 04:50.260 I can have a simple text and that's going to be. 04:52.490 --> 04:55.580 Detail it out here. 04:55.580 --> 04:59.870 I don't need to have that and then I can remove this one. 05:00.020 --> 05:06.050 I will call it detail and then I can leave it for now, the rest of it. 05:06.050 --> 05:08.060 So we have a new detail there. 05:08.060 --> 05:14.990 What I need to do is I also need to import that in App.js from detail. 05:15.320 --> 05:20.960 So I have this one and I have App Navigator, so I can remove this one. 05:22.160 --> 05:24.470 Actually, I can remove this one. 05:27.220 --> 05:33.040 And then I will add constant 05:35.830 --> 05:39.370 up is equal to create app container. 05:40.000 --> 05:45.130 And what I need to do is I need to pass up navigator there. 05:45.430 --> 05:46.800 So that's it. 05:46.810 --> 05:49.750 Let me do Expo start. 05:57.510 --> 06:03.030 I can actually kill the application here and run it again. 06:05.820 --> 06:08.280 Okay, this is still loading. 06:08.280 --> 06:12.050 So we have our navigation kind of ready. 06:12.090 --> 06:14.970 We haven't done yet the the full navigation. 06:14.970 --> 06:21.270 Whenever we click this and move it to another component and we'll do that in the next video.