1
00:00:00,750 --> 00:00:04,450
Before you move on there's one last thing I want mentioned about this navigation prop right here.

2
00:00:04,470 --> 00:00:09,390
So in the last video we made sure that we took that navigation prop coming from react navigation we

3
00:00:09,390 --> 00:00:13,700
got it inside of our search screen and then passed it as a prop down to our results list.

4
00:00:13,710 --> 00:00:18,650
Now I don't know about you but having to pass through that navigation object didn't quite feel right.

5
00:00:18,690 --> 00:00:23,310
In other words having to receive a prop inside a search screen when that component really didn't care

6
00:00:23,310 --> 00:00:27,150
about that prop at all and then just pass it through down to results list.

7
00:00:27,150 --> 00:00:30,690
Well it was a lot of extra code just to convey some information around.

8
00:00:31,230 --> 00:00:35,550
So in this video we're gonna figure out a way to essentially get this navigation prop directly into

9
00:00:35,550 --> 00:00:39,680
our results list without having to bother our search screen component.

10
00:00:39,840 --> 00:00:42,300
So let's figure out how to do this to get started.

11
00:00:42,300 --> 00:00:46,980
I'm going to go back to my search screen and I'm going to remove all mention of the navigation prop

12
00:00:46,980 --> 00:00:48,240
from this thing.

13
00:00:48,320 --> 00:00:53,580
So going to first find my const search screen right here and I'm going to delete that navigation property

14
00:00:53,580 --> 00:00:59,450
that we're de structuring of all then go down to my three different results list components.

15
00:00:59,510 --> 00:01:04,520
Here's one two and three and I'm going to delete the navigation prop from all three of these as well

16
00:01:05,330 --> 00:01:06,580
so delete that.

17
00:01:06,890 --> 00:01:12,710
I'll delete that and there's three and I'll save this file.

18
00:01:12,760 --> 00:01:18,040
So now our search screen has no mention of navigation which is actually probably a good thing because

19
00:01:18,040 --> 00:01:24,370
this component doesn't use that prop whatsoever so I'm going to close search screen and open up results

20
00:01:24,370 --> 00:01:25,040
list.

21
00:01:25,240 --> 00:01:30,520
Again this is the file that does want to get access to that navigation prop so to make sure that results

22
00:01:30,520 --> 00:01:38,110
list gets access to that navigation prop we're going to essentially kind of skip this entire prop system.

23
00:01:38,110 --> 00:01:42,640
We're going to kind of tell our stack navigator that we want to kind of just like take that navigation

24
00:01:42,640 --> 00:01:49,870
prop and have navigation be injected directly into our component to do so we're going to import a function

25
00:01:49,870 --> 00:01:55,390
from react navigation that's going to essentially wrap our component and return a new version of the

26
00:01:55,390 --> 00:01:59,150
component that will have the navigation prop automatically added in.

27
00:01:59,590 --> 00:02:06,610
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

28
00:02:06,820 --> 00:02:13,560
navigation from react dash navigation like so.

29
00:02:13,570 --> 00:02:17,440
So this is a very special function that we're gonna pass our component into.

30
00:02:17,470 --> 00:02:22,600
And like I said it's going to return a special version of our component that has access to the navigation

31
00:02:22,600 --> 00:02:26,080
prop that it needs to make use of with navigation.

32
00:02:26,080 --> 00:02:30,880
We'll go out down to the very bottom of the file I'll find my export default statement.

33
00:02:31,090 --> 00:02:34,760
So I'm going to wrap our export of results list with.

34
00:02:34,780 --> 00:02:37,720
With navigation like so.

35
00:02:38,050 --> 00:02:40,890
So we're no longer exporting results less directly.

36
00:02:40,900 --> 00:02:46,660
Instead we are exporting a special version of results list that has that extra code or kind of extra

37
00:02:46,660 --> 00:02:47,950
functionality tied to it.

38
00:02:47,950 --> 00:02:51,250
That's going to give results list access to navigation.

39
00:02:51,280 --> 00:02:56,890
So now behind the scenes our results list is still gonna get access to the navigation prop and we did

40
00:02:56,890 --> 00:02:58,990
not have to pass it down from a parent component.

41
00:02:59,680 --> 00:03:00,070
OK.

42
00:03:00,090 --> 00:03:08,420
So let's save this all test out my application once again so I'll tap on a restaurant here and I still

43
00:03:08,420 --> 00:03:09,170
navigate over.

44
00:03:09,440 --> 00:03:13,850
So clearly the results lowest component is still receiving the navigation prop but now it's kind of

45
00:03:13,850 --> 00:03:17,620
happening behind the scenes without us having to add in some extra code.

46
00:03:17,630 --> 00:03:18,500
All right very good.

47
00:03:19,190 --> 00:03:20,350
So now we wrap that up.

48
00:03:20,540 --> 00:03:22,990
Well let's take a quick pause and continue in just a minute.