WEBVTT 00:00:01.200 --> 00:00:02.280 Hi, and welcome back. 00:00:02.300 --> 00:00:04.280 Today, we have a very exciting day. 00:00:04.280 --> 00:00:05.800 We're actually going to learn how 00:00:05.830 --> 00:00:10.420 the Stack Navigators work and how we can create multiple pages in our application. 00:00:10.450 --> 00:00:13.540 You now see that I have my simulator running. 00:00:13.570 --> 00:00:16.480 I did close all my terminals. 00:00:16.500 --> 00:00:20.200 I closed my Metro Bundler and rerun the application so that I would face no 00:00:20.220 --> 00:00:22.700 issues, especially if you're on Windows OS. 00:00:22.730 --> 00:00:24.460 Please don't forget to do this. 00:00:24.490 --> 00:00:27.700 Make sure everything is closed down and reopened again. 00:00:27.730 --> 00:00:31.820 If you're already facing the issues, this might be because of the caches. 00:00:31.850 --> 00:00:35.060 Just close all your comment prompts and rerun it again. 00:00:35.080 --> 00:00:37.440 For Mac OS users, I don't think you're going to face any 00:00:37.440 --> 00:00:41.040 issues, but it would be great if you still close the Metro Bundler and reopen it 00:00:41.070 --> 00:00:45.340 again because we don't want to mess with the caches of the system. 00:00:45.370 --> 00:00:47.720 Now everything should be running okay for you. 00:00:47.750 --> 00:00:52.960 What we're going to get started with in this lesson is making sure that we 00:00:52.990 --> 00:00:57.880 divide the resources in our applications into screens. 00:00:57.910 --> 00:01:02.201 Right now you see that all this code is inside the app.js file, 00:01:02.401 --> 00:01:06.560 but really this should be an entrance to our application and all 00:01:06.590 --> 00:01:10.130 the code should not be just in the main file of the application. 00:01:10.160 --> 00:01:15.120 What this means is that we have to come up with a new screen and it's going to be 00:01:15.150 --> 00:01:19.380 a home screen and all this content is going to have to go there. 00:01:19.410 --> 00:01:23.160 As we have the components folder for screens, we're also going to create 00:01:23.160 --> 00:01:25.000 a new directory and we're going to call it screens. 00:01:25.030 --> 00:01:28.360 And inside here, we're going to create 00:01:28.390 --> 00:01:31.040 a new directory and we're going to call it home. 00:01:31.070 --> 00:01:35.520 And as we're handling the components, we're going to handle the screens the same 00:01:35.550 --> 00:01:38.490 way because technically they are also components. 00:01:38.520 --> 00:01:43.570 What we're going to do is create a new file here and we're going to call it home.js. 00:01:43.600 --> 00:01:48.460 We're also going to create a new file here, and we're going to call it style.js. 00:01:48.490 --> 00:01:53.850 Now what we want to do is move the content from app.js into these files. 00:01:53.880 --> 00:01:56.260 First of all, what we have to do and make 00:01:56.290 --> 00:02:01.360 sure is that we copy this whole thing and just paste it here. 00:02:01.560 --> 00:02:05.340 Then there are a number of things that are going to have to change. 00:02:05.370 --> 00:02:11.020 For everything that you're using dot and slash that references our files, 00:02:11.050 --> 00:02:16.520 they're going to have to change two dots to get out of this folder and two 00:02:16.550 --> 00:02:20.920 more dots to get out of the other folder that it's going to be contained in. 00:02:20.950 --> 00:02:24.360 We're getting out from home folder to the screens folder and then 00:02:24.390 --> 00:02:29.320 from the screens folder into the main root folder here, the social media. 00:02:29.350 --> 00:02:31.600 If I do that, then I'm not going to have 00:02:31.630 --> 00:02:35.060 this underlined anymore because it is referenced correctly. 00:02:35.090 --> 00:02:37.680 We got to do this for everything on this screen. 00:02:37.680 --> 00:02:40.660 I'm just quickly going to do it, and you should do it as well. 00:02:40.690 --> 00:02:44.720 I'm going to just copy this, and I'm going to make sure that I replace 00:02:44.750 --> 00:02:48.160 all of these with the correct paths because we have 00:02:48.160 --> 00:02:52.140 just copied this and we have to make sure that we're going to have no errors here. 00:02:52.170 --> 00:02:53.880 And same in user stories here, 00:02:53.910 --> 00:02:58.500 we actually have a bunch of image routes, so we're going to have to change these 00:02:58.530 --> 00:03:01.700 paths as well and make sure that we use them correctly. 00:03:01.720 --> 00:03:03.480 Actually, why don't I copy this profile 00:03:03.510 --> 00:03:07.420 image and just replace every line given here? 00:03:07.440 --> 00:03:09.160 I'm sorry that this is going to take some 00:03:09.190 --> 00:03:13.220 time, but this is definitely something that we have to do, so just do this. 00:03:13.250 --> 00:03:16.000 Now let's make sure that these profile 00:03:16.030 --> 00:03:19.040 images are changed here as well for our post. 00:03:19.070 --> 00:03:22.340 We're going to have to do the same with the image. 00:03:22.370 --> 00:03:25.610 Let's make sure that this is done properly. 00:03:25.640 --> 00:03:31.680 For default post, let's go up two folders again and let's copy this and make sure 00:03:31.710 --> 00:03:37.060 that we replace the image route here as well. 00:03:37.090 --> 00:03:39.980 Now we should be more or less looking fine. 00:03:40.010 --> 00:03:42.800 I don't get any errors from my ESLint, 00:03:42.830 --> 00:03:47.580 so I don't think we have any more paths used here that would lead to errors. 00:03:47.610 --> 00:03:50.549 But here we just see that instead of style.js, 00:03:50.749 --> 00:03:53.680 we are using global style from the assets folder. 00:03:53.680 --> 00:03:57.060 We don't want to do that. We want to use the style.js. 00:03:57.090 --> 00:03:59.120 Let's make sure that we use this style. 00:03:59.150 --> 00:04:02.480 Js that we set up here and let's go to the assets folder here. 00:04:02.510 --> 00:04:07.080 Let's open the styles and let's make sure that everything inside 00:04:07.110 --> 00:04:11.300 this file is copied and pasted it right here. 00:04:11.330 --> 00:04:16.660 Let's use style name here and make sure that we export it as style as well. 00:04:16.690 --> 00:04:22.020 Then what we want to do is make sure that we access the fonts folder correctly. 00:04:22.040 --> 00:04:24.640 Here what we have to do is go two folders 00:04:24.660 --> 00:04:27.900 up and make sure that we are accessing assets. 00:04:27.920 --> 00:04:30.320 We're going to do the same here. 00:04:30.340 --> 00:04:34.920 I'm just going to copy this and I'm going to paste it here. 00:04:34.960 --> 00:04:36.240 Do we have any issues? 00:04:36.270 --> 00:04:39.580 Yeah, we're going to have to use styles folder. 00:04:39.600 --> 00:04:43.540 Now everything should be working fine inside here as well. 00:04:43.570 --> 00:04:45.720 We actually are not going to need 00:04:45.750 --> 00:04:50.440 the global style anymore, so we can just delete this file completely. 00:04:50.600 --> 00:04:52.280 Now it's telling me that it's referenced 00:04:52.280 --> 00:04:56.260 somewhere, but it's going to be inside the app.js file, which is totally fine. 00:04:56.280 --> 00:04:59.520 Now we're getting this error, but just don't pay attention to it. 00:04:59.540 --> 00:05:04.660 Here inside the home, let's just make sure that we are importing it as style. 00:05:04.690 --> 00:05:09.040 Once we do that, what we want to do is make sure that all 00:05:09.070 --> 00:05:12.820 the references to global styles are changed to style. 00:05:12.840 --> 00:05:15.320 Let's do this and make sure that there is 00:05:15.340 --> 00:05:18.320 no global style reference in this file anymore. 00:05:18.340 --> 00:05:22.120 Let me see if we're referencing global style anymore here. 00:05:22.150 --> 00:05:26.260 Okay, great. I think all of the global styles 00:05:26.280 --> 00:05:31.457 are deleted here and we're just using the style from style.js file right here. 00:05:31.657 --> 00:05:32.320 That's great. 00:05:32.350 --> 00:05:36.980 Inside the app.js file, we are referencing this global style. 00:05:37.000 --> 00:05:38.800 But the thing is we actually don't need 00:05:38.830 --> 00:05:42.780 any of this content anymore because everything was moved to the home screen. 00:05:42.800 --> 00:05:45.240 Now what we have to take care of is making 00:05:45.270 --> 00:05:50.380 sure that we use the Stack Navigator to display this home screen. 00:05:50.410 --> 00:05:55.060 Here, let's get rid of everything that we have declared. 00:05:55.080 --> 00:05:55.800 We don't need this. 00:05:55.800 --> 00:05:59.900 We're just going to leave the navigation container here and delete everything else. 00:05:59.920 --> 00:06:02.660 Let's save this and we don't need these 00:06:02.690 --> 00:06:06.420 imports anymore and we don't need this either. 00:06:06.450 --> 00:06:08.640 Let's try to rerun the Metro Bundler. 00:06:08.670 --> 00:06:10.840 You should see nothing displayed. 00:06:10.840 --> 00:06:12.440 If you're still getting the error, 00:06:12.470 --> 00:06:16.980 just rerun the whole Metro Bundler and your application should seem empty. 00:06:17.010 --> 00:06:20.520 And if it does not seem empty and it's going to give you some errors, 00:06:20.540 --> 00:06:25.420 then probably what happened is that you didn't import something correctly, 00:06:25.450 --> 00:06:30.420 your files might be a little messed up, and you are going to have a GitHub link 00:06:30.450 --> 00:06:33.440 to the changes that we're going to be making here. 00:06:33.470 --> 00:06:37.500 You can also always go to the Resources and make sure that all your imports are 00:06:37.530 --> 00:06:42.220 set up correctly and you have done exactly the same changes that I have done here. 00:06:42.240 --> 00:06:42.560 Great. 00:06:42.590 --> 00:06:47.460 Now that we're done with doing the initial setup of the home screen, 00:06:47.480 --> 00:06:50.760 what we actually have to worry about is setting up the Stack Navigator. 00:06:50.790 --> 00:06:53.320 For this, we're actually going to create 00:06:53.350 --> 00:06:57.300 a new folder again, and we're going to call it the navigation folder. 00:06:57.330 --> 00:06:59.000 This is going to take care of all 00:06:59.030 --> 00:07:03.220 the navigation things that we are going to be using inside this application. 00:07:03.240 --> 00:07:04.760 The first thing that we're going to have 00:07:04.790 --> 00:07:10.100 to do is make sure that we set up a file called routes. 00:07:10.130 --> 00:07:13.940 Let's set that up, routes.js. 00:07:13.970 --> 00:07:16.680 What this is going to do is hold all 00:07:16.710 --> 00:07:22.460 of the constants for the names of the screens that we have defined. 00:07:22.480 --> 00:07:27.700 Let's create a home constant here inside this object and call it home. 00:07:27.730 --> 00:07:32.180 Right now, I just want to talk to you about why do we need this file? 00:07:32.210 --> 00:07:38.480 Instead of using hard-coded string values for route names such as home, profile, 00:07:38.510 --> 00:07:41.980 and other pages, we're going to set up these constants 00:07:42.010 --> 00:07:47.080 because we're going to have a centralized place, a single file which defines all 00:07:47.100 --> 00:07:50.660 of the pages that we have available in our application. 00:07:50.690 --> 00:07:52.660 This means that if a route name needs 00:07:52.690 --> 00:07:57.100 to be changed, it can be done right inside this string. 00:07:57.120 --> 00:07:58.040 And if we change it, 00:07:58.040 --> 00:08:01.480 it will be automatically changed everywhere and you are not going to have 00:08:01.510 --> 00:08:06.240 to go to each file where you're using this route name and change it everywhere. 00:08:06.270 --> 00:08:08.920 This is going to be great because it's 00:08:08.950 --> 00:08:12.060 going to allow you to edit your code much easier. 00:08:12.090 --> 00:08:17.140 And also you are going to be prone to less errors and typos when you're going to have 00:08:17.170 --> 00:08:21.740 to type out the name of the screen if you're going to set up some navigation. 00:08:21.770 --> 00:08:26.400 Using this constant and accessing this exportable constant and using it like 00:08:26.420 --> 00:08:31.140 that is going to be great for you because you're going to have less bugs. 00:08:31.170 --> 00:08:33.240 Now that we talked about this, 00:08:33.270 --> 00:08:37.140 what we want to do is set up the main navigation system. 00:08:37.160 --> 00:08:42.500 We're going to create a new file for that, and we're going to call it MainNavigation.js. 00:08:42.530 --> 00:08:47.380 Basically, what this is going to do, first of all, is create the Stack Navigator. 00:08:47.410 --> 00:08:51.080 We're going to import the Stack Navigator right here. 00:08:51.110 --> 00:08:55.260 What we're going to do is use this function to set up our stack. 00:08:55.290 --> 00:08:57.340 We're going to call this just Stack. 00:08:57.370 --> 00:09:01.500 We're going to say that, Hey, create the Stack Navigator for me. 00:09:01.530 --> 00:09:05.600 Now that we have a reference to the Stack, what we're going to do is create 00:09:05.630 --> 00:09:08.380 a constant and we're going to call it main navigation. 00:09:08.410 --> 00:09:15.500 Let's create a function for this and it's going to return the stack navigation. 00:09:15.530 --> 00:09:20.620 Stack navigation is going to be set up like this, Stack Navigator. 00:09:20.650 --> 00:09:22.840 Inside here, we're going to place all 00:09:22.870 --> 00:09:26.940 of the pages and screens that are available in this application. 00:09:26.970 --> 00:09:31.300 For that, what we're going to need to do is create the Stack screen. 00:09:31.320 --> 00:09:35.980 This will take two properties that are definitely required. 00:09:36.010 --> 00:09:38.920 You're going to see the name that's required here. 00:09:38.940 --> 00:09:42.980 For the name, we did set up our routes exportable constant. 00:09:43.010 --> 00:09:47.595 We can just use it here and say that the name is going to be Routes.Home. 00:09:47.795 --> 00:09:49.040 Let's import this here. 00:09:49.060 --> 00:09:52.380 For the component that this route or 00:09:52.410 --> 00:09:57.520 screen should show is going to be the home screen that we have defined. 00:09:57.550 --> 00:10:01.260 Let's make sure that that is imported for us as well. 00:10:01.290 --> 00:10:05.400 Now let's save this and make sure that this is exportable. 00:10:05.430 --> 00:10:08.820 Let's export the main navigation. Great. 00:10:08.850 --> 00:10:12.030 Now let's go inside the app.js file 00:10:12.230 --> 00:10:15.300 and inside our navigation container. 00:10:15.320 --> 00:10:20.700 What we're going to do is place this main navigation. 00:10:20.730 --> 00:10:24.700 We're going to use it like a component, so make sure to do so as well. 00:10:24.730 --> 00:10:25.980 Let's save this. 00:10:26.010 --> 00:10:28.760 Here we get an error which says that we 00:10:28.790 --> 00:10:33.420 have a nested navigation container and I bet I know why this is. 00:10:33.440 --> 00:10:35.860 This is because on homepage we forgot 00:10:35.890 --> 00:10:40.580 to take away this navigation container that we put in the last video. 00:10:40.610 --> 00:10:47.220 Let's just delete this and make sure that we only leave the safe area view here. 00:10:47.250 --> 00:10:50.060 Let's save this and now we don't have that error anymore. 00:10:50.080 --> 00:10:54.340 You might see that our design changed a little bit. 00:10:54.370 --> 00:10:56.600 React Native has used this Stack Navigator 00:10:56.630 --> 00:11:00.780 to place the home label right on top of this page. 00:11:00.810 --> 00:11:02.620 We don't really want to do that. 00:11:02.650 --> 00:11:05.060 This is not really in our design. 00:11:05.080 --> 00:11:11.420 To get rid of that, what you could use is inside the Main Navigator, just open up 00:11:11.450 --> 00:11:18.500 Screen Options and say that for header, you don't want to use anything. 00:11:18.530 --> 00:11:21.140 Okay, your header is going to return null. 00:11:21.160 --> 00:11:23.320 If we do this, it shouldn't be visible anymore. 00:11:23.350 --> 00:11:26.460 But sometimes you might face some bugs with this. 00:11:26.490 --> 00:11:31.180 Also just say that header shown is going to be set to false. 00:11:31.210 --> 00:11:37.220 This will definitely make sure that your headers are not shown on any device. 00:11:37.250 --> 00:11:41.760 Great. We also should set an initial route name 00:11:41.790 --> 00:11:46.700 here so that React Native understands what should be the main page 00:11:46.730 --> 00:11:51.419 shown to the user once they open the application and it will be Routes.Home. 00:11:51.619 --> 00:11:53.640 Because that page is already defined 00:11:53.670 --> 00:11:57.920 inside our Stack Navigator, it will understand which page is going to be. 00:11:57.950 --> 00:12:00.280 Let's save this and we're not going 00:12:00.310 --> 00:12:03.980 to face any issues when opening our application either. 00:12:04.000 --> 00:12:04.360 Great. 00:12:04.390 --> 00:12:08.480 Now our main navigation system is set up, but this looks a little bit weird. 00:12:08.510 --> 00:12:10.120 It does have a gray background. 00:12:10.150 --> 00:12:12.060 I don't know how clearly you see this. 00:12:12.080 --> 00:12:17.660 For that, I actually do prefer to still create the global style. 00:12:17.690 --> 00:12:20.060 Let's create a new 00:12:20.080 --> 00:12:26.560 file here and let's create global style again and let's import 00:12:27.280 --> 00:12:32.420 style sheet here and create a new constant and let's call it global style. 00:12:32.450 --> 00:12:34.760 It's going to be stylesheet. Create. 00:12:34.790 --> 00:12:39.880 Here we're going to place styles that are named in a very generic way and doesn't 00:12:39.910 --> 00:12:43.400 necessarily need to be connected to specific screen. 00:12:43.430 --> 00:12:48.140 What we're going to create here is something called background white. 00:12:48.170 --> 00:12:53.120 We're going to make sure that this is setting background color to white color. 00:12:53.150 --> 00:12:58.100 It would be six fs or you can also just say white as a word 00:12:58.130 --> 00:13:03.598 and you can export this constant and make sure to go to home.js 00:13:03.798 --> 00:13:09.500 and inside save area view, you can create a style and you can import 00:13:09.530 --> 00:13:13.700 global style and use background white here. 00:13:13.730 --> 00:13:16.980 Let's import this file again. 00:13:17.010 --> 00:13:25.164 I did import it, but the thing here is that I just noticed that our home.js file 00:13:25.364 --> 00:13:27.100 is still named app. 00:13:27.130 --> 00:13:29.720 We got to make sure that this is named as home. 00:13:29.750 --> 00:13:34.060 Let's do this. Great. 00:13:34.080 --> 00:13:38.440 Now we do see that our application doesn't have the gray background anymore. 00:13:38.470 --> 00:13:40.020 This is working just fine. 00:13:40.040 --> 00:13:41.660 Let's also delete this navigation 00:13:41.690 --> 00:13:44.580 container imports that we don't need anymore. 00:13:44.610 --> 00:13:48.560 We have cleaned up everything and now we have organized our app.js 00:13:49.150 --> 00:13:52.220 file, which only contains the navigation container. 00:13:52.250 --> 00:13:54.200 Now what I want to do is just go over 00:13:54.230 --> 00:13:58.160 the whole implementation again because this was a lot in this video and I just 00:13:58.190 --> 00:14:01.720 want to make sure that you understand what did we do here. 00:14:01.750 --> 00:14:04.820 How are you going to set up the navigation the next time? 00:14:04.850 --> 00:14:06.900 We're going to have more examples of this 00:14:06.930 --> 00:14:10.620 in the course definitely, but let's just go over this one more time. 00:14:10.650 --> 00:14:15.280 Here we have the navigation container imported from React Native Navigation. 00:14:15.310 --> 00:14:17.120 This will let the application know 00:14:17.150 --> 00:14:20.860 that we're about to define some navigation for the application. 00:14:20.890 --> 00:14:23.040 And if we go inside the main navigation 00:14:23.070 --> 00:14:26.760 file, here we're going to see that we have set up this Stack Navigator, 00:14:26.790 --> 00:14:31.380 which will allow us to navigate from one page to a different page. 00:14:31.410 --> 00:14:32.680 Now, inside here, 00:14:32.680 --> 00:14:36.460 we set up the screen options because we didn't want to see the home label here. 00:14:36.490 --> 00:14:39.040 And inside here, we'll go all of the list 00:14:39.070 --> 00:14:42.340 of the screens that are available for the application. 00:14:42.370 --> 00:14:46.180 And so far we only have the home page, which is totally fine. 00:14:46.210 --> 00:14:52.300 Now, inside the home, we set up everything that we had set up for app.js file. 00:14:52.330 --> 00:14:56.720 We just moved the whole content here, made sure that all of the imports are 00:14:56.750 --> 00:14:59.820 changed so that our application is working with no errors. 00:14:59.850 --> 00:15:02.360 We also created a specific style.js 00:15:02.580 --> 00:15:06.940 file that is only going to be used for this homepage, which is great. 00:15:06.970 --> 00:15:12.240 We left the global style files still in our application, but we did change it. 00:15:12.270 --> 00:15:16.900 Here, we're only going to place these tiles that are going to be 00:15:16.930 --> 00:15:22.820 needed potentially for whole application rather than a specific page. 00:15:22.850 --> 00:15:25.160 Great. This is what we did. 00:15:25.190 --> 00:15:27.640 We also defined the routes constant here 00:15:27.670 --> 00:15:31.780 that is just going to hold the unique name of each screen here. 00:15:31.810 --> 00:15:37.380 This is going to be great for making sure that we're not making any typos when 00:15:37.410 --> 00:15:41.800 trying to access certain pages and we don't have any unexpected behavior. 00:15:41.830 --> 00:15:46.640 We have used this routes constant inside the main navigation and we are going 00:15:46.670 --> 00:15:50.740 to use it in a couple of other places inside the next lessons. 00:15:50.770 --> 00:15:52.080 That's all for today. 00:15:52.080 --> 00:15:55.200 Thank you so much for watching and I'll see you in the next video.