Make a Button in React Native with TouchableHighlight

[00:01] The key to creating buttons in React Native is this class called "TouchableHighlight," which gives us both touch detection and interaction, as well as styling to respond to it.

[00:12] The first thing we're going to do before we actually use that, though, is we're going to create our own custom button component. I'm going to say class button extends component, and we'll stub in the render method here.

[00:25] Let's return a pretty simple view component. Inside of that, we're going to put a text component that's just going to say "Tap me." I'm going to save that, and of course, it's not going to render, because we haven't put it in our main component here yet. Let's do that. We'll add a button.

[00:46] Now, as you can see, I have LiveReload turned on in the iOS simulator. I find that really useful whenever you're making UI changes. It's Command + Control + Z to open up the development window on Mac and Command + M to open it up on the Android emulator, if you're using that.

[01:03] Now, we have this button, but let's add some style so that it looks a bit more like a button.

[01:09] First of all, I'm going to add some references to our style sheet object, which is down below. Let's say that we're going to call the outer style button, and then for this one, we'll also add a style, styles.buttonText.

[01:24] Then, I'm going to just clean that up a little bit. Let's scroll down to our style sheet. Let's add those now, button and then buttonText.

[01:34] We'll start by styling the outer view container. The first thing is I'm going to give it a background color of 33aaff. Then some related style attributes, we're going to give it a border and some rounded corners with border radius, because just to give us the suggestion of something that's tappable.

[02:00] I'm also going to make sure that the border color matches that background color. If you wanted to do something in a real app, this would probably be pulled from some sort of like color schema style sheet in the separate file. But for now, we'll just keep hard coding it. Let's add a little bit of padding.

[02:17] That looks a little bit better, we've got those nice rounded corners. Now, let's update the button text style as well.

[02:24] We'll keep it pretty simple here. I'm going to bump the font size a bit, make it bolded, and then, we'll just change the color to look a little bit better on that background. There we go.

[02:40] So far, though, all we've done is make this view look a little bit different. Right? If I click on this, you'll see nothing changes, we don't have any way of hooking into that. Now, let's actually go ahead and turn this into a touchable feature of our application.

[02:53] I'm going to scroll back up to the top of my file, and I'm going to import something else from React Native. I'm going to import something called TouchableHighlight.

[03:03] Now, we're going to use that component, and we're going to wrap the current contents of our button component. I'm going to say TouchableHighlight, going to indent that stuff. Then, I'm going to close this.

[03:18] Now, when I tap on the button, you'll see that still nothing happens, and that's because we need to tell it that this button should respond to presses. We're going to do that by setting the onPress prop on this component.

[03:28] I'm going to say onPress equals and then open up some curly braces and define an anonymous function right here. All we're going to do is console.log onPress. I'm going to save that.

[03:42] A couple of things happen now. One is that if I try and tap on the button, you're going to see that we get this really ugly result, but you can tell that the button is tappable.

[03:54] The other is that if we go into the developer tools, we'll be able to see in the console, the results of us tapping on our button. You can see that we are getting a bunch of successful onPress events.

[04:12] Now, let's get out of debugging mode and go back to our code. If we want to do something useful with this information, we might want to add a callback here, that we'll pass it in as a prop to our button component.

[04:25] Instead of logging, I'm going to just invoke this.props.onPress, and we're just going to call it like that. Now, down in our main tutorial component here, we're going to have to define something to update on the button.

[04:44] We're going to want to keep track of the numbers of taps of state, which means that we're going to add a constructor real quick. I remember a round called super, and then, I'm going to set the initial state to have this taps variable equal to zero. Then, I'm going to define a on tap method here.

[05:04] I'm using this syntax where I do equals and then the parentheses and the fat arrow in order to take advantage of, essentially, autobinding. When this is called, I'm just going to increment the taps variable.

[05:23] Now, let's set the buttons onPress prop to be a function that invokes this.onTap. Then last but not least, let's render out how many taps we have. We'll replace the Hello World text with something that says this.state.taps, and then taps.

[05:51] We start with zero taps, and then when we click the button, yay, you can see that our state is updating and we have successfully wired in a callback using the TouchableHighlight component's onPress method.

[06:04] The last thing we're going to want to do really quick is make this just a little bit less ugly, and we're going to do that by setting the underlay color here to be white, instead of an awkward black color that you're seeing. We're also going to set the active opacity prop to be 70 percent, and this prop controls the way the button appears while it's actively being pressed.

[06:25] Now, let's try that. Great. You can see that, just like that, we have a functioning button. It looks normal and everything is great.

[06:33] Now, you can put whatever you want inside of the TouchableHighlight component, if you had an image of a button, say, that you wanted to render instead, or whatever else you like, anything is fair game.