Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Native - Detect Double Tap
var Index = React.createClass({
getInitialState: function () {
return {
lastPress: 0
}
},
onPress: function () {
var delta = new Date().getTime() - this.state.lastPress;
if(delta < 200) {
// double tap happend
}
this.setState({
lastPress: new Date().getTime()
})
},
render: function() {
return (
<TouchableHighlight onPress={this.onPress}></TouchableHighlight>
)
}
});
@h-marvin

This comment has been minimized.

Copy link

@h-marvin h-marvin commented Oct 14, 2017

Thanks for this!

@iksent

This comment has been minimized.

Copy link

@iksent iksent commented Jan 9, 2018

setState is asynchronous method, so it's better to use "this", not "state".

onDoublePress = (date) => {
       	const time = new Date().getTime();
	const delta = time - this.lastPress;

	const DOUBLE_PRESS_DELAY = 400;
	if (delta < DOUBLE_PRESS_DELAY) {
		// Success double press
	}
	this.lastPress = time;
};
@zen0wu

This comment has been minimized.

Copy link

@zen0wu zen0wu commented Jan 19, 2018

Agree with @iksent. The issue with using state is it'll trigger a re-render, which in a complicated view it's not going to be efficient.

@christianheyn

This comment has been minimized.

Copy link

@christianheyn christianheyn commented Mar 3, 2018

Thanks for the snippet.

@ardalahmet

This comment has been minimized.

Copy link

@ardalahmet ardalahmet commented May 11, 2018

Thanks!

@selmi-karim

This comment has been minimized.

Copy link

@selmi-karim selmi-karim commented Jun 21, 2018

try this new component:
A Component for Double Click based on TouchableOpacity Wrapper.
https://www.npmjs.com/package/rn-double-click

@atopus

This comment has been minimized.

Copy link

@atopus atopus commented Aug 13, 2018

👍 Thanks !

@Aprisyta

This comment has been minimized.

Copy link

@Aprisyta Aprisyta commented Dec 25, 2018

Hey this is really smart. Thanks!

@code-matt

This comment has been minimized.

Copy link

@code-matt code-matt commented Dec 27, 2018

How to prevent the single tap action though ? :( setTimeout is really unreliable in RN it seems

Edit: nevermind, its only in debug setTimeout does not behave

@nguyenvanphuc2203

This comment has been minimized.

Copy link

@nguyenvanphuc2203 nguyenvanphuc2203 commented Sep 4, 2019

thank for the snippet

@yanickrochon

This comment has been minimized.

Copy link

@yanickrochon yanickrochon commented Mar 17, 2020

From this post, I came up with this, and it works great.

const MultiTapOverlay: () => ReactNode = ({
  onLongPress,
  onMultiTaps,
  multiTapCount = 4,
  multiTapDelay = 300,
  children
}) => {
  const [lastPress, setLastPress] = useState(null);
  const [tapCount, setTapCount] = useState(0);

  const handlePress = () => {
    const now = Date.now();

    setLastPress(now);
    if (now - lastPress <= multiTapDelay) {
      if (tapCount < multiTapCount - 1) {
        setTapCount(tapCount + 1);
      } else {
        setTapCount(0);

        onMultiTaps && onMultiTaps();
      }
    } else {
      setTapCount(1);
    }
  };
  const handleLongPress = () => onLongPress && onLongPress();

  return (
    <TouchableOpacity
      delayLongPress={ 1000 }
      activeOpacity={ 0.8 }
      onLongPress={ handleLongPress }
      onPress={ handlePress }
    >
      { children }
    </TouchableOpacity>
  );
};
@arfa123

This comment has been minimized.

Copy link

@arfa123 arfa123 commented Sep 2, 2020

any one have idea how to handle tripple and quadrupple taps like in youtube app?

@yanickrochon

This comment has been minimized.

Copy link

@yanickrochon yanickrochon commented Sep 2, 2020

@arfa123 have a look at my MultiTapOverlay component, just above your comment; does it work for you? Or do you need a component that will tell you how many taps was pressed (e.g. single, double triple, etc.), handling not only one case but many cases?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.