1 00:00:01,050 --> 00:00:04,650 As we were just discussing the last big thing we have to do is make sure that we show this separate 2 00:00:04,650 --> 00:00:05,880 screen over here. 3 00:00:05,880 --> 00:00:07,940 So let's get started working on it right away. 4 00:00:07,950 --> 00:00:12,090 We're going to first create a separate screen component and then wired up to our stack navigator so 5 00:00:12,090 --> 00:00:16,790 that a user can navigate to it anytime they tap on one of these different restaurants. 6 00:00:16,850 --> 00:00:17,090 OK. 7 00:00:17,130 --> 00:00:21,450 So back inside my code Ed I'll find the screen directory and inside they're going to make a new file 8 00:00:21,450 --> 00:00:29,900 called results show screen dot J.S. and then inside of here we'll throw together a little bit of boilerplate 9 00:00:29,900 --> 00:00:31,790 around a typical react component. 10 00:00:32,000 --> 00:00:35,300 So I will import react from react. 11 00:00:35,360 --> 00:00:42,930 I will import view text and style sheet from React Native. 12 00:00:43,010 --> 00:00:54,200 I'll do my contact results show screen and as usual right now I'll return a View element in inside there 13 00:00:54,230 --> 00:01:02,530 I'll put a text that just says results show will then create our style sheet 14 00:01:06,970 --> 00:01:11,390 and then export default results show screen OK. 15 00:01:11,420 --> 00:01:12,930 So not that bad. 16 00:01:12,980 --> 00:01:17,570 Now remember anytime we create a new screen we need to wire it up inside of our apt J.S. file to our 17 00:01:17,570 --> 00:01:18,800 stack navigator. 18 00:01:18,860 --> 00:01:22,940 We went through this process like six or seven times in the last application we worked on. 19 00:01:22,970 --> 00:01:25,310 So it's gonna be the exact same thing this time around. 20 00:01:25,760 --> 00:01:27,650 I'll open up my update J.S. file. 21 00:01:27,710 --> 00:01:31,720 Here's our route configuration object that we want to wire up our new screen too. 22 00:01:31,880 --> 00:01:38,880 So at the top I'm going to import the screen we just created so I'll do an import results show screen 23 00:01:39,810 --> 00:01:49,230 from source screens results show screen and I'll wire that up on my route configuration object. 24 00:01:49,350 --> 00:01:54,150 So results show is results show screen OK. 25 00:01:54,180 --> 00:01:55,290 So not too bad. 26 00:01:55,350 --> 00:01:56,390 So we can save this. 27 00:01:56,520 --> 00:02:00,990 And well I've got a little bit of a typo here that is not related. 28 00:02:01,050 --> 00:02:04,160 I would just made a little bit of a change to my code between last video on this one. 29 00:02:04,230 --> 00:02:06,220 So we should still see our application. 30 00:02:06,300 --> 00:02:10,890 So now the issue is that although we've wired up this new screen to our app we don't really have any 31 00:02:10,890 --> 00:02:13,410 way of navigating a user over to it. 32 00:02:13,410 --> 00:02:19,050 Remember how he took care of navigation on the last application we worked on whenever a screen is rendered 33 00:02:19,050 --> 00:02:24,830 by react navigation stack navigator the stack navigator is going to see me the stack navigator is going 34 00:02:24,830 --> 00:02:31,170 to throw a set of props over to our different screens and inside of this props object is a object that 35 00:02:31,170 --> 00:02:35,670 has a lot of different functions on it related to changing the screen that the user is currently looking 36 00:02:35,670 --> 00:02:36,560 at. 37 00:02:36,630 --> 00:02:39,610 Let's get a quick reminder of what that props object looks like. 38 00:02:39,750 --> 00:02:43,840 By adding in a console log to our search screen component. 39 00:02:44,160 --> 00:02:51,890 So I'll go back over to my search screen I'm going to add in that props argument and we'll do a console 40 00:02:51,890 --> 00:02:58,910 log of props inside their I'll save this and we'll flip back over to our terminal and see what props 41 00:02:59,240 --> 00:03:01,540 react navigation gives to us. 42 00:03:01,610 --> 00:03:01,820 OK. 43 00:03:01,850 --> 00:03:06,080 So here's my terminal once again here's the console log. 44 00:03:06,140 --> 00:03:11,000 So this is the entire big props object inside there is a navigation property. 45 00:03:11,030 --> 00:03:12,860 Remember that's the one we care about. 46 00:03:12,860 --> 00:03:19,040 This navigation prop is what's given to us by react navigation inside that navigation prop is a big 47 00:03:19,040 --> 00:03:24,540 object and one of the functions inside that object is called navigate. 48 00:03:24,540 --> 00:03:28,820 That's the function that we call anytime we want to show a different screen to a user. 49 00:03:28,860 --> 00:03:32,990 So we want to get make sure we get that function right there. 50 00:03:33,000 --> 00:03:38,300 Now there's just one little challenge this time around I'm going to flip back on my code. 51 00:03:38,310 --> 00:03:39,380 Ed really quickly. 52 00:03:39,590 --> 00:03:45,820 Here we go so last time in the last application we're working on we took that prop subject we pulled 53 00:03:45,820 --> 00:03:51,100 off that navigate function and we called the navigate function from a component that we had been returning 54 00:03:51,280 --> 00:03:54,100 inside of the same component. 55 00:03:54,100 --> 00:03:58,600 In other words we just took that function and called it from an on press callback that we had inside 56 00:03:58,600 --> 00:04:01,030 of a button element that we're showing right here. 57 00:04:01,030 --> 00:04:06,310 But this time around we do not want to call that navigate function directly from our search screen. 58 00:04:06,850 --> 00:04:13,450 Instead we need to pass that function down to one of our child components specifically we want to pass 59 00:04:13,450 --> 00:04:17,730 that function down to the component that is showing this big restaurant right here. 60 00:04:17,740 --> 00:04:21,740 So we want to detect when a user taps on that given restaurant. 61 00:04:21,760 --> 00:04:26,230 So we need to make sure we pass the navigate function down to the appropriate sub component that is 62 00:04:26,230 --> 00:04:29,000 being displayed by search screen. 63 00:04:29,050 --> 00:04:32,920 So in other words we just need to kind of shepherd some information around. 64 00:04:32,920 --> 00:04:36,190 So let's take another quick pause right here when we come back the next video we're gonna make sure 65 00:04:36,190 --> 00:04:41,050 that we take out that navigate function from our props object and then pass it down to the appropriate 66 00:04:41,050 --> 00:04:44,940 child components where it can be made use of in the correct location. 67 00:04:45,040 --> 00:04:47,080 So a quick pause and we'll take care of that in the next video.