-
-
Save mrzmyr/9ac94ca4622c1602a2a3 to your computer and use it in GitHub Desktop.
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> | |
) | |
} | |
}); |
@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?
@yanickrochon did u read @iksent comment?
@fukemy I'm not certain what you mean, of course I have read @iksent 's comment. Back in 2020, React hooks were relatively new. So, if I would rewrite the code I posted, it would more look like this one, today :
const MultiPressOverlay: () => ReactNode = ({
delayLongPress = 1000,
delayMultiPress = 300,
minMultiPress = 4,
onPress,
onLongPress,
onMultiPress,
children
}) => {
const [lastPress, setLastPress] = useState(null);
const [pressCount, setPressCount] = useState(0);
useEffect(() => {
if ((pressCount > 1) && (pressCount >= minMultiPress)) {
setPressCount(0);
onMultiPress && onMultiPress(new CustomEvent("multipress", { detail: { pressCount } }));
}
}, [pressCount, minMultiPress, onMultiPress]);
const handlePress = evt => {
const now = Date.now();
setLastPress(now);
if (now - lastPress <= delayMultiPress) {
setPressCount(pressCount => pressCount + 1);
} else {
setPressCount(1);
}
onPress && onPress(evt);
};
return (
<TouchableOpacity
delayLongPress={ delayLongPress }
activeOpacity={ 0.8 }
onLongPress={ onLongPress }
onPress={ handlePress }
>
{ children }
</TouchableOpacity>
);
};
NOTE: There is still a lot of room for improvement, but this was written without tests whatsoever. I would move the onPress
inside the useEffect
callback, with a timer, to trigger a single press event is the delayMultiPress
is expired and less than minMultiPress
has beeen triggered, etc.
any one have idea how to handle tripple and quadrupple taps like in youtube app?