useExclusiveGestures
Only one of the provided gestures can become active. Priority is determined by the order of the arguments, where the first gesture has the highest priority, and the last has the lowest. A gesture can activate only after all higher-priority gestures before it have failed.
For example, if you want to make a component that responds to single tap as well as to a double tap, you can accomplish that using useExclusiveGestures:
export default function App() {
const singleTap = useTapGesture({
onDeactivate: (e) => {
if (!e.canceled) {
console.log('Single tap!');
}
},
});
const doubleTap = useTapGesture({
numberOfTaps: 2,
onDeactivate: (e) => {
if (!e.canceled) {
console.log('Double tap!');
}
},
});
const taps = useExclusiveGestures(doubleTap, singleTap);
return (
<GestureHandlerRootView style={styles.container}>
<GestureDetector gesture={taps}>
<View style={styles.box} />
</GestureDetector>
</GestureHandlerRootView>
);
}