1
00:00:00,920 --> 00:00:05,610
In the last video we spoke about how we need to take that navigate prop and pass it down to the appropriate

2
00:00:05,610 --> 00:00:10,380
child components so it can be called only when a user taps on the actual restaurant.

3
00:00:10,380 --> 00:00:11,760
So let's get to it.

4
00:00:11,820 --> 00:00:15,960
The first thing we're gonna do is d structure off the only property that we care about off that props

5
00:00:15,960 --> 00:00:17,800
object as a quick reminder.

6
00:00:17,940 --> 00:00:22,890
The only property we care about is the navigation object so we want to pull off the entire navigation

7
00:00:22,890 --> 00:00:26,720
object and pass it down to some child component.

8
00:00:26,840 --> 00:00:32,720
So back inside of search screen I'm going to delete props and replace it with a set of friends and curly

9
00:00:32,720 --> 00:00:41,120
braces and I'll pull off the navigation prop then we'll go down to our results list and to all three

10
00:00:41,120 --> 00:00:46,120
of these we're gonna pass down that navigation prop so navigation is navigation.

11
00:00:46,120 --> 00:00:51,190
We're not going to rename it just because we want to continue to be called navigation and then I'm going

12
00:00:51,190 --> 00:00:54,580
to copy paste that to the other two results list as well.

13
00:00:54,820 --> 00:00:59,360
So there's navigation is navigation and navigation is navigation.

14
00:00:59,380 --> 00:01:01,300
Now we've got all three results list.

15
00:01:01,330 --> 00:01:04,160
Each one has the navigation prop.

16
00:01:04,370 --> 00:01:11,080
So now we can open up our results list and in addition to receiving Title and results we can also receive

17
00:01:11,080 --> 00:01:15,010
the navigation prop.

18
00:01:15,090 --> 00:01:20,520
So now we want to make sure that we detect any time a user taps on that results detail right there in

19
00:01:20,520 --> 00:01:22,410
order to detect a happy event.

20
00:01:22,410 --> 00:01:27,510
Remember we can make use of that touchable opacity primitive element from React Native.

21
00:01:27,510 --> 00:01:32,640
The nice thing about touchable opacity is that it's going to kind of fade out any child elements placed

22
00:01:32,640 --> 00:01:33,380
inside of it.

23
00:01:33,380 --> 00:01:38,460
Anytime a user taps on it and so a user gets some immediate feedback and understands Oh I just tapped

24
00:01:38,460 --> 00:01:39,810
on that thing.

25
00:01:39,810 --> 00:01:47,290
So from React Native at the very top I'm going to import touchable opacity then inside my render item

26
00:01:47,920 --> 00:01:51,720
I'm going to return a multi line Jay sex expression from here.

27
00:01:51,850 --> 00:01:57,730
So I'm going to wrap the existing results detail with a set of parentheses and New Line it.

28
00:01:57,790 --> 00:02:01,750
Don't forget to clean up the semicolon at the very end there if you had a semicolon on it.

29
00:02:02,260 --> 00:02:06,340
And then I'm going to wrap that thing with a touchable opacity

30
00:02:11,150 --> 00:02:15,100
and then on touchable opacity we can add in our on press callback.

31
00:02:15,250 --> 00:02:20,780
So going to pass the thing and Arrow function anytime a user taps on anything enclosed by this touchable

32
00:02:20,780 --> 00:02:25,010
opacity we're gonna call navigation dot navigate.

33
00:02:25,010 --> 00:02:32,390
So navigation dot navigate and we'll pass in a string telling react or the stack navigator what screen

34
00:02:32,390 --> 00:02:33,870
we want to navigate to.

35
00:02:34,100 --> 00:02:39,060
Remember we just added in that new screen with a root name of results show.

36
00:02:39,140 --> 00:02:46,650
So I'm going to call navigate with a string of results show and I'll save this.

37
00:02:46,670 --> 00:02:52,220
I get a big jump of my code here again that's from my code for matter everything that you see is 1 percent

38
00:02:52,220 --> 00:02:56,230
equivalent to what I had before and now we can test this thing out.

39
00:02:56,410 --> 00:03:02,200
So I'll flip back over tap on the first thing right there and I navigate over to results show.

40
00:03:02,200 --> 00:03:03,210
Perfect.

41
00:03:03,430 --> 00:03:05,960
And I built to do the same thing on Android as well.

42
00:03:05,980 --> 00:03:07,420
Yep looks good.

43
00:03:08,790 --> 00:03:09,070
Okay.

44
00:03:09,140 --> 00:03:10,750
That's definitely good progress.

45
00:03:10,760 --> 00:03:15,050
So now we can't take a pause right here when we come back the next video we'll start to develop our

46
00:03:15,050 --> 00:03:17,000
results show component a little bit more.