In the last section we created a new reuseable button component and hooked it up with the touchable
opacity tied the touchable tag of all types are used for just two purposes remember providing some feedback
to the user that their tap was registered and also giving us the ability to respond to these taps like
to run a callback or run some code or we can do something whenever the user taps on the button.
So at this point we haven't done anything around handling user input.
So in this section we're going to hook up a click event handler that's going to watch and listen for
whenever a user taps on our touchable capacity right here.
I don't think you're prepared for some typing though.
Really quick we're going to add on some styling to our button.
It's pretty darn ugly right now.
And in fact it looks absolutely nothing like a button.
So we're going to take a little bit of time to add on some styling for our button and then we'll take
care of that event handler.
So you know what we do whenever we do styling we add a new object beneath our component.
Collette styles.
And I'm going to give it a property of button style so let's get started.
First off we're going to add a rule of flex one firmer flex one needs I want this button to expand to
fill as much content as it possibly can.
Next fall I'll apply an a line self style of stretch aligned self is a property tied to flex blocks.
So if you remember we have a line items on line items.
When a container tells all of its children that it needs to position all those items in some fashion.
The Aline's self-rule however is when we want this element to position itself.
Using Fluxbox rules so aligned cells stretch is going to specifically say stretched to fill the limits
of the container.
Next we'll assign a background color and then we're going to do some borders.
So do a border radius of five.
This will give it nice very rounded borders will do a border with of one and a border color of and you
have to write this one down.
0 7 a f f this blue color right here.
Maps up pretty nicely with the Eilis blue.
So our button is going to look kind of like Iowa us button.
Next we'll have a margin left of 5 in a margin right of 5.
And again this is just to make sure that our button doesn't actually kind of butt up against any other
borders or line work or text or anything like that.
So let's structure that button style property into our component and then apply it to the touchable
opacity tag.
So inside of our component will the structure Button's style from styles.
And we're going to apply it to our touchable opacity go next I want to do just one more quick property.
I want to add on some better styling for text right here.
You know as it stands right now the text is just black and white.
Might as well just the Times New Roman right for what we saw in the simulator so it be really nice if
the text also looked a little bit more button like.
So I did a couple of properties for the text as well and our styles object to add a text style I'll
give it again.
And the line self that's going to center the text inside the button will give it the same color of Double-O
7.
Feth a font size of 16.
And we're going to give it a font weight Funt way is for specifying the boldness or I suppose thickness
of a text zone.
So we will specify font weight of 600 that will be pretty deep on the edge of font when it comes to
baldness.
So it's definitely appear to be some pretty bold text.
Next you want to make sure that the text is not really squished by the border on a touchable opacity.
You know we want to have some space above and below the actual text element to make this thing really
look like a button.
So we'll give it a padding top of 10 and a padding bottom of 10 as well.
And then just like we did with the button style We will also restructure the text file out and then
we'll apply that to our text tag.
So style of text style and as a final bit of a stylistic concern here for my code I'm going to New Line
the text tag just to make it more legible.
All right so let's refresh this in the simulator now and see if we can't do something better than this.
Click the text so will refresh.
And all right.
Hot dog that is looking pretty darn good.
That's definitely looking good.
And you'll notice that when we click it I still get a little bit of lag in my simulator go.
When we click it the button fades nicely.
That means that whenever our user presses on the button when they're using the application they will
know oh OK something like you know something is happening here my press was registered.
I I expect my app to do something now.
OK.
This looks fantastic.
I'm really happy with it.
But we still need to make sure that we handle a press event on the touch of policy.
So let's take care of that and see the next section.