requireToFail

requireToFail allows delaying activation of the handler until all handlers passed as arguments to this method fail (or don't begin at all).

For example, you may want to have two nested components, both of them can be tapped by the user to trigger different actions: outer view requires one tap, but the inner one requires 2 taps. If you don't want the first tap on the inner view to activate the outer handler, you must make the outer gesture wait until the inner one fails:

export default function App() {
  const innerTap = useTapGesture({
    numberOfTaps: 2,
    onDeactivate: (e) => {
      if (!e.canceled) {
        console.log('inner tap');
      }
    },
  });

  const outerTap = useTapGesture({
    onDeactivate: (e) => {
      if (!e.canceled) {
        console.log('outer tap');
      }
    },
    requireToFail: innerTap,
  });

  return (
    <GestureHandlerRootView style={styles.container}>
      <GestureDetector gesture={outerTap}>
        <View style={styles.outer}>
          <GestureDetector gesture={innerTap}>
            <View style={styles.inner} />
          </GestureDetector>
        </View>
      </GestureDetector>
    </GestureHandlerRootView>
  );
}