In the less sexually added some styling or button tagged.
But still nothing happens whenever we press it.
Besides that visual effect all the touchable components out there are so touchable opacity touchable
highlight and the other two that we looked at are some of the few components and Riak native that allows
us to directly catch feedback from the user.
So the idea here is simple.
Whenever the user presses on something they expect something to occur right.
So we need to add a hook or a catch something into our component that says whenever a user presses this
thing right here runs some code you know open up the user's web browser maybe fetch a list of posts
or delete a post or tweet something you know whatever it might be.
So of course re-act native has us covered on this topic.
We can optionally add a prop to the touchable opacity called on press.
So let's do it now.
We pass a function to on press and then when ever the touchable opacity is pressed by a user that function
will be called.
So let's just throw in some dummy function right now.
Or throwing a console log of preste like so.
So I passed a federal function.
So my expectation is that whenever a user presses on a touch of capacity I should see a console log
of preste.
So let's give this a shot out and simulator of First bring up my chrome debugger all refresh my simulator.
So then I'll do my click here and you'll notice that my console over here is lagging behind just a little
bit.
But eventually I get up press press press press first press so on and so on.
OK.
So definitely the console log appears.
So the trick here.
The real challenge is just remembering a bit of trivia about how we handle user input.
If we want to handle a tap event from the user we can add a touchable highlight or a opacity tag Whichever
one we might want and create an on press handler the press handler will then be called whenever the
user taps on the element.
So that's that's like step one here.
Now we know when a user is tapping on this thing but we saw two more challenges.
Remember our ultimate goal is to direct the user to a Web site where they can actually buy sell album.
Second Right now we are creating this on click handler inside of this component.
This like button component right.
But we want this button to be reusable.
So in other words we don't want this button to know that hey whenever you are pressed you should open
like some web site because that would completely defeat the purpose of making a reusable component.
If we put a function right here that said whenever you're pressed open up a Web site it would be a very
particular use case for a button.
So instead we need to have some way to make sure we've got very generic very general logic inside of
this button component right here where we can reuse it with other components completely different use
cases in the future.
So let's tackle that challenge first.
Here's how going to take care of it.
First we're going to kind of walk through the code and then we're going to talk about are you saying
we're going to lay out the code and we'll talk about exactly what's going on.
So first I'm going to flip over to Allum detail so here's album detail.
I'm inside the render function and I'm going to find our button tagged towards the bottom.
So here's my card section inside of album detail.
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
and inside of it I'm going to love the album's title.
So I remember the album detail has a title property floating around so I'm going to cancel that title.
So now I am passing a prop called on press the button.
One thing I want to make really clear here this on press is not going to be just like naturally just
magically consumed by the button.
We have to make sure that we actually wire up this on press prop inside the button.
I could have just as easily called this thing when pressed or something.
You know I could have called it anything I wanted.
I'm just choosing to call the prop on press.
But the point I'm really trying to convey here is calling this function on press is not the same as
passing the touchable opacity in on press prop in the case of the touchable touch of opacity isn't expecting
a prop of press.
But right now as our button is put together there's no concept of an unpressed prop for the button.
So we need to make sure that our button actually makes use of that on press callback that we just added
in here.
So when we go back to button and I'm going to say hey touchable opacity whenever you get pressed whenever
someone presses you I want you to run a function that is provided by the parent component.
And so that parent component you know the thing that we want to run here is coming from the prop's object.
It's going to be prop's dot on press.
So let's do a little bit of destructuring to get access to that callback.
So years on press and just be really clear this on press reference right here is exactly equal to this
fadder a function inside of the album detail.
So same exact function being passed down as a prop.
Now inside the button will say whenever you get pressed I want you to run that function that was declared
the parent.
That's it.
That's all you have to do.
So now our button should be a little bit more usable but let's test this out in the simulator first.
Just to make sure it's working.
So now our expectation is that whenever we press on a button we should see the album's title because
it's a lot.
So in a way just a minute from my console to kind of warm up.
There you go.
All right so there is Taylor Swift.
I can go down to the next album.
Fearless speak now and so on.
Let's.
What the heck.
OK.
99.
There you get the idea.
You get the idea.
OK.
So just read you one last time.
This is how we make reusable components with reactor I should say.
This is another technique that we use for making reusable components with re-act native.
I realized that my button component right here needs to do something differently every single time the
user presses on it across.
You know however many times I make a button components on my application.
So rather than telling the button hey whenever you're pressed please open some web site.
In hard coding not inside the button component.
I instead decided to add in a prop of on press and I tell the button hey whenever you get called call
that Paran prop that was passed to you know call that call back and whatever specific behavior was in
there go ahead and let that thing run.
OK.
So this is good.
Good call right here.
Let's continue the next section.
And we're going to figure out how to open a website whenever user presses on that button.