WEBVTT 00:00:00.840 --> 00:00:02.540 Hi and welcome back. 00:00:02.570 --> 00:00:05.060 Today I would like to show you how to use 00:00:05.090 --> 00:00:09.240 this Stack Navigator that we've set up to actually create different page than 00:00:09.270 --> 00:00:12.500 the home screen and be able to navigate to that page. 00:00:12.530 --> 00:00:14.600 Here we have our navigation container 00:00:14.630 --> 00:00:19.520 and then we have main navigation, which defines the only screen that we have 00:00:19.520 --> 00:00:21.700 available so far, and this is the home screen. 00:00:21.730 --> 00:00:25.200 To create another screen, we're going to have to go to the screens 00:00:25.230 --> 00:00:27.680 folder right here and create a new directory. 00:00:27.710 --> 00:00:31.900 I call this profile, so you can create this one as well. 00:00:31.920 --> 00:00:35.782 And inside here, let's create profile.js file, 00:00:35.982 --> 00:00:38.300 and let's make sure to do some 00:00:38.320 --> 00:00:43.140 initial setup such as importing React from React. 00:00:43.170 --> 00:00:48.860 We're also going to be needing import of the save area view and let's import 00:00:48.890 --> 00:00:53.300 text as well because we're just going to place simple text on this page. 00:00:53.320 --> 00:00:55.260 Then what we want to do is create constant 00:00:55.290 --> 00:00:59.660 for the profile and make it a functional component inside, which we're going to use 00:00:59.680 --> 00:01:07.100 safe area view along with a text and it's going to say, welcome to profile page. 00:01:07.130 --> 00:01:12.290 Let's save this and now let's make sure that we export 00:01:12.320 --> 00:01:16.700 default profile so that this is usable on another screen. 00:01:16.730 --> 00:01:22.040 Then what we want to do is go to the main navigation and copy this line and paste it 00:01:22.070 --> 00:01:27.520 one more time and make sure that we have a new unique route called profile. 00:01:27.550 --> 00:01:32.930 Here we're going to create profile and value is just going to be profile. 00:01:32.960 --> 00:01:38.200 Then what we're going to do is make sure that we use the profile here and we are 00:01:38.230 --> 00:01:41.740 going to import the profile component as well. 00:01:41.760 --> 00:01:42.160 Great. 00:01:42.190 --> 00:01:45.180 Now if we save this, we should have no more errors. 00:01:45.210 --> 00:01:47.540 Then what we want to do is use this 00:01:47.570 --> 00:01:51.620 profile screen to somehow be able to navigate to this page. 00:01:51.650 --> 00:01:56.340 I am going to use this message icon to navigate to profile page. 00:01:56.370 --> 00:02:00.200 I know that message icon shouldn't really take you to profile page, 00:02:00.230 --> 00:02:06.020 but the main idea right now is that I show you how to use the navigation in general. 00:02:06.050 --> 00:02:10.100 What we want to do is go to the home screen here. 00:02:10.130 --> 00:02:16.120 To use the navigation on a screen level, what we can do is make sure that we grab 00:02:16.150 --> 00:02:22.540 a prop that comes with every screen that's available inside the task screen. 00:02:22.560 --> 00:02:24.320 So if your screen is available here, 00:02:24.350 --> 00:02:27.450 it's going to come with the navigation property. 00:02:27.480 --> 00:02:31.660 You can use props.navigation instead of directly defining it 00:02:31.690 --> 00:02:34.465 here, but I find this way more clear, 00:02:34.665 --> 00:02:37.540 so I'm just going to define it like this. 00:02:37.570 --> 00:02:39.731 Now let's go to our message icon, 00:02:39.931 --> 00:02:41.040 which is right here. 00:02:41.070 --> 00:02:42.060 And as I told you, 00:02:42.090 --> 00:02:47.060 touchable opacity is another button that technically does nothing right now. 00:02:47.090 --> 00:02:49.940 What we want to do is on press, 00:02:49.970 --> 00:02:59.120 we want to set up a handler and use this navigation to navigate to Routes.Profile. 00:02:59.150 --> 00:03:03.220 Now, let's make sure that this is imported here so that we get no errors. 00:03:03.250 --> 00:03:04.460 Let's save this. 00:03:04.490 --> 00:03:06.550 Now, if we press here, we're actually 00:03:06.750 --> 00:03:08.610 going to be redirected to a new page. 00:03:08.640 --> 00:03:09.940 Let's press. 00:03:09.970 --> 00:03:13.780 Now you're going to see, welcome to profile page. 00:03:13.810 --> 00:03:18.780 Now, if you want to navigate back, currently we have no back button, 00:03:18.810 --> 00:03:22.740 but you can just slide and you can navigate back like that. 00:03:22.770 --> 00:03:27.700 Here you also might notice the color of our screen is different. 00:03:27.730 --> 00:03:32.280 This is because of the same problem that we faced in the last video where 00:03:32.310 --> 00:03:35.180 navigation automatically applied the style. 00:03:35.210 --> 00:03:39.680 What we can do is go to profile page for this and make sure that we apply 00:03:39.710 --> 00:03:44.060 a style and say that we are going to use global styles background white. 00:03:44.090 --> 00:03:48.560 This is why it was a good idea to create this as a global style because now 00:03:48.590 --> 00:03:52.540 we can reuse this style in many other screens. 00:03:52.570 --> 00:03:54.980 Let's import this, save this, 00:03:55.010 --> 00:03:58.060 and now you're going to see a little weird behavior. 00:03:58.090 --> 00:04:01.440 This is because this whole component only 00:04:01.470 --> 00:04:07.040 takes as much space as this text component placed inside here. 00:04:07.070 --> 00:04:09.460 If we want to make this whole 00:04:09.490 --> 00:04:15.300 screen white, what we're going to have to do is actually apply Flex to this. 00:04:15.330 --> 00:04:18.080 Since Flex is also going to be something 00:04:18.100 --> 00:04:21.020 that we're just going to be using on different pages, 00:04:21.040 --> 00:04:25.260 let's set it up in global style and say that if we want to use Flex, 00:04:25.280 --> 00:04:30.660 we can just call it flex, and we're going to say that this is equal to flex one. 00:04:30.690 --> 00:04:33.160 Then let's apply this tile right here. 00:04:33.190 --> 00:04:36.340 Let's say we want to use global style.flex. 00:04:36.360 --> 00:04:37.360 If we save this, 00:04:37.390 --> 00:04:41.220 notice that our background is going to be changing all to white. 00:04:41.250 --> 00:04:43.840 This is how you are able to access a new screen. 00:04:43.860 --> 00:04:46.060 Now, if you want to be able to go back, 00:04:46.090 --> 00:04:50.900 you could also set up a touchable opacity here. 00:04:50.920 --> 00:04:53.200 Then what you could do is use a text 00:04:53.220 --> 00:04:57.780 insight here and you're going to call it go back, for example. 00:04:57.800 --> 00:05:00.900 Let's save this and you're going to see it appear here. 00:05:00.920 --> 00:05:08.340 Then what we want to do is say that on Press, we want to use the navigation. 00:05:08.360 --> 00:05:12.100 Let's use this prop right here as well 00:05:12.130 --> 00:05:16.380 and say that we want to use this navigation to Go Back. 00:05:16.410 --> 00:05:17.660 This is how you do it. 00:05:17.690 --> 00:05:18.700 Let's save it. 00:05:18.720 --> 00:05:22.900 Now if we were to click on go back, you can go back like that as well. 00:05:22.920 --> 00:05:28.040 If you want to apply some a style to this to make sure that color is blue and you 00:05:28.070 --> 00:05:32.300 can understand that this is going to be a button, you can do so. 00:05:32.330 --> 00:05:33.740 Now if we press here, 00:05:33.770 --> 00:05:38.140 you're going to see it as a blue button and you can press and come back. 00:05:38.160 --> 00:05:39.760 There are two ways of navigating back. 00:05:39.760 --> 00:05:41.420 You can just slide back and this is 00:05:41.450 --> 00:05:45.100 handled by the React native gesture handler that we installed. 00:05:45.130 --> 00:05:49.700 Or you can also always click on this button and it will do so automatically. 00:05:49.730 --> 00:05:53.020 This is it for this particular lesson. 00:05:53.040 --> 00:05:59.440 We just learned how to set up a new screen in our navigation using a stack screen, 00:05:59.470 --> 00:06:05.140 how to use a unique route to make sure that we can access a certain 00:06:05.170 --> 00:06:10.760 screen component and then be able to use it from the homepage using the navigation 00:06:10.790 --> 00:06:15.780 that comes with any screen that is defined inside this Stack Navigator. 00:06:15.800 --> 00:06:17.400 Thank you so much for watching and I'll 00:06:17.420 --> 00:06:21.080 meet you in the next video where we're going to be exploring a new topic, 00:06:21.100 --> 00:06:24.800 a new navigation that you could use for your application. 00:06:24.830 --> 00:06:25.940 So stay tuned. 00:06:25.960 --> 00:06:27.880 Thank you and see you in the next video.