WEBVTT 00:01.550 --> 00:02.150 Okay. 00:02.150 --> 00:06.590 So far we have used only one component as a one screen. 00:06.590 --> 00:09.890 But what will happen if we will have more than one? 00:09.920 --> 00:15.440 Basically, what we need to do is we need to introduce navigation. 00:15.440 --> 00:19.490 So how do we handle navigation in React? 00:19.490 --> 00:23.090 Basically, that's handled by the separate package. 00:23.090 --> 00:28.340 So we will need to install a few things in order to work with the React navigation. 00:28.340 --> 00:31.520 So I will close this expo server Ctrl C. 00:31.790 --> 00:37.430 I now have a terminal here, so what I can do, I will make a little bit more space here so we will 00:37.430 --> 00:38.390 install things. 00:38.390 --> 00:45.590 So basically if you don't have a yarn you will do NPM install like this and if you have a yarn then 00:45.590 --> 00:49.370 you do yarn add and then the name of the packages. 00:49.370 --> 00:53.630 So what are the name of the package that we need to install? 00:54.290 --> 01:02.360 We'll need to do React navigation, then react Dash. 01:03.780 --> 01:19.320 Navigation stack and also react native gesture handler like this. 01:19.320 --> 01:22.530 So basically what we need to do is we need to install three things. 01:22.530 --> 01:31.160 So either NPM install and then name of the packages here or yarn and yarn add and name of the packages. 01:31.170 --> 01:37.710 So react navigation, react navigation, stack and react navigation react. 01:37.710 --> 01:39.660 Native gesture handler. 01:39.930 --> 01:41.700 So I will install them. 01:42.770 --> 01:44.640 I will make a little bit more space. 01:52.710 --> 01:53.820 Okay, this is done. 01:54.060 --> 02:00.090 If you want to confirm it that has been installed, then you can open the package.json here. 02:00.090 --> 02:04.200 And we are looking for React Native gesture handler. 02:04.230 --> 02:06.990 React native here and react Native stack. 02:06.990 --> 02:11.790 So three three things I have installed so we can start with our navigation. 02:12.120 --> 02:22.740 So what we have so far here is we have in the app.js, we just load a simple app here. 02:23.130 --> 02:25.710 So basically that's our component. 02:25.710 --> 02:28.560 And inside the app we load home. 02:28.560 --> 02:34.700 So we need to change the way we do it here for handling navigation and roads. 02:34.710 --> 02:39.510 So what we will need to do is we will need to import few things import. 02:56.080 --> 03:01.110 So we import a great app container from React navigation. 03:01.270 --> 03:02.860 Also we need to import. 03:14.760 --> 03:19.650 Stack Navigator from React 03:21.450 --> 03:23.760 Navigation. 03:23.760 --> 03:24.630 Stack. 03:24.990 --> 03:28.320 So basically that's the two packages that we have installed. 03:28.320 --> 03:34.200 So React navigation and React navigation stack and we importing two things create app container and 03:34.200 --> 03:41.130 then create Stack Navigator and we'll use them here and we will replace whatever we have here. 03:41.400 --> 03:44.130 So I will create a new constant here. 03:45.390 --> 03:52.650 I will name it App Navigator and then it will be create. 03:54.250 --> 03:55.960 Stack Navigator here. 03:57.430 --> 03:59.740 And inside will create an object. 03:59.890 --> 04:02.470 And that object, I will create my route. 04:02.470 --> 04:12.130 So I'll create first route here, home, and then another object here and then screen it will be home 04:12.130 --> 04:12.820 screen. 04:13.090 --> 04:18.210 So basically what I had here is I render home like this. 04:18.220 --> 04:24.160 This time what I do is I create a stack navigator and I have routes here. 04:24.160 --> 04:29.440 So at the moment I have only one route and I only have a new constant app navigator. 04:29.440 --> 04:36.940 So instead of displaying app like this, what I will do is I will use create app container to display 04:36.940 --> 04:37.480 that. 04:37.570 --> 04:47.500 So what we will do is we will have another constant app and that's going to be our create app container. 04:47.770 --> 04:56.210 And inside that app container, what I will do is I will load my app navigator here. 04:56.720 --> 05:01.490 So basically what I have here, so this one, it's not used anymore. 05:01.490 --> 05:08.900 What we need to do is we need to export default and then app like we had it before, but we don't need 05:08.900 --> 05:10.760 to do a component there. 05:10.760 --> 05:17.210 So basically I will replace my app component with create app container and I load my routes here. 05:17.210 --> 05:22.790 So App Navigator, I have it there, so I don't need to have this thing here. 05:22.970 --> 05:26.600 So what I do, what I can do is I can save it. 05:26.600 --> 05:29.120 Now let's do Expo Start. 05:41.050 --> 05:43.030 And let's run it in the simulator. 06:06.990 --> 06:09.600 And we have have it here. 06:09.600 --> 06:17.610 So basically, this is a little bit changed because what we have here, we have displayed our component 06:17.610 --> 06:19.410 here, the home component here. 06:19.410 --> 06:21.600 And we have a little bit of header here. 06:21.600 --> 06:22.980 This is navigation bar. 06:22.980 --> 06:30.930 This is a typical whenever we have a navigation in our application, we have built in navigation here. 06:30.930 --> 06:37.620 So what is happening here is normally we have this this is typical navigation here. 06:37.620 --> 06:42.120 Wherever we navigate somewhere we will have like back button there and that's built in. 06:42.120 --> 06:43.770 We can also control it. 06:43.770 --> 06:51.090 So whatever the the colors here are displayed and the text, we we have a full control over this. 06:51.090 --> 06:56.160 I'm not going to go full details because that's a huge topic here, the navigation. 06:56.160 --> 07:00.300 But I will show you how we can actually navigate in between two different screens. 07:00.600 --> 07:10.030 So what we can do here is we can open another one and we can create another file in the components. 07:10.030 --> 07:13.630 And I will do, let's say the title. 07:15.600 --> 07:18.690 JS I'm not going to do two versions for Android and iOS. 07:18.720 --> 07:19.740 I will have just one. 07:20.520 --> 07:24.390 So I will do a simple component here. 07:25.890 --> 07:32.490 So import react from react. 07:35.880 --> 07:49.230 And I will do export default class and then I will do detail and that will extends react. 07:53.350 --> 07:54.970 Component like this. 07:55.180 --> 08:03.280 So inside we need to have a render method and then we'll return. 08:05.200 --> 08:10.390 Let's say we'd like to return view. 08:16.080 --> 08:19.690 That's supposed to be parentheses, not curly brackets. 08:19.710 --> 08:20.240 My mistake. 08:20.250 --> 08:20.820 Sorry. 08:21.090 --> 08:24.120 And then we can display text. 08:28.210 --> 08:31.060 Details page here. 08:31.870 --> 08:49.240 So what we also need to do is we need to import, we need to import view and also text from React Native, 08:49.900 --> 08:51.100 react native. 08:52.840 --> 08:57.670 Okay, So we have another component here and then the component is detailed. 08:57.670 --> 09:00.520 So what I can do is I can go to the App.js. 09:00.520 --> 09:07.630 Basically what I will need to do is I will need to import this detail from 09:10.030 --> 09:12.040 detail detail. 09:12.040 --> 09:18.670 So from here I import it and once it is imported, I can actually load another road here. 09:18.670 --> 09:23.290 So this time it is going to be detail and the screen will be detail. 09:23.290 --> 09:28.550 So I have to now roads if I will save it now. 09:33.580 --> 09:39.730 You can see nothing will change because the home will be loaded by default in the first thing. 09:39.730 --> 09:45.520 So what we can do now is we will open the iOS because at the moment I'm on iOS. 09:45.550 --> 09:52.690 So what what I could do is I could have another button to have some kind of navigation. 09:56.160 --> 10:01.050 So I will have a button with a title. 10:04.430 --> 10:05.300 Go to 10:07.700 --> 10:08.600 details. 10:13.500 --> 10:16.080 And then I can have on press. 10:22.200 --> 10:24.640 And then I can close that button. 10:24.660 --> 10:29.490 So I will also need to add that needs to be capital button. 10:32.040 --> 10:34.800 And then I also need to import. 10:40.180 --> 10:42.910 So that need to be an arrow function. 10:45.730 --> 10:47.080 We will do props. 10:51.270 --> 10:52.290 Navigation. 10:52.740 --> 10:54.690 Navigate. 10:54.690 --> 10:56.520 And then that's going to be. 11:00.000 --> 11:00.930 Details. 11:01.920 --> 11:10.110 So if I will save it now and we have some errors here, probably it's not okay. 11:10.110 --> 11:10.590 It's still. 11:10.590 --> 11:15.770 Remember my, uh, old code that I, uh. 11:16.030 --> 11:18.030 I have saved and I haven't. 11:18.030 --> 11:19.680 I didn't have that finished. 11:19.830 --> 11:21.690 So if I will save it now, okay? 11:21.690 --> 11:22.980 I need to stop it. 11:23.160 --> 11:25.530 And then I will do expo start again. 11:26.880 --> 11:28.950 Sometimes it just lock itself. 11:29.490 --> 11:33.030 So I'll reboot the application here 11:36.930 --> 11:40.050 and then I'm starting that again. 11:52.600 --> 12:02.800 Okay, so here I am on iOS and I can click on go to details and I click in here and not actually it's 12:02.920 --> 12:03.490 happening. 12:03.490 --> 12:06.160 So if I go back here. 12:08.250 --> 12:10.320 And I think I made a mistake here. 12:10.320 --> 12:13.740 That's supposed to be a detail, not a detail. 12:13.740 --> 12:17.820 So this is this was the road here detail, not the detail. 12:17.820 --> 12:25.110 So if I will come back here, I click on details and I can see I have been bringing to a details page 12:25.110 --> 12:31.530 here and I have that back button so I can click it here and then I can click go to details and you can 12:31.530 --> 12:36.630 see this is a kind of a navigation, a simple aggregation that I've done. 12:36.630 --> 12:44.220 So you can from from that point you can create your own navigation with different screens that you have 12:44.220 --> 12:50.880 here and you can wrap it with a create app container and the app Navigator here. 12:51.420 --> 12:58.290 Another thing, what you could do is in the details in the component here, what you can have is you 12:58.290 --> 13:00.780 can actually name that screen. 13:00.780 --> 13:05.640 So you will do static navigation 13:07.170 --> 13:10.530 options and that's going to be object. 13:10.530 --> 13:20.220 And then we can have title and we will have title detail detail. 13:20.760 --> 13:28.020 So if I will save it now and go here and if I will go to the details, you can see detail is displayed 13:28.020 --> 13:28.560 here. 13:28.560 --> 13:34.980 So you can control the name of this specific view from here with a navigation options. 13:34.980 --> 13:42.180 Also, if you go to the App.js inside the Create Stack Navigator, you can control different styles 13:42.180 --> 13:45.600 and you can apply some colors and other things like that. 13:45.600 --> 13:48.810 So basically that's the basic of the navigation. 13:48.810 --> 13:54.540 You can create navigation like that and you can have multiple screens that you can toggle in between.