As we were just discussing the last big thing we have to do is make sure that we show this separate
screen over here.
So let's get started working on it right away.
We're going to first create a separate screen component and then wired up to our stack navigator so
that a user can navigate to it anytime they tap on one of these different restaurants.
OK.
So back inside my code Ed I'll find the screen directory and inside they're going to make a new file
called results show screen dot J.S. and then inside of here we'll throw together a little bit of boilerplate
around a typical react component.
So I will import react from react.
I will import view text and style sheet from React Native.
I'll do my contact results show screen and as usual right now I'll return a View element in inside there
I'll put a text that just says results show will then create our style sheet
and then export default results show screen OK.
So not that bad.
Now remember anytime we create a new screen we need to wire it up inside of our apt J.S. file to our
stack navigator.
We went through this process like six or seven times in the last application we worked on.
So it's gonna be the exact same thing this time around.
I'll open up my update J.S. file.
Here's our route configuration object that we want to wire up our new screen too.
So at the top I'm going to import the screen we just created so I'll do an import results show screen
from source screens results show screen and I'll wire that up on my route configuration object.
So results show is results show screen OK.
So not too bad.
So we can save this.
And well I've got a little bit of a typo here that is not related.
I would just made a little bit of a change to my code between last video on this one.
So we should still see our application.
So now the issue is that although we've wired up this new screen to our app we don't really have any
way of navigating a user over to it.
Remember how he took care of navigation on the last application we worked on whenever a screen is rendered
by react navigation stack navigator the stack navigator is going to see me the stack navigator is going
to throw a set of props over to our different screens and inside of this props object is a object that
has a lot of different functions on it related to changing the screen that the user is currently looking
at.
Let's get a quick reminder of what that props object looks like.
By adding in a console log to our search screen component.
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
log of props inside their I'll save this and we'll flip back over to our terminal and see what props
react navigation gives to us.
OK.
So here's my terminal once again here's the console log.
So this is the entire big props object inside there is a navigation property.
Remember that's the one we care about.
This navigation prop is what's given to us by react navigation inside that navigation prop is a big
object and one of the functions inside that object is called navigate.
That's the function that we call anytime we want to show a different screen to a user.
So we want to get make sure we get that function right there.
Now there's just one little challenge this time around I'm going to flip back on my code.
Ed really quickly.
Here we go so last time in the last application we're working on we took that prop subject we pulled
off that navigate function and we called the navigate function from a component that we had been returning
inside of the same component.
In other words we just took that function and called it from an on press callback that we had inside
of a button element that we're showing right here.
But this time around we do not want to call that navigate function directly from our search screen.
Instead we need to pass that function down to one of our child components specifically we want to pass
that function down to the component that is showing this big restaurant right here.
So we want to detect when a user taps on that given restaurant.
So we need to make sure we pass the navigate function down to the appropriate sub component that is
being displayed by search screen.
So in other words we just need to kind of shepherd some information around.
So let's take another quick pause right here when we come back the next video we're gonna make sure
that we take out that navigate function from our props object and then pass it down to the appropriate
child components where it can be made use of in the correct location.
So a quick pause and we'll take care of that in the next video.