Instagram Style Double Tap with React Native
There are a host of ways to detect a tap in React Native — but how do you detect a double tap? Detecting double taps has a host of uses — like liking a picture, causing a scroll to top in a tab, etc. Let’s set up double tap detection.
We’ll start with a basic application that allows us to like a picture.
First create the app
Then set up our app structure.
You’ll then want to download these heart icons and put them in the
Next, paste the following in
App.js with the following
With that you can
yarn run ios or
yarn run android and you can like a picture by pressing the heart icon below the picture.
With the setup complete we can actually start the implementation.
Detecting a Double Tap
First, we’ll wrap our
Image component in a
TouchableWithoutFeedback component, allowing us to detect the tap(s).
On our component we’ll track the last tap in a variable named
lastTap. We’re not using component stated here as it doesn’t affect rendering in any way. It can default to a
Next, on our component we can set up a
handleDoubleTap function in which we’ll compare the current tap to the last tap and, if it’s within the double tap threshold, call the appropriate function.
Date.now() to compare values.
Date.now() returns the milliseconds elapsed since January 1, 1970, 00:00:00 UTC which will work perfectly since our delay will be millisecond based.
Upon a successful double tap we’ll call the
this.toggleLike() function otherwise we’ll update the
this.lastTap value to be the result of
We then need to wrap our
Image component in a
TouchableWithoutFeedback (make sure to import it from React Native!) to detect the tap(s).
This results in the following
Refactoring the Double Tap Functionality to Its Own Component
What we have now works perfectly fine — but it’s not very reusable. Lets refactor it into its own component so we can reuse it easily.
First, create a new file for the component.
And paste the following to get started
We can then go ahead and start moving logic over from
The only difference from before is that we’re now rendering
this.props.children inside of the
TouchableWithoutFeedback so we can pass any component to it.
Next up let’s set up
You can notice two differences here. First, instead of setting a state variable for our delay we’re accessing it via
this.props.delay. That way the consumer of the component can override it. Second, we’re calling
this.props.onDoubleTap() so the consumer can pass their own function down to the component.
Finally, we’ll set some default props so our component works regardless of if the consumer passes props.
Now let’s go ahead and use the new component. In