1
00:00:02,330 --> 00:00:03,970
So we can add our elements here,

2
00:00:03,970 --> 00:00:08,150
what we're not able to do is delete them and that's the next step

3
00:00:08,190 --> 00:00:10,880
I want to take, the next thing I want to implement here.

4
00:00:10,960 --> 00:00:16,420
We got our FlatList with all these goal items and it would be nice if we could tap such a goal item,

5
00:00:16,450 --> 00:00:18,010
so such a list item

6
00:00:18,130 --> 00:00:21,960
and when we tap it, we simply remove it from the list.

7
00:00:21,970 --> 00:00:27,550
Now the good thing is we can uniquely identify every item because every item here has an ID, so we

8
00:00:27,550 --> 00:00:30,590
can use that ID for it and getting rid of the item,

9
00:00:30,760 --> 00:00:35,240
the missing thing is that we can tap it. Now on our own component, 

10
00:00:35,260 --> 00:00:38,730
we can't simply add onPress or anything like that,

11
00:00:38,740 --> 00:00:44,040
this will not work, if I console log

12
00:00:44,050 --> 00:00:46,300
does that work here,

13
00:00:46,300 --> 00:00:49,570
we'll not see that log as soon as I press the item.

14
00:00:49,570 --> 00:00:55,990
So let me show this to you, if you let this reload here and then we again learn React Native and I add

15
00:00:55,990 --> 00:01:02,050
this and I tap this multiple times here, I'm tapping this, you don't see the output here and it makes

16
00:01:02,050 --> 00:01:07,990
sense, this is a custom component and onPress would now simply be a prop we pass to this component, this

17
00:01:07,990 --> 00:01:13,420
prop would be connected to this function but nothing is triggering that prop from inside the component.

18
00:01:14,020 --> 00:01:18,850
So we'll have to go into that component and make sure that this view is pressable.

19
00:01:19,030 --> 00:01:24,200
Now actually, a view has various props that help us with listening to events,

20
00:01:24,280 --> 00:01:30,190
if you type on here, your IDE, if you're using Visual Studio Code should give you some autocompletion

21
00:01:30,570 --> 00:01:33,830
and you see there are quite a lot of events you can listen to,

22
00:01:33,940 --> 00:01:40,150
for example onTouchEnd actually helps us with listening when the user basically touch this and is done

23
00:01:40,180 --> 00:01:41,450
touching this.

24
00:01:41,620 --> 00:01:48,340
The issue with that is that onTouchEnd and a couple of other listeners we got here are on a too low

25
00:01:48,430 --> 00:01:49,300
level.

26
00:01:49,480 --> 00:01:56,020
We can set up very detailed listeners to various events here but for example onTouchEnd doesn't tell us

27
00:01:56,020 --> 00:01:57,960
how long the user pressed this

28
00:01:58,090 --> 00:02:03,640
and if you ever need to find out if it was a long press or a short press, you would have to manually

29
00:02:03,640 --> 00:02:10,090
set a timer when the user starts touching this with onTouchStart, wait for onTouchEnd and then manually

30
00:02:10,090 --> 00:02:12,480
decide if that was long enough or not.

31
00:02:12,610 --> 00:02:16,870
It's typically not what you want to do though, it's of course great that you have the full flexibility

32
00:02:16,870 --> 00:02:24,100
of doing that but if you want these standard touch events like long press, well then this is not ideal

33
00:02:24,100 --> 00:02:26,770
because you would have to do all the heavy lifting on your own,

34
00:02:26,770 --> 00:02:31,390
you would have to write a lot of code to find out which kind of touch it was on your own.

35
00:02:31,390 --> 00:02:34,200
The good thing is, React Native has you covered.

36
00:02:34,240 --> 00:02:40,660
There is a built-in touchable component which you can import and touchable is a component you can wrap

37
00:02:40,660 --> 00:02:42,670
around any other component you have,

38
00:02:42,760 --> 00:02:49,660
so around any view or any text or whatever you have and it's not visible, it doesn't render anything

39
00:02:49,660 --> 00:02:56,200
you can see on the screen but it will wrap this and register the touch event on the child you wrap touchable

40
00:02:56,200 --> 00:03:03,190
around and touchable then gives you finished touch event, so more detailed touch events which were pre

41
00:03:03,190 --> 00:03:09,070
configured for you. Now to be exact, touchable like this can't be used as a component, it acts more as

42
00:03:09,070 --> 00:03:13,900
a parent class for React Native because there are multiple specific versions of touchable which you then

43
00:03:13,900 --> 00:03:15,040
actually should use,

44
00:03:15,160 --> 00:03:21,730
for example there is touchable opacity. Let's use touchable opacity instead of touchable because that

45
00:03:21,730 --> 00:03:23,980
now really is a component you can use

46
00:03:23,980 --> 00:03:30,760
and now here, you will see that if you type on, you get a couple of high level touch events you can listen

47
00:03:30,760 --> 00:03:34,140
to, like onPress or onLongPress

48
00:03:34,210 --> 00:03:37,120
and that's of course way more helpful.

49
00:03:37,120 --> 00:03:42,910
Now here, I can listen to onPress which means it's a normal press event as we could listen

50
00:03:42,910 --> 00:03:49,290
to on the button and when this is triggered, what we can do of course we can execute any code we want

51
00:03:49,360 --> 00:03:54,520
and for example, we could forward this to let's say props.onDelete.

52
00:03:54,520 --> 00:04:00,400
So we call a function that was passed into this component on the onDelete prop,

53
00:04:00,410 --> 00:04:05,980
we're not setting this prop right now but we're now calling something on this prop and now we can go

54
00:04:05,980 --> 00:04:12,610
to the place, to app.js where we use goal item and add the onDelete prop instead of onPress and onDelete

55
00:04:12,610 --> 00:04:18,820
should now point at a function because we are expecting a function here in our goal item because

56
00:04:18,820 --> 00:04:25,030
onPress expects a function and we're simply forwarding what onDelete points to onPress.

57
00:04:25,840 --> 00:04:32,750
So onDelete should point at a function and it is but only a function that prints does that work. Nonetheless,

58
00:04:32,980 --> 00:04:34,480
that's at least good for testing,

59
00:04:34,480 --> 00:04:43,310
so let's see if I learn React Native and I add this and I tap this here multiple times, you see I get

60
00:04:43,310 --> 00:04:49,940
this feedback, this slight opacity effect here upon pressing and if I do this, you see that here in the

61
00:04:49,940 --> 00:04:56,070
log, so that did work. And you also see the effect of touchable opacity,

62
00:04:56,110 --> 00:05:02,560
this actually gives us a visual feedback about our touch by changing the opacity of the element we

63
00:05:02,560 --> 00:05:03,600
touched.

64
00:05:03,610 --> 00:05:10,930
You can also control this opacity by setting the active opacity prop here, on touchable opacity and setting

65
00:05:10,930 --> 00:05:13,620
this to a number, for example to .8

66
00:05:13,750 --> 00:05:18,120
and now this will be way less transparent for example if you press it.

67
00:05:18,130 --> 00:05:23,980
So now if I learned React Native here and I press this, the opacity effect is way less strong as you

68
00:05:23,980 --> 00:05:29,860
can see. So you can configure this to your needs and with that, you can not only add a nice effect but

69
00:05:29,860 --> 00:05:35,980
of course also listen to the press effect. Now touchable opacity is not the only component you

70
00:05:35,980 --> 00:05:43,720
can use though, besides touchable opacity, you also have touchable highlight, so let's use touchable highlight

71
00:05:43,750 --> 00:05:48,850
now instead to see how that behaves and the general idea is the same with touchable highlight,

72
00:05:48,880 --> 00:05:55,570
you can also listen to press events, so to these high level events, these preconfigured events but the

73
00:05:55,570 --> 00:05:57,370
visual feedback will be a different one.

74
00:05:57,460 --> 00:06:01,980
Here, we'll not change the opacity of the wrapped element but the background color.

75
00:06:02,020 --> 00:06:06,520
So now if I learn React Native and I tap this,

76
00:06:06,520 --> 00:06:11,830
you see now the background color changes to black and of course, this here in this case is not the visual

77
00:06:11,830 --> 00:06:17,260
effect we want. Now you can also configure active opacity there if you want,

78
00:06:17,260 --> 00:06:22,660
you can configure which delay is assumed for a long press, you could have done that on touchable opacity

79
00:06:22,660 --> 00:06:29,080
as well, so you can configure that effect and you can simply play around with that to get a feeling for

80
00:06:29,080 --> 00:06:30,360
how to use it.

81
00:06:30,700 --> 00:06:40,240
Besides touchable opacity and touchable highlight, you also have touchable native feedback and that only

82
00:06:40,240 --> 00:06:45,150
works on Android and for now, you don't know how to find out whether this runs on Android or not,

83
00:06:45,190 --> 00:06:48,550
I'll show you how to determine which platform you're running on later,

84
00:06:48,550 --> 00:06:53,980
for now let's use that and you won't be able to test this on the iPhone simulator but here on Android,

85
00:06:53,980 --> 00:06:58,140
if I now add this, you will see that you get this ripple effect

86
00:06:58,140 --> 00:07:04,930
now if you test this here and of course, you can also configure this effect here with props you can set 

87
00:07:05,090 --> 00:07:10,400
and as always, the official docs are also a great place to go if you want to learn more about how to

88
00:07:10,400 --> 00:07:11,080
configure this,

89
00:07:11,090 --> 00:07:14,360
so having that ripple effect can be nice on Android too.

90
00:07:14,420 --> 00:07:19,940
And last but not least, there also is touchable without feedback and this does what the name suggests,

91
00:07:20,000 --> 00:07:25,700
it allows you to register these events but it gives no visual feedback because sometimes you just want

92
00:07:25,700 --> 00:07:31,970
to have something which you can tap but where you indeed don't want to give any feedback to the user.

93
00:07:32,240 --> 00:07:34,740
So here, I can tap this as much as I want,

94
00:07:34,820 --> 00:07:37,760
the tap is registered and hence I see the output here

95
00:07:37,760 --> 00:07:44,210
but we get no visual feedback. So these touchable components are really important in React Native because

96
00:07:44,240 --> 00:07:51,140
they allow you to attach the normal high level touch listeners, like onPress, onLongPress and so on to

97
00:07:51,230 --> 00:07:57,080
any component in React Native and with that you can build your own touchable components, your own buttons,

98
00:07:57,080 --> 00:07:59,980
your own links, whatever you need.

99
00:07:59,980 --> 00:08:08,800
Now here, I'll go back to touchable opacity because I like this opacity effect but really, feel free to

100
00:08:08,800 --> 00:08:14,410
pause the video here and play around with these different touchable effects and play around with the

101
00:08:14,410 --> 00:08:16,490
different configurations you can apply there,

102
00:08:16,570 --> 00:08:19,990
obviously we'll heavily use touchable throughout this entire course,

103
00:08:19,990 --> 00:08:26,020
so we'll see them there plenty of times but this is also a great place for you to get started with these

104
00:08:26,140 --> 00:08:27,940
components. As I said,

105
00:08:27,940 --> 00:08:33,040
I'll go with touchable opacity here and now the next step is to make sure that we don't just log something

106
00:08:33,040 --> 00:08:36,700
to the console but that we actually delete the item which was pressed.