1
00:00:00,680 --> 00:00:03,800
In the less sexually added some styling or button tagged.

2
00:00:03,930 --> 00:00:06,410
But still nothing happens whenever we press it.

3
00:00:06,420 --> 00:00:12,630
Besides that visual effect all the touchable components out there are so touchable opacity touchable

4
00:00:12,630 --> 00:00:18,310
highlight and the other two that we looked at are some of the few components and Riak native that allows

5
00:00:18,310 --> 00:00:21,090
us to directly catch feedback from the user.

6
00:00:21,270 --> 00:00:22,470
So the idea here is simple.

7
00:00:22,470 --> 00:00:26,960
Whenever the user presses on something they expect something to occur right.

8
00:00:27,150 --> 00:00:34,440
So we need to add a hook or a catch something into our component that says whenever a user presses this

9
00:00:34,440 --> 00:00:40,080
thing right here runs some code you know open up the user's web browser maybe fetch a list of posts

10
00:00:40,080 --> 00:00:44,040
or delete a post or tweet something you know whatever it might be.

11
00:00:44,040 --> 00:00:47,160
So of course re-act native has us covered on this topic.

12
00:00:47,250 --> 00:00:53,460
We can optionally add a prop to the touchable opacity called on press.

13
00:00:53,460 --> 00:00:55,650
So let's do it now.

14
00:00:55,950 --> 00:01:02,790
We pass a function to on press and then when ever the touchable opacity is pressed by a user that function

15
00:01:02,790 --> 00:01:03,880
will be called.

16
00:01:03,900 --> 00:01:06,780
So let's just throw in some dummy function right now.

17
00:01:06,960 --> 00:01:11,820
Or throwing a console log of preste like so.

18
00:01:11,820 --> 00:01:14,180
So I passed a federal function.

19
00:01:14,640 --> 00:01:20,610
So my expectation is that whenever a user presses on a touch of capacity I should see a console log

20
00:01:20,610 --> 00:01:21,790
of preste.

21
00:01:21,810 --> 00:01:31,060
So let's give this a shot out and simulator of First bring up my chrome debugger all refresh my simulator.

22
00:01:33,590 --> 00:01:41,230
So then I'll do my click here and you'll notice that my console over here is lagging behind just a little

23
00:01:41,230 --> 00:01:41,400
bit.

24
00:01:41,410 --> 00:01:46,230
But eventually I get up press press press press first press so on and so on.

25
00:01:46,360 --> 00:01:46,640
OK.

26
00:01:46,660 --> 00:01:48,900
So definitely the console log appears.

27
00:01:49,150 --> 00:01:49,880
So the trick here.

28
00:01:49,900 --> 00:01:55,180
The real challenge is just remembering a bit of trivia about how we handle user input.

29
00:01:55,540 --> 00:02:02,920
If we want to handle a tap event from the user we can add a touchable highlight or a opacity tag Whichever

30
00:02:02,920 --> 00:02:10,480
one we might want and create an on press handler the press handler will then be called whenever the

31
00:02:10,480 --> 00:02:12,840
user taps on the element.

32
00:02:12,930 --> 00:02:14,560
So that's that's like step one here.

33
00:02:14,560 --> 00:02:20,550
Now we know when a user is tapping on this thing but we saw two more challenges.

34
00:02:20,860 --> 00:02:26,420
Remember our ultimate goal is to direct the user to a Web site where they can actually buy sell album.

35
00:02:26,640 --> 00:02:31,520
Second Right now we are creating this on click handler inside of this component.

36
00:02:31,520 --> 00:02:33,710
This like button component right.

37
00:02:33,880 --> 00:02:36,240
But we want this button to be reusable.

38
00:02:36,340 --> 00:02:42,100
So in other words we don't want this button to know that hey whenever you are pressed you should open

39
00:02:42,100 --> 00:02:47,020
like some web site because that would completely defeat the purpose of making a reusable component.

40
00:02:47,140 --> 00:02:55,240
If we put a function right here that said whenever you're pressed open up a Web site it would be a very

41
00:02:55,240 --> 00:02:57,430
particular use case for a button.

42
00:02:57,430 --> 00:03:03,280
So instead we need to have some way to make sure we've got very generic very general logic inside of

43
00:03:03,280 --> 00:03:08,380
this button component right here where we can reuse it with other components completely different use

44
00:03:08,380 --> 00:03:10,750
cases in the future.

45
00:03:10,810 --> 00:03:12,830
So let's tackle that challenge first.

46
00:03:13,090 --> 00:03:14,170
Here's how going to take care of it.

47
00:03:14,170 --> 00:03:18,430
First we're going to kind of walk through the code and then we're going to talk about are you saying

48
00:03:18,430 --> 00:03:21,400
we're going to lay out the code and we'll talk about exactly what's going on.

49
00:03:21,730 --> 00:03:26,740
So first I'm going to flip over to Allum detail so here's album detail.

50
00:03:26,740 --> 00:03:31,670
I'm inside the render function and I'm going to find our button tagged towards the bottom.

51
00:03:31,900 --> 00:03:34,790
So here's my card section inside of album detail.

52
00:03:34,960 --> 00:03:42,740
Here's my button tag I'm going to press or excuse me I'm going to provide a prop of on press this button

53
00:03:44,050 --> 00:03:49,070
and inside of it I'm going to love the album's title.

54
00:03:49,400 --> 00:03:55,040
So I remember the album detail has a title property floating around so I'm going to cancel that title.

55
00:03:55,450 --> 00:04:00,390
So now I am passing a prop called on press the button.

56
00:04:00,390 --> 00:04:07,000
One thing I want to make really clear here this on press is not going to be just like naturally just

57
00:04:07,000 --> 00:04:09,070
magically consumed by the button.

58
00:04:09,200 --> 00:04:13,720
We have to make sure that we actually wire up this on press prop inside the button.

59
00:04:13,780 --> 00:04:17,820
I could have just as easily called this thing when pressed or something.

60
00:04:17,890 --> 00:04:20,140
You know I could have called it anything I wanted.

61
00:04:20,140 --> 00:04:23,400
I'm just choosing to call the prop on press.

62
00:04:23,590 --> 00:04:29,350
But the point I'm really trying to convey here is calling this function on press is not the same as

63
00:04:29,350 --> 00:04:36,490
passing the touchable opacity in on press prop in the case of the touchable touch of opacity isn't expecting

64
00:04:36,580 --> 00:04:38,200
a prop of press.

65
00:04:38,410 --> 00:04:44,240
But right now as our button is put together there's no concept of an unpressed prop for the button.

66
00:04:44,290 --> 00:04:49,630
So we need to make sure that our button actually makes use of that on press callback that we just added

67
00:04:49,630 --> 00:04:51,510
in here.

68
00:04:51,670 --> 00:04:56,980
So when we go back to button and I'm going to say hey touchable opacity whenever you get pressed whenever

69
00:04:56,980 --> 00:05:02,970
someone presses you I want you to run a function that is provided by the parent component.

70
00:05:03,220 --> 00:05:08,330
And so that parent component you know the thing that we want to run here is coming from the prop's object.

71
00:05:08,330 --> 00:05:11,030
It's going to be prop's dot on press.

72
00:05:11,050 --> 00:05:16,080
So let's do a little bit of destructuring to get access to that callback.

73
00:05:16,120 --> 00:05:23,170
So years on press and just be really clear this on press reference right here is exactly equal to this

74
00:05:23,170 --> 00:05:25,540
fadder a function inside of the album detail.

75
00:05:25,600 --> 00:05:29,160
So same exact function being passed down as a prop.

76
00:05:29,600 --> 00:05:37,630
Now inside the button will say whenever you get pressed I want you to run that function that was declared

77
00:05:37,670 --> 00:05:38,340
the parent.

78
00:05:38,570 --> 00:05:38,990
That's it.

79
00:05:39,020 --> 00:05:40,230
That's all you have to do.

80
00:05:40,610 --> 00:05:45,720
So now our button should be a little bit more usable but let's test this out in the simulator first.

81
00:05:45,740 --> 00:05:47,340
Just to make sure it's working.

82
00:05:47,840 --> 00:05:52,780
So now our expectation is that whenever we press on a button we should see the album's title because

83
00:05:52,790 --> 00:05:54,380
it's a lot.

84
00:05:54,760 --> 00:05:58,480
So in a way just a minute from my console to kind of warm up.

85
00:05:58,580 --> 00:05:59,810
There you go.

86
00:06:00,440 --> 00:06:02,930
All right so there is Taylor Swift.

87
00:06:03,140 --> 00:06:05,170
I can go down to the next album.

88
00:06:06,520 --> 00:06:12,280
Fearless speak now and so on.

89
00:06:12,660 --> 00:06:13,150
Let's.

90
00:06:13,230 --> 00:06:13,770
What the heck.

91
00:06:13,890 --> 00:06:14,180
OK.

92
00:06:14,200 --> 00:06:14,760
99.

93
00:06:14,790 --> 00:06:15,680
There you get the idea.

94
00:06:15,690 --> 00:06:17,220
You get the idea.

95
00:06:18,060 --> 00:06:18,390
OK.

96
00:06:18,390 --> 00:06:20,940
So just read you one last time.

97
00:06:20,940 --> 00:06:24,500
This is how we make reusable components with reactor I should say.

98
00:06:24,510 --> 00:06:28,940
This is another technique that we use for making reusable components with re-act native.

99
00:06:29,190 --> 00:06:35,430
I realized that my button component right here needs to do something differently every single time the

100
00:06:35,430 --> 00:06:37,300
user presses on it across.

101
00:06:37,310 --> 00:06:41,160
You know however many times I make a button components on my application.

102
00:06:41,370 --> 00:06:46,770
So rather than telling the button hey whenever you're pressed please open some web site.

103
00:06:46,910 --> 00:06:49,440
In hard coding not inside the button component.

104
00:06:49,440 --> 00:06:56,310
I instead decided to add in a prop of on press and I tell the button hey whenever you get called call

105
00:06:56,310 --> 00:07:02,610
that Paran prop that was passed to you know call that call back and whatever specific behavior was in

106
00:07:02,610 --> 00:07:05,110
there go ahead and let that thing run.

107
00:07:05,950 --> 00:07:06,320
OK.

108
00:07:06,360 --> 00:07:09,420
So this is good.

109
00:07:09,560 --> 00:07:10,580
Good call right here.

110
00:07:10,620 --> 00:07:12,140
Let's continue the next section.

111
00:07:12,180 --> 00:07:17,750
And we're going to figure out how to open a website whenever user presses on that button.