We've now seen an example of the very simple button element.
Now we're going to go through the same process with a touchable opacity touchable opacity works slightly
differently but chances are you're going to end up using touchable opacity in a lot of your applications
more frequently than you're going to use a button.
So let's give this a shot.
I'll flip back over to my home screen component and at the top I'm going to add in an import for touchable
opacity from React Native as well then right after my button I'm gonna place a touchable opacity
in touchable opacity is not a self closing element.
So notice how I put down an opening and closing tab then inside of here we're going to add in some number
of elements.
Whenever a user taps on any of the elements inside of here the touchable opacity will detect that tab
and give us some kind of notification in the form of a on press event just like the one we assigned
to button right there.
So in this case I'm going to add in a text element inside of the touchable opacity I'll then give it
some text like about what do we show in our markup back over here go to list demo let's do that go to
list demo OK.
Let's save this as is and see what happens.
So I can now see that text appear in my application.
Notice how by default that text gets no styling.
So that's one benefit to using the button element by element by default has some nice styling it tied
to it.
If I now tap on that text you'll notice that it kind of fades out very briefly and then comes back in.
That behavior is added in by the touchable opacity.
The word opacity inside there indicates that whenever you tap on an element that is listed inside of
touchable opacity it's going to very briefly kind of fade out.
The idea there is that it's going to give some feedback to our users and let them know that hey you
just tapped on like that thing right there.
This automatic kind of fade effect is going to work on any kind of element that we put inside of a touchable
opacity.
So if we also put in say some kind of image or an icon and then tapped on it it would have a very similar
fade out effect so it's kind of a nice benefit to using the touchable opacity.
We can show any kind of element inside of it.
And if a user taps on it they're going to get an immediate little piece of feedback.
It's now to detect a press event we're going to assign in on press prop just like we did for our button
to the touchable opacity.
So inside of touchable opacity on the opening tab to be opening tag I'll say on press well then assign
an era function and I'll do a console log inside of here right now as well.
For this one I'll say list rest.
Like so
I'll save that now if I tap on that text and then flip back over to my terminal window I'll see list
pressed.
Perfect all right.
So this is a very simple demonstration of some of the differences between button and touchable opacity.
The big difference is is that a button is going to essentially just show some pre styled text inside
of it and that's pretty much it.
The touchable opacity on the other hand is going to allow us to put in any kind of element we want inside
of here.
We could even put in multiple elements if we wanted to.
So for example it's for some crazy reason we want to have like multiple pieces of text.
Those will all be displayed when I get my emulator back up here really quickly.
There we go.
All three pieces of text are displayed in if I tap on any of them.
An entire block of text is going to fade out.
Now obviously having like multiple pieces of text fade out or be principle is not super useful but you
might imagine that maybe you want to have like a really big image that a user can press on and maybe
also have like a piece of tax like a title underneath it.
And whenever a user tapped on either the image or that piece of text maybe we would want to respond
to that and the touchable opacity would be perfect for that.
So right now we're just kind of trying to get a better idea of how to touchable opacity works or we're
gonna get some good examples of the power of it in some later applications that we put together.
Okay.
So now we've seen both our button and our touchable opacity.
The last thing you have to do is figure out how to navigate a user over to the components demo or the
list demo whenever they tap on it.
So we'll figure out how to handle that navigation in the next video.