Before you move on there's one last thing I want mentioned about this navigation prop right here.
So in the last video we made sure that we took that navigation prop coming from react navigation we
got it inside of our search screen and then passed it as a prop down to our results list.
Now I don't know about you but having to pass through that navigation object didn't quite feel right.
In other words having to receive a prop inside a search screen when that component really didn't care
about that prop at all and then just pass it through down to results list.
Well it was a lot of extra code just to convey some information around.
So in this video we're gonna figure out a way to essentially get this navigation prop directly into
our results list without having to bother our search screen component.
So let's figure out how to do this to get started.
I'm going to go back to my search screen and I'm going to remove all mention of the navigation prop
from this thing.
So going to first find my const search screen right here and I'm going to delete that navigation property
that we're de structuring of all then go down to my three different results list components.
Here's one two and three and I'm going to delete the navigation prop from all three of these as well
so delete that.
I'll delete that and there's three and I'll save this file.
So now our search screen has no mention of navigation which is actually probably a good thing because
this component doesn't use that prop whatsoever so I'm going to close search screen and open up results
list.
Again this is the file that does want to get access to that navigation prop so to make sure that results
list gets access to that navigation prop we're going to essentially kind of skip this entire prop system.
We're going to kind of tell our stack navigator that we want to kind of just like take that navigation
prop and have navigation be injected directly into our component to do so we're going to import a function
from react navigation that's going to essentially wrap our component and return a new version of the
component that will have the navigation prop automatically added in.
So to do so I can go to the top of results list and I'm going to add in a new import statement for with
navigation from react dash navigation like so.
So this is a very special function that we're gonna pass our component into.
And like I said it's going to return a special version of our component that has access to the navigation
prop that it needs to make use of with navigation.
We'll go out down to the very bottom of the file I'll find my export default statement.
So I'm going to wrap our export of results list with.
With navigation like so.
So we're no longer exporting results less directly.
Instead we are exporting a special version of results list that has that extra code or kind of extra
functionality tied to it.
That's going to give results list access to navigation.
So now behind the scenes our results list is still gonna get access to the navigation prop and we did
not have to pass it down from a parent component.
OK.
So let's save this all test out my application once again so I'll tap on a restaurant here and I still
navigate over.
So clearly the results lowest component is still receiving the navigation prop but now it's kind of
happening behind the scenes without us having to add in some extra code.
All right very good.
So now we wrap that up.
Well let's take a quick pause and continue in just a minute.