So we can add our elements here,
what we're not able to do is delete them and that's the next step
I want to take, the next thing I want to implement here.
We got our FlatList with all these goal items and it would be nice if we could tap such a goal item,
so such a list item
and when we tap it, we simply remove it from the list.
Now the good thing is we can uniquely identify every item because every item here has an ID, so we
can use that ID for it and getting rid of the item,
the missing thing is that we can tap it. Now on our own component,
we can't simply add onPress or anything like that,
this will not work, if I console log
does that work here,
we'll not see that log as soon as I press the item.
So let me show this to you, if you let this reload here and then we again learn React Native and I add
this and I tap this multiple times here, I'm tapping this, you don't see the output here and it makes
sense, this is a custom component and onPress would now simply be a prop we pass to this component, this
prop would be connected to this function but nothing is triggering that prop from inside the component.
So we'll have to go into that component and make sure that this view is pressable.
Now actually, a view has various props that help us with listening to events,
if you type on here, your IDE, if you're using Visual Studio Code should give you some autocompletion
and you see there are quite a lot of events you can listen to,
for example onTouchEnd actually helps us with listening when the user basically touch this and is done
touching this.
The issue with that is that onTouchEnd and a couple of other listeners we got here are on a too low
level.
We can set up very detailed listeners to various events here but for example onTouchEnd doesn't tell us
how long the user pressed this
and if you ever need to find out if it was a long press or a short press, you would have to manually
set a timer when the user starts touching this with onTouchStart, wait for onTouchEnd and then manually
decide if that was long enough or not.
It's typically not what you want to do though, it's of course great that you have the full flexibility
of doing that but if you want these standard touch events like long press, well then this is not ideal
because you would have to do all the heavy lifting on your own,
you would have to write a lot of code to find out which kind of touch it was on your own.
The good thing is, React Native has you covered.
There is a built-in touchable component which you can import and touchable is a component you can wrap
around any other component you have,
so around any view or any text or whatever you have and it's not visible, it doesn't render anything
you can see on the screen but it will wrap this and register the touch event on the child you wrap touchable
around and touchable then gives you finished touch event, so more detailed touch events which were pre
configured for you. Now to be exact, touchable like this can't be used as a component, it acts more as
a parent class for React Native because there are multiple specific versions of touchable which you then
actually should use,
for example there is touchable opacity. Let's use touchable opacity instead of touchable because that
now really is a component you can use
and now here, you will see that if you type on, you get a couple of high level touch events you can listen
to, like onPress or onLongPress
and that's of course way more helpful.
Now here, I can listen to onPress which means it's a normal press event as we could listen
to on the button and when this is triggered, what we can do of course we can execute any code we want
and for example, we could forward this to let's say props.onDelete.
So we call a function that was passed into this component on the onDelete prop,
we're not setting this prop right now but we're now calling something on this prop and now we can go
to the place, to app.js where we use goal item and add the onDelete prop instead of onPress and onDelete
should now point at a function because we are expecting a function here in our goal item because
onPress expects a function and we're simply forwarding what onDelete points to onPress.
So onDelete should point at a function and it is but only a function that prints does that work. Nonetheless,
that's at least good for testing,
so let's see if I learn React Native and I add this and I tap this here multiple times, you see I get
this feedback, this slight opacity effect here upon pressing and if I do this, you see that here in the
log, so that did work. And you also see the effect of touchable opacity,
this actually gives us a visual feedback about our touch by changing the opacity of the element we
touched.
You can also control this opacity by setting the active opacity prop here, on touchable opacity and setting
this to a number, for example to .8
and now this will be way less transparent for example if you press it.
So now if I learned React Native here and I press this, the opacity effect is way less strong as you
can see. So you can configure this to your needs and with that, you can not only add a nice effect but
of course also listen to the press effect. Now touchable opacity is not the only component you
can use though, besides touchable opacity, you also have touchable highlight, so let's use touchable highlight
now instead to see how that behaves and the general idea is the same with touchable highlight,
you can also listen to press events, so to these high level events, these preconfigured events but the
visual feedback will be a different one.
Here, we'll not change the opacity of the wrapped element but the background color.
So now if I learn React Native and I tap this,
you see now the background color changes to black and of course, this here in this case is not the visual
effect we want. Now you can also configure active opacity there if you want,
you can configure which delay is assumed for a long press, you could have done that on touchable opacity
as well, so you can configure that effect and you can simply play around with that to get a feeling for
how to use it.
Besides touchable opacity and touchable highlight, you also have touchable native feedback and that only
works on Android and for now, you don't know how to find out whether this runs on Android or not,
I'll show you how to determine which platform you're running on later,
for now let's use that and you won't be able to test this on the iPhone simulator but here on Android,
if I now add this, you will see that you get this ripple effect
now if you test this here and of course, you can also configure this effect here with props you can set
and as always, the official docs are also a great place to go if you want to learn more about how to
configure this,
so having that ripple effect can be nice on Android too.
And last but not least, there also is touchable without feedback and this does what the name suggests,
it allows you to register these events but it gives no visual feedback because sometimes you just want
to have something which you can tap but where you indeed don't want to give any feedback to the user.
So here, I can tap this as much as I want,
the tap is registered and hence I see the output here
but we get no visual feedback. So these touchable components are really important in React Native because
they allow you to attach the normal high level touch listeners, like onPress, onLongPress and so on to
any component in React Native and with that you can build your own touchable components, your own buttons,
your own links, whatever you need.
Now here, I'll go back to touchable opacity because I like this opacity effect but really, feel free to
pause the video here and play around with these different touchable effects and play around with the
different configurations you can apply there,
obviously we'll heavily use touchable throughout this entire course,
so we'll see them there plenty of times but this is also a great place for you to get started with these
components. As I said,
I'll go with touchable opacity here and now the next step is to make sure that we don't just log something
to the console but that we actually delete the item which was pressed.