Fix nested taps activation

[m-bert]

Description

While working on #2739 we discovered that our orchestration process doesn't work as expected when we have nested Tap gestures . This PR introduces few changes that make those gestures work as intended.

Fixes #2739

Test plan

Tested on example app and on modified code from issue.

Test code

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';

const log = (e: any, handler: string) =>
  console.log(`[${e.handlerTag}][${handler}]: ${e.state}`);

const orangeTapGesture = Gesture.Tap()
  .runOnJS(true)
  .maxDeltaX(5)
  .onBegin((e) => log(e, 'Orange tap'))
  .onStart((e) => log(e, 'Orange tap'))
  .onFinalize((e, success) => {
    log(e, 'Orange tap');
    if (success) {
      console.log('---> Orange Tap <---');
    }
  });

const orangeDoubleTapGesture = Gesture.Tap()
  .numberOfTaps(2)
  .runOnJS(true)
  .onBegin((e) => log(e, 'Orange Double Tap'))
  .onStart((e) => log(e, 'Orange Double Tap'))
  .onFinalize((e, success) => {
    log(e, 'Orange Double Tap');
    if (success) {
      console.log('---> Orange Double Tap <---');
    }
  });

const blueTapGesture = Gesture.Tap()
  .runOnJS(true)
  .requireExternalGestureToFail(orangeTapGesture, orangeDoubleTapGesture)
  .onBegin((e) => log(e, 'Blue Tap'))
  .onStart((e) => log(e, 'Blue Tap'))
  .onFinalize((e, success) => {
    log(e, 'Blue Tap');
    if (success) {
      console.log('---> Blue Tap <---');
    }
  });

const blueDoubleTapGesture = Gesture.Tap()
  .numberOfTaps(2)
  .runOnJS(true)
  .onBegin((e) => log(e, 'Blue Double Tap'))
  .onStart((e) => log(e, 'Blue Double Tap'))
  .onFinalize((e, success) => {
    log(e, 'Blue Double Tap');
    if (success) {
      console.log('---> Blue Double Tap <---');
    }
  });

const redLongPressGesture = Gesture.LongPress()
  .runOnJS(true)
  .onBegin((e) => log(e, 'Red Longpress'))
  .onStart((e) => log(e, 'Red Longpress'))
  .onFinalize((e, success) => {
    log(e, 'Red Longpress');
    if (success) {
      console.log('---> Red Longpress <---');
    }
  });

const redDoubleTapGesture = Gesture.Tap()
  .numberOfTaps(2)
  .runOnJS(true)
  .onBegin((e) => log(e, 'Red Double Tap'))
  .onStart((e) => log(e, 'Red Double Tap'))
  .onFinalize((e, success) => {
    log(e, 'Red Double Tap');
    if (success) {
      console.log('---> Red Double Tap <---');
    }
  });

const Showcase = () => {
  const gesture = Gesture.Race(redDoubleTapGesture, redLongPressGesture);

  return (
    <View style={[styles.center, { flex: 1, backgroundColor: 'white' }]}>
      <GestureDetector gesture={gesture}>
        <Animated.View style={[styles.outer, styles.center]}>
          <Blue />
        </Animated.View>
      </GestureDetector>
    </View>
  );
};

export default Showcase;

const Blue = () => {
  const composedGesture = Gesture.Exclusive(
    blueDoubleTapGesture,
    blueTapGesture
  );

  return (
    <GestureDetector gesture={composedGesture}>
      <Animated.View style={[styles.blue, styles.center]}>
        <Orange />
      </Animated.View>
    </GestureDetector>
  );
};

const Orange = () => {
  const composedGesture = Gesture.Exclusive(
    orangeDoubleTapGesture,
    orangeTapGesture
  );

  return (
    <GestureDetector gesture={composedGesture}>
      <Animated.View style={styles.orange} />
    </GestureDetector>
  );
};

const styles = StyleSheet.create({
  center: {
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
  },

  outer: {
    backgroundColor: 'red',
    width: 400,
    height: 400,
    borderRadius: 200,
  },
  blue: {
    width: 250,
    height: 250,
    backgroundColor: 'blue',

    borderRadius: 175,
  },
  orange: {
    width: 100,
    height: 100,
    backgroundColor: 'orange',
    borderRadius: 50,
  },
});