Join Samer Buna for an in-depth discussion in this video Using TouchableOpacity for press events, part of React Native Essential Training.
- [Instructor] Our next step is to click these numbers, and start to think about what should happen when we do. Now, these numbers are so far, presented here, with just the text element. And since we're going to click on that text element, and that click is potentially going to need the random number value, since it's going to trigger a computation of the running sum, that's our sign that we need a component to represent every clickable number. Whenever you have something that you need to click on, and you need the value related to that thing that you click on, it's your sign that you need a component.
The other sign that we actually we needed a component here, is that we are rendering six similar things. They're all random numbers. They share a mark up, they share style, and they also now are going to share behavior. Whenever we click on each of these six, the behavior is basically the same. These are our signs that we need a component here. So let's go ahead and create a component. The new component mark up is going to be, basically, this exact same text, without the key. Because the key is going to be here. So instead of this text here, what we want to do is, we want to render a component, let's name this component RandomNumber, and I still need to do the key in here, cause the dynamic children is here, so the key is the index.
And this random number component is going to need its number, which we can parse to it from the nob here as random number. And it probably also needs to use the unique ID that identifies this number, but I'll actually leave it until we need it. So I'll just simply do that, and then I'll take this mark up, and go create this new random number component. Let place this random number component here, so I'll import RandomNumber from the same level, RandomNumber.
I will create RandomNumber under the components folder, and call this RandomNumber.js. And, this random number can be a simple react class component, call it RandomNumber. And it returns the exact same mark up that we had before, except that we don't need the key. And instead of randomNumber here, it is this.props.number. And I need to bring a few things, including the style.
So the styles for the game had the RandomNumber style, which is now part of the RandomNumber component, so we'll take that, and put it in here, and I'll paste this line as well, to create the stylesheet, and get things to work here, so that the style, and I'll also need to import text from react-native, and I'll also need the prop-types, cause I just defined the prop on this RandomNumber component. Then I'll need the view so far, I just need prop-types, and my prop-types, let's define that.
propTypes ... are, we have number, which is a PropTypes.number.isRequired. Okay, so what I did so far, should be exactly equivalent, right? I didn't change anything. I'm just rendering this RandomNumber now through a component instead of directly. Which made the code for this game component shorter, and that's always a good things. Test and make sure things are working exactly as they did before. And now, we can actually test the clicking event, or as the terminology in react-native, the pressing event.
When we press on an element here, what's going to happen? When we tap an element on the phone, what's going to happen? So our element currently is just a text. If I want to handle the pressing event, I need to bring in one of two elements. Either, TouchableOpacity, or a TouchableHighlight. So, TouchableOpacity and TouchableHighlights are both wrappers for the user respond to touches. On press down, the opacity of the wrapped view is decreased. So these two are the recommended ones, and the difference between them is, mostly, layout, as the TouchableHighlight component will wrap its child in a new view, which can affect the layout, and also the visible difference, is that the TouchableOpacity component uses animation to decrease the opacity of its child, while the TouchableHighlight will actually highlight the child.
So, I'm going to go ahead and try the TouchableOpacity. Let's see how that works. So we need to import it from the react-native. And in here, we need to surround this text with TouchableOpacity. So we'll do a TouchableOpacity, and inside the TouchableOpacity, we'll do our text. And then, the TouchableOpacity has an onPress property, like that. And I can assign this property to be a function, that is on the instance of the RandomNumber component. I'll call this function handlePress.
So the onPress here in react-native is equivalent to the unclick event in web-based react applications. So, we can now define handlePress. I'll use class field syntax here. And inside the handlePress, let's just console.log(this.props.number), and make sure we are seeing every number when we click on it. So to see this console.log statement, we need to have the remote JS debugger open. So make sure that you are debugging JS remotely.
And if you do, the remote native debugger window should be open and running like that. And now, when we press on any number, we should see its value here. Test to make sure that works. So let me actually show you the difference between TouchableOpacity and TouchableHighlight. So when we touch an element now, you'll see how the animation changes it's opacity. If we used TouchableHighlight instead of TouchableOpacity, and take a look at the difference, you'll see that the element is actually highlighted when we touch it now.
And, of course, we can style the highlight. But this is just the difference between TouchableOpacity and TouchableHighlight. So for our case, TouchableOpacity would be better.
- Hello React Native on iOS and Android
- Styling React Native components
- Platform APIs
- Building a simple game app and a data-driven app
- Using the Fetch API
- Creating an animation loop
- Testing on Android
- Changing an app logo and a splash screen
- Using TestFlight with internal testers