1 00:00:00,900 --> 00:00:05,040 Now that we can delete all of our different blog posts let's make sure that tapping on an individual 2 00:00:05,040 --> 00:00:08,600 one navigates the user over to a new show screen. 3 00:00:08,640 --> 00:00:14,300 Let's first get started by creating a new show screen component and hooking up to our stack navigator. 4 00:00:14,430 --> 00:00:19,800 Back inside my code editor I can find my screens directory and inside there I'll make a new file called 5 00:00:20,010 --> 00:00:23,730 show screen dot J.S. and then you guessed it. 6 00:00:23,760 --> 00:00:28,870 Let's throw some boilerplate inside of here so I will import react from react. 7 00:00:29,080 --> 00:00:40,590 I'll get view text and style sheet from React Native then create my show screen component and right 8 00:00:40,590 --> 00:00:45,970 now yep let's return a view that has some text inside of it 9 00:00:51,710 --> 00:00:52,900 will then create our style sheet. 10 00:00:52,900 --> 00:00:55,350 So Conn styles is style sheet. 11 00:00:56,460 --> 00:01:06,150 Create in our export default at the bottom for show screen good looks good. 12 00:01:06,170 --> 00:01:10,170 So now we've got this but together we can hook it up to our stack navigator to do so I'll flip back 13 00:01:10,170 --> 00:01:22,770 over to abduct J.S. at the top we'll import show screen from source screens show screen then we can 14 00:01:22,770 --> 00:01:29,850 hook it up to our root configuration object so I'll do show is show screen all right. 15 00:01:30,490 --> 00:01:31,720 So that definitely works. 16 00:01:31,720 --> 00:01:36,220 It tells our stack navigator that there's this additional screen that we want to use to navigate to 17 00:01:36,640 --> 00:01:40,850 but obviously it doesn't actually give our users the ability to get over there just yet. 18 00:01:40,870 --> 00:01:46,750 Instead we have to make use of that navigation function that's included in the props object that's provided 19 00:01:46,750 --> 00:01:51,540 by the stack navigator to any component that's shown directly by it. 20 00:01:51,550 --> 00:01:53,970 So in other words we have to go into our index screen. 21 00:01:54,160 --> 00:01:59,750 We have to receive that navigation prop and call that navigate function to change over to the show. 22 00:01:59,750 --> 00:02:06,960 Anytime a user taps on a row so to get started we'll go back into our index screen inside of here I'll 23 00:02:06,960 --> 00:02:12,670 receive that props object and we'll do a quick console log on there just to get a quick reminder of 24 00:02:12,670 --> 00:02:14,410 what that props object looks like. 25 00:02:14,740 --> 00:02:15,910 So I'll save the file. 26 00:02:15,910 --> 00:02:22,290 I just got the update which means I should have the console log back inside my terminal back over here. 27 00:02:22,290 --> 00:02:27,570 There's our props object once again remember we've looked at this several times now we've got that navigation 28 00:02:27,570 --> 00:02:35,840 prop and inside of it is the navigate function so inside of indexed screen we will D structure off just 29 00:02:35,840 --> 00:02:40,210 the prop we care about which is navigation. 30 00:02:40,230 --> 00:02:42,450 Now we want to call the navigate function on there. 31 00:02:42,460 --> 00:02:49,280 Anytime that a user taps this entire row so to do so we can once again make use of that touchable opacity 32 00:02:49,280 --> 00:02:55,310 component we can wrap this entire block right here with another touchable opacity and add in an on press 33 00:02:55,310 --> 00:03:00,350 handler to it and then inside the UN press handler we'll call our navigate function and that should 34 00:03:00,350 --> 00:03:06,980 navigate us over to our other screen so inside of here I'm going to wrap my entire view. 35 00:03:07,030 --> 00:03:09,850 Remember this is inside of render item right now. 36 00:03:09,850 --> 00:03:17,050 I'll wrap the entire view with a touchable opacity closed off on the other side. 37 00:03:17,320 --> 00:03:24,840 I'm going to indent everything in between and we can do our on press so anytime someone presses this 38 00:03:24,840 --> 00:03:33,000 thing let's call navigation dot navigate and then provide a string of where we want to navigate to which 39 00:03:33,000 --> 00:03:37,770 in this case is going to be the route we just added into our app dot J.S. file the one called simply 40 00:03:37,800 --> 00:03:38,770 show. 41 00:03:38,900 --> 00:03:46,650 So I'll put in a string to navigate of capital s show and that should be at so I'll save this. 42 00:03:46,750 --> 00:03:52,190 We could do a quick test so add in a couple blog posts and I'll tap on one of these and I navigate over 43 00:03:52,230 --> 00:03:53,130 to the show screen. 44 00:03:53,130 --> 00:03:59,630 Very good now right away as soon as we start to think about showing a particular blog post on the screen. 45 00:03:59,630 --> 00:04:04,260 Well we need to know exactly what blog post the user just tapped. 46 00:04:04,310 --> 00:04:07,620 We've already taken a look at this previously on the last application we worked on. 47 00:04:07,660 --> 00:04:13,340 Remember anytime we call the navigate function right here we can optionally pass in a second argument 48 00:04:13,640 --> 00:04:19,430 that will convey some information to the next screen that we want to show so as a second argument to 49 00:04:19,430 --> 00:04:20,170 navigate. 50 00:04:20,300 --> 00:04:27,200 I'm gonna put in an object that has an I.D. property specifically the I.D. of the item that we want 51 00:04:27,200 --> 00:04:28,700 to show on that other screen. 52 00:04:28,700 --> 00:04:35,780 So I'll say I.D. is item dot I.D.. 53 00:04:35,860 --> 00:04:36,060 All right. 54 00:04:36,070 --> 00:04:38,290 So we can save this and that should be it. 55 00:04:38,290 --> 00:04:44,600 So now the show screen should be told exactly what I.D. of blog post it needs to show. 56 00:04:44,710 --> 00:04:46,130 It's now we've got this put together. 57 00:04:46,150 --> 00:04:50,200 Let's take another quick pause when we come back the next video we'll start to update our show screen. 58 00:04:50,200 --> 00:04:55,980 Have it access that I.D. that it's being given and look up the appropriate I.D. out of our log reducer 59 00:04:55,990 --> 00:04:57,740 or the blog context. 60 00:04:57,750 --> 00:04:59,530 So let's take care of that in just a moment.