In the last video we spoke about how we need to take that navigate prop and pass it down to the appropriate
child components so it can be called only when a user taps on the actual restaurant.
So let's get to it.
The first thing we're gonna do is d structure off the only property that we care about off that props
object as a quick reminder.
The only property we care about is the navigation object so we want to pull off the entire navigation
object and pass it down to some child component.
So back inside of search screen I'm going to delete props and replace it with a set of friends and curly
braces and I'll pull off the navigation prop then we'll go down to our results list and to all three
of these we're gonna pass down that navigation prop so navigation is navigation.
We're not going to rename it just because we want to continue to be called navigation and then I'm going
to copy paste that to the other two results list as well.
So there's navigation is navigation and navigation is navigation.
Now we've got all three results list.
Each one has the navigation prop.
So now we can open up our results list and in addition to receiving Title and results we can also receive
the navigation prop.
So now we want to make sure that we detect any time a user taps on that results detail right there in
order to detect a happy event.
Remember we can make use of that touchable opacity primitive element from React Native.
The nice thing about touchable opacity is that it's going to kind of fade out any child elements placed
inside of it.
Anytime a user taps on it and so a user gets some immediate feedback and understands Oh I just tapped
on that thing.
So from React Native at the very top I'm going to import touchable opacity then inside my render item
I'm going to return a multi line Jay sex expression from here.
So I'm going to wrap the existing results detail with a set of parentheses and New Line it.
Don't forget to clean up the semicolon at the very end there if you had a semicolon on it.
And then I'm going to wrap that thing with a touchable opacity
and then on touchable opacity we can add in our on press callback.
So going to pass the thing and Arrow function anytime a user taps on anything enclosed by this touchable
opacity we're gonna call navigation dot navigate.
So navigation dot navigate and we'll pass in a string telling react or the stack navigator what screen
we want to navigate to.
Remember we just added in that new screen with a root name of results show.
So I'm going to call navigate with a string of results show and I'll save this.
I get a big jump of my code here again that's from my code for matter everything that you see is 1 percent
equivalent to what I had before and now we can test this thing out.
So I'll flip back over tap on the first thing right there and I navigate over to results show.
Perfect.
And I built to do the same thing on Android as well.
Yep looks good.
Okay.
That's definitely good progress.
So now we can't take a pause right here when we come back the next video we'll start to develop our
results show component a little bit more.