Just one last feature for this application we need to make a button that the user can press to buy the
album off of amazon.
So remember we're not going to like actually handle payments.
We just want to open up the user's browser on their mobile device and point them over to the store page
for this album so they could buy it.
So there's two distinct challenges here.
First we need to be able to receive some amount of feedback from the user like you're handling the actual
button press here and we also need to figure out how to open the user's web browser on their device
and point them at a very specific you are out.
We will first make use of the button or we will first make the button and it will focus on how to open
the user's browser.
Guess that's the plan here.
Now I mentioned a while ago that one of the big challenges of re-act native is dealing with styling
components specifically the fact that there isn't really like a nice default set of nice looking components
you can use right out the gate.
So to deal with this will first be making every usable button component and then focus on customizing
it for our needs.
OK so we're going to make a reusable button that we can use on future projects as well.
And then we're going to customize it for our needs.
So you know you know what the next step is we need to make a new file to how is our button so I can
be buttoned J.S. inside of our components directory and inside if we're going to place our boilerplate.
What else do you think we're going to do.
All right.
So import re-act from react at the top we'll import our text tag because of course our button is going
to need some text from Riak native.
Next will declare our button component and inside of here all place.
Just some GSX that says you know inside of a text tag click me.
Finally at the bottom we will export default button like so now I want to be able to see this button
immediately.
You know I want to get it to show up on the simulator so we can actually make use of it and develop
it on the fly.
So I'm going to immediately import it into our album detail inside of album detail inside of album detail
right now.
I'm going to import it as Button from button and I'm going to create a new card section after both the
existing two that we have to house the button.
Remember that was the goal all along we're going to have three card sections in the last one is going
to house that button.
So I'll add on another card section here.
And it's going to contain our button component like so.
One quick aside I see kind of varying communi convention on this on whether or not you want to put a
newline character between major sections in your GSX.
So for us we have three distinct card sections.
So maybe you want to put in like a new line here just to say hey this is kind of a distinct separate
part of our render method it's totally up to you.
I can waffle back and forth making use of it.
But to be honest with you I also tried not to have components that look this large.
So really you can go either way either way.
To left you.
OK let's flip back over to our button.
Here it is.
And I'm also going to open up my simulator and I'm going to refresh it just to make sure everything
is hooked up correctly.
So refresh.
And all right there we go.
Text left click me down there and of course clicking on it does absolutely nothing just yet.
We haven't done anything at all to handle.
Tapping on the thing one also a quick note here is that clicking in the simulator is equivalent to tapping
with your finger.
So you know whenever I say tap on the device or something like that for the simulator we can just click
on it.
The equivalent.
OK.
So let's continue with some of the basics of the button like how we deal with a user tapping on it and
whatnot.
For this this is kind of like a pretty big topic how we handle user feedback.
So I'm going to open up the re-act native documentation and we're going to just look at the docs a little
bit on the subject.
So in my browser I've already got to react native documentation.
Open if you want to follow along in your own browser.
You know you can just do a google search for underreact native docs.
Otherwise I'm going to point us directly at what we need to be looking at.
So I can scroll down a little bit and the left hand side I'm going to go until I find the section here
of touchable highlight touchable native feedback touchable opacity and touchable without feedback.
So these these four things here the only two that we really care about right now are touchable highlight.
There it is and touchable opacity as well.
So I want to tell you right now do not let these names throw you off.
They are fancy fancy names for Button.
Like literally they are fancy names for a button a touchable highlight is a button a touchable opacity
is a button that's all they are.
These are all basic components for dealing with user presses.
And the biggest difference between them is just how they deal with providing feedback to the user.
So for example when a user taps on a touchable highlight the button has the option to very briefly turn
a different color which kind of like highlights the button is being pressed.
It is literally just about providing feedback to the user.
So on the other hand like a touchable opacity mirror opacity means kind of like Faid or see through.
So when a user taps on untouchable opacity the button is going to briefly fade away.
Just to let the user know hey we registered that click like we know you just did something don't dungaree
we're going to handle that click event you just you just are that Pressey that you just triggered.
So for our app we are going to be using the touchable opacity But again we can use any of these things
and we would do just fine because they're all just buttons that's all they are.
So with a touch touchable opacity again it means that whenever a user taps on this thing the opacity
of the rapt view is decreased kind of dimming it.
That's all it is.
All right.
So we are going to add in the touch of opacity and then we're just going to add it to our render method.
You add it to our component and just see what it looks like.
You know what happens when we tap tap on it.
So inside of my button I'm going to import my touchable opacity and then I'm going to treat it as though
it were a view tag.
So I use these touchable things to wrap other components.
That's the entire idea behind we use them to wrap the things that we want to be able to like tap on.
So in our case I want to be able to tap on this click that says Click me because it says you know clicking
of course I want to tap on the thing.
So I'm going to wrap this text tag with a touchable opacity.
All right.
So I'm going to now reverse the simulator and let's see how this thing behaves.
So I'm going to go down the click me I'll tap on it and lo and behold it fades.
Hooray.
Remember the entire goal of this right here is just to provide the user with some amount of feedback
to say hey don't worry the app is not like locked up like it's we're not frozen here something is happening.
That's the entire point of these touchable objects.
OK.
There's one thing to be aware of though.
They also give this give us the ability to listen for an actual press.
And so when the user presses on this thing we have the option to execute some code.
So let's continue in the next section and figure out how to wire up that kind of tap handler or that
thing that's going to execute when the user presses on this thing.
So let's take a quick break.
See in the next section