1 00:00:01,300 --> 00:00:05,710 Last we have to do for our home screen is make sure that a user can tap on either this button or this 2 00:00:05,710 --> 00:00:09,300 touchable opacity and get navigated over to the appropriate screen. 3 00:00:09,310 --> 00:00:12,190 So in this video we're going to figure out exactly how to do that. 4 00:00:12,220 --> 00:00:15,580 The first thing I want to remind you about is that inside of our app dot J is file. 5 00:00:15,670 --> 00:00:21,220 This project came pre configured with a stack navigator thing the stack navigator is what's going to 6 00:00:21,220 --> 00:00:26,910 allow us to navigate or essentially change the content that is visible on the screen to our users. 7 00:00:26,920 --> 00:00:30,870 Let's talk about how we can directly manipulate the stack navigator. 8 00:00:30,870 --> 00:00:31,200 Okay. 9 00:00:31,240 --> 00:00:36,590 So quick diagram it's on the left hand side this diagram is our stack navigator. 10 00:00:36,590 --> 00:00:38,030 This is an object like I said. 11 00:00:38,030 --> 00:00:41,360 It decides what to show on the screen at any given point in time. 12 00:00:41,570 --> 00:00:46,880 So the stack navigator itself is responsible for deciding to show home screen list or component screen 13 00:00:47,940 --> 00:00:51,120 when the stack navigator shows any one of these different components. 14 00:00:51,120 --> 00:00:56,400 It renders it in in the process it passes down a set of configuration options. 15 00:00:56,400 --> 00:01:01,470 Remember we refer to these different configuration options as props at this point. 16 00:01:01,470 --> 00:01:05,820 We've only seen an example of props that we pass into a primitive component. 17 00:01:06,300 --> 00:01:12,070 So for example inside of our home screen file you and I passed in a prop to that text element of style. 18 00:01:12,390 --> 00:01:17,460 And here's a prop. We passed into button on press 1 for title and so on. 19 00:01:17,460 --> 00:01:22,680 Props are not limited to just primitive elements created by React Native however components that you 20 00:01:22,680 --> 00:01:23,000 create. 21 00:01:23,010 --> 00:01:30,120 You and I create such as our home screen or list screen or whatever else can also receive props as well. 22 00:01:30,120 --> 00:01:35,250 So in react we can both pass props in which is what you're seeing right here and we can also receive 23 00:01:35,250 --> 00:01:41,420 configuration options or props into a component that we create in the stack navigator shows one of our 24 00:01:41,420 --> 00:01:43,790 components and passes in that props object. 25 00:01:43,970 --> 00:01:47,230 The props object has a lot of different properties tied to it. 26 00:01:47,300 --> 00:01:52,730 One of the properties inside there is a function that we can call inside of our code and tell the stack 27 00:01:52,730 --> 00:01:58,730 navigator that we wanted to change some content that is visible on the screen let's first try to just 28 00:01:58,730 --> 00:02:03,770 receive this props object inside of our home screen component we'll do a console log of the props object 29 00:02:03,970 --> 00:02:08,660 and just kind of inspect some of the different properties or different options that were given inside 30 00:02:08,660 --> 00:02:10,150 of our home screen. 31 00:02:10,250 --> 00:02:10,490 Okay. 32 00:02:10,520 --> 00:02:15,710 So back inside of our home screen undefined concept home screen the function declaration right up here 33 00:02:15,710 --> 00:02:21,080 at the top whenever a component that you and I create is passed a props object. 34 00:02:21,080 --> 00:02:24,610 It always shows up as the first argument to this function. 35 00:02:24,860 --> 00:02:31,370 So we usually call this props like so then inside of our function body we can console logout that prop 36 00:02:31,370 --> 00:02:39,730 subject So now anytime that our home screen appears on our device as it is right here we should see 37 00:02:39,730 --> 00:02:43,430 this console log up here in our terminal at the same exact time. 38 00:02:43,470 --> 00:02:46,960 OK so I'm going to say this if I now flip back over to my terminal 39 00:02:50,040 --> 00:02:51,870 I'll see that console log. 40 00:02:51,870 --> 00:02:57,900 So this big console log right here is all the different properties that exist inside of that props object. 41 00:02:57,900 --> 00:03:00,640 Now reading this console log is a little bit challenging. 42 00:03:00,690 --> 00:03:02,860 So let me just walk you through it very quickly. 43 00:03:02,940 --> 00:03:08,130 This is essentially saying that we've got a prop object like that's the top level object right there 44 00:03:08,820 --> 00:03:14,990 and then inside that object there is a navigation property the navigation property points to an object 45 00:03:15,720 --> 00:03:23,610 and that navigation object has keys of actions at event listener dangerously get parent dismissed dispatch 46 00:03:23,670 --> 00:03:25,080 and so on. 47 00:03:25,080 --> 00:03:29,610 So everything that you're seeing inside this console log right here is all nested inside of navigation 48 00:03:30,620 --> 00:03:32,660 so in other words just make sure it's really clear. 49 00:03:32,660 --> 00:03:38,420 We could update this console log of props to prop start navigation like so and then we'll just see that 50 00:03:38,450 --> 00:03:39,800 inner object. 51 00:03:39,810 --> 00:03:45,550 So I'll say this once again flip back over and now if we scroll down a little bit we should see a second 52 00:03:45,550 --> 00:03:46,220 console log. 53 00:03:46,240 --> 00:03:47,450 There it is right there. 54 00:03:47,650 --> 00:03:53,260 And now we're seeing the console log of just the prop start navigation object just to be clear this 55 00:03:53,320 --> 00:03:59,170 navigation property like this entire object right here is added in specifically by that react navigation 56 00:03:59,170 --> 00:04:03,970 library or more specifically by the stack navigator that we're making use of. 57 00:04:04,000 --> 00:04:09,910 So a normal react component is not going to be just magically provided some big navigation object. 58 00:04:09,910 --> 00:04:16,710 Instead it is specifically given to us because our component is being shown buy that stock and navigator 59 00:04:18,120 --> 00:04:18,520 All right. 60 00:04:18,540 --> 00:04:21,810 So then mind if we now look really carefully inside this object. 61 00:04:22,050 --> 00:04:27,990 You'll notice that inside of here there's one very specific property inside of here and it's called 62 00:04:28,050 --> 00:04:34,000 navigate navigate is a function that we can use to change the content that is visible on the screen 63 00:04:34,000 --> 00:04:35,240 of our device. 64 00:04:35,440 --> 00:04:39,670 We can call this navigation or this navigate function with a string. 65 00:04:39,670 --> 00:04:45,120 If we pass in a string that matches one of the different root names that are defined inside of our apt 66 00:04:45,180 --> 00:04:46,020 J J.S. file. 67 00:04:46,060 --> 00:04:47,910 Let's flip over there really quickly. 68 00:04:47,920 --> 00:04:52,720 So here's app J.S. here's our root object right here that describes all the different routes that we 69 00:04:52,720 --> 00:04:55,030 can navigate to inside of application. 70 00:04:55,030 --> 00:05:02,560 So we can call that navigate function and pass in a string of home or components or list when we do 71 00:05:02,560 --> 00:05:07,130 so will then see the appropriate component appear on the screen immediately. 72 00:05:07,240 --> 00:05:08,120 And that's pretty much it. 73 00:05:08,150 --> 00:05:10,720 That's the whole ballgame okay. 74 00:05:10,750 --> 00:05:13,330 So let's now test this out to test it out. 75 00:05:13,330 --> 00:05:15,970 I'm gonna go back over to my home screen component. 76 00:05:15,990 --> 00:05:21,990 I'm gonna clean up that console log that we have right there and I'm going to find my button and replace 77 00:05:21,990 --> 00:05:23,880 the console log inside there. 78 00:05:23,880 --> 00:05:26,340 So not the entire function just the console log. 79 00:05:26,460 --> 00:05:32,370 I'll replace it with props dot navigation dot navigate. 80 00:05:32,370 --> 00:05:37,470 Again that's a function that we can call and we can pass in a string that points to one of these other 81 00:05:37,470 --> 00:05:40,470 routes that we've defined inside of our stack Navigator. 82 00:05:40,500 --> 00:05:43,560 So in this case there button says go to components demo. 83 00:05:43,590 --> 00:05:49,940 So we probably want to navigate over to components so inside the navigate function I'll put in a string 84 00:05:50,270 --> 00:05:54,760 with components like so and that's pretty much it. 85 00:05:55,000 --> 00:06:00,710 Let's now save this and we'll test out our application I should now be able to tap on go to components 86 00:06:00,710 --> 00:06:04,780 demo and we'll see some navigation automatically occur. 87 00:06:04,820 --> 00:06:10,310 So now we are seeing our components demo screen or component visible and you'll notice inside the header 88 00:06:10,580 --> 00:06:15,470 react navigation that's library we are using to show different content has automatically added in a 89 00:06:15,470 --> 00:06:16,740 back button right there. 90 00:06:16,900 --> 00:06:20,830 If I tap on that back button I go back to the original home screen. 91 00:06:20,830 --> 00:06:21,110 OK. 92 00:06:21,230 --> 00:06:21,950 So it's perfect. 93 00:06:21,950 --> 00:06:23,830 This is exactly what we wanted. 94 00:06:24,020 --> 00:06:27,890 I should be able to replicate all this on my android device as well. 95 00:06:27,950 --> 00:06:33,800 So if I tap on go to components demo yep I navigate over and then in a header right there I've automatically 96 00:06:33,800 --> 00:06:37,520 got a back button that I can tap and go back to my home screen. 97 00:06:37,580 --> 00:06:39,400 Perfect OK. 98 00:06:39,440 --> 00:06:40,860 So let's take a quick pause right here. 99 00:06:40,880 --> 00:06:45,260 When we come back the next video we're going to add in the same functionality to our touchable opacity 100 00:06:45,290 --> 00:06:45,770 as well.