Now that we can delete all of our different blog posts let's make sure that tapping on an individual
one navigates the user over to a new show screen.
Let's first get started by creating a new show screen component and hooking up to our stack navigator.
Back inside my code editor I can find my screens directory and inside there I'll make a new file called
show screen dot J.S. and then you guessed it.
Let's throw some boilerplate inside of here so I will import react from react.
I'll get view text and style sheet from React Native then create my show screen component and right
now yep let's return a view that has some text inside of it
will then create our style sheet.
So Conn styles is style sheet.
Create in our export default at the bottom for show screen good looks good.
So now we've got this but together we can hook it up to our stack navigator to do so I'll flip back
over to abduct J.S. at the top we'll import show screen from source screens show screen then we can
hook it up to our root configuration object so I'll do show is show screen all right.
So that definitely works.
It tells our stack navigator that there's this additional screen that we want to use to navigate to
but obviously it doesn't actually give our users the ability to get over there just yet.
Instead we have to make use of that navigation function that's included in the props object that's provided
by the stack navigator to any component that's shown directly by it.
So in other words we have to go into our index screen.
We have to receive that navigation prop and call that navigate function to change over to the show.
Anytime a user taps on a row so to get started we'll go back into our index screen inside of here I'll
receive that props object and we'll do a quick console log on there just to get a quick reminder of
what that props object looks like.
So I'll save the file.
I just got the update which means I should have the console log back inside my terminal back over here.
There's our props object once again remember we've looked at this several times now we've got that navigation
prop and inside of it is the navigate function so inside of indexed screen we will D structure off just
the prop we care about which is navigation.
Now we want to call the navigate function on there.
Anytime that a user taps this entire row so to do so we can once again make use of that touchable opacity
component we can wrap this entire block right here with another touchable opacity and add in an on press
handler to it and then inside the UN press handler we'll call our navigate function and that should
navigate us over to our other screen so inside of here I'm going to wrap my entire view.
Remember this is inside of render item right now.
I'll wrap the entire view with a touchable opacity closed off on the other side.
I'm going to indent everything in between and we can do our on press so anytime someone presses this
thing let's call navigation dot navigate and then provide a string of where we want to navigate to which
in this case is going to be the route we just added into our app dot J.S. file the one called simply
show.
So I'll put in a string to navigate of capital s show and that should be at so I'll save this.
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
to the show screen.
Very good now right away as soon as we start to think about showing a particular blog post on the screen.
Well we need to know exactly what blog post the user just tapped.
We've already taken a look at this previously on the last application we worked on.
Remember anytime we call the navigate function right here we can optionally pass in a second argument
that will convey some information to the next screen that we want to show so as a second argument to
navigate.
I'm gonna put in an object that has an I.D. property specifically the I.D. of the item that we want
to show on that other screen.
So I'll say I.D. is item dot I.D..
All right.
So we can save this and that should be it.
So now the show screen should be told exactly what I.D. of blog post it needs to show.
It's now we've got this put together.
Let's take another quick pause when we come back the next video we'll start to update our show screen.
Have it access that I.D. that it's being given and look up the appropriate I.D. out of our log reducer
or the blog context.
So let's take care of that in just a moment.