In this video you'll be introduced to React Native's Gesture Responder System by detecting creating a component to detect `n` number of presses.

https://app.egghead.io/api/v1/lessons/react-native-detect-multiple-touches-in-react-native-with-the-gesture-responder-system/subtitles

Detect Multiple Touches in React Native with the Gesture Responder System

Instructor: [00:01] I've got this basic application where all I'm doing is rendering this red button. When you tap it, it alerts "box tap." Something I want to do though is instead when I do a double-tap or triple-tap, whatever you want...

[00:14] To do this in an iOS simulator, you just press and hold option. Then you can press click. You're seeing that it's also doing just box tapped.

[00:23] We want to do something different when a user double-taps. We'll go ahead and actually create a component to do this. We're actually going to call this...We'll say, "class Multitap." Then that's going to extend React.Component.

[00:39] This Multitap component, we're just going to set some default props to start. We'll set default props. Then we're going to have an onPress prop. That'll just render null when it's tapped, by default.

[00:53] Next we'll set up our render function. In this render function, basically we're going to wrap any of the children in a view, so we can just go ahead and put this.props.children inside of it. Then we can go ahead. We've got the basis for this component.

[01:10] We can actually go ahead and wrap our existing button box with our new component. We'll just wrap Multitap around the TouchableHighlight. We can go ahead and add our onPress. Then that's just going to be alert "double-tap."

[01:31] Now we can actually go ahead and start implementing this. To do this, what we're going to be using is the gesture responder system within React Native. To do what we want, we're going to use two props on a view.

[01:42] The first one's going to be onStartShouldSetResponder. Then we'll just set. We'll create a function called onStartShouldSetResponder. We're also going to do onResponderRelease. Once again, that's just going to be this.onResponderRelease.

[02:00] We can go ahead, set up these functions. Both of these functions are going to take one argument. That's just going to be an event, which I'll just abbreviate as evt. If I save this, everything should still work the exact same way as it did before -- box tapped, box tapped. That's looking good.

[02:18] What onStartShouldSetResponder is doing is basically should this component, this Multitap component, take over any gestures at this point. What we're going to be doing is detecting if we're doing a double-tap or a multi-tap.

[02:33] To do this, what we can say is if evt.nativeEvent.touches...Touches is going to represent how many touches are actively on the screen. Is it one? Is it two? Is it three? Is it four? So on and so forth.

[02:47] What we're going to say is if evt.nativeEvent.touches.length is going to be equal to two at this point, then we're going to go ahead and return true. Otherwise, we'll just go ahead and return false, which means that this component is not going to handle gestures.

[03:07] If I save this and we press it, box tapped. If I double-press it, nothing's happening here. That's good. That means we're taking over. We're just not doing anything.

[03:18] To keep with the consistent tap and release -- the action happens on release of a button -- we're going to use this onResponderRelease, which basically, I'm tapping. Once I let go, onResponderRelease is being called at this point.

[03:33] All we're going to do at this point is say this.props.onPress. Now if I go ahead, we've got box tapped. If I double-tap it, we've got that double-tap happening. Single, double. Perfect.

[03:46] Now let's go ahead, refactor this component a bit to allow for any number of taps in this Multitap component. We'll just say, "numberOfTouches." We'll default this to two. Instead of evt.nativeEvent.touches.length equaling two, we can set it to equal this.props.numberOfTouches so that by default it's two.

[04:13] We could also go ahead and change. Let's go ahead and set numberOfTouches equal to one because I can't do three -- at least I don't know how to in a simulator. We can see box tapped here. It's not doing anything if I'm double-tapping because we've got numberOfTouches equal to one.

[04:31] If I go ahead and replace this TouchableHighlight, obviously, that's redundant. You wouldn't have a Touchable component and numberOfTouches there. If I go ahead and touch it, we can see we've got that double-tap showing up.

Detect Multiple Touches in React Native with the Gesture Responder System

Share this video with your friends