Name: Implement a Long Press Button with React Native's Gesture Responder System
Uploaded: 2018-10-12T11:16:15-05:00
Description: In this video you'll learn to leverage React Native's Gesture Responder System to create a component that calls a function only if you interact with the component for a set period of time.

In this video you'll learn to leverage React Native's Gesture Responder System to create a component that calls a function only if you interact with the component for a set period of time.

https://app.egghead.io/api/v1/lessons/react-native-implement-a-long-press-button-with-react-native-s-gesture-responder-system/subtitles

Implement a Long Press Button with React Native's Gesture Responder System

Instructor: [00:00] I have a React native application with a red button, where when we tap it once, it says, "Box tapped." If we double-tap it, we get double-tapped alerted. To double-tap, you can just press option on your keyboard, within the iOS simulator, to get it to simulate a double-tap.

[00:16] Let's refactor this multi-tap component to actually allow us to add a delay. If we double-tap and hold, that's the only point that it's going to take an action versus just an immediate touch and release. You need to hold the app for 1,000 milliseconds, or 1 second.

[00:34] Let's go ahead and add a delay prop to our component. We're just going to call this 1,000. I'm also going to add a variable. We're going to call this startPress. We're just going to default this to null.

[00:47] Basically, the point at which we want to start detecting the press is when we have established that we should be the responder to this event, to this double-tap event. That's going to happen here when our touches.length is equal to the number of touches that we want to actually detect at this point in time.

[01:06] If this is true, if we are actually responding to this event, we can go ahead and say, "this.startPress = Date.now()." Looking at the onResponderRelease, since we're only going to want this to happen when the application has been, by default, held down or the button has been held down for one second, we can go ahead and make a comparison here.

[01:30] We'll just grab the time right now. We can say, "now = Date.now()." We'll then go ahead and check that this.startPress actually exists because it defaults to null. If somehow onResponderRelease is called before it exists...We'll just go ahead and make sure that it does indeed exist.

[01:52] We'll then go ahead and subtract this.startPress from now, which will give us the millisecond difference between those two times. Then we want to make sure that that is actually greater than our delay.

[02:06] If all of these factors are true, we'll go ahead call this.props.onPress. Delay is actually coming from this.props. Now when we go ahead and test this, we can see single-tap press is fine. A quick double-tap, it doesn't do anything. If we double-tap it, hold it, and then release, we can see we get that double-tap.

[02:27] The final thing we'll want to do before finishing off this component is just making sure that onResponderRelease, we go ahead and reset this.startPress and set it to the default value of null. Now we've got a multi-tap component that we can go ahead and detect double-taps with a delay, if we wish.

Implement a Long Press Button with React Native's Gesture Responder System

Share this video with your friends