Setting pointerEvents to "box-none" prevents triggering onTouch* and onLayout events on the element

[dcalhoun]

Describe the bug

Setting pointerEvents: 'box-none' on a View prohibits triggering onTouch* or onLayout events on the View. This behavior differs from React Native itself. This Expo Snack showcases that pressing the child Pressable of a <View pointerEvents="box-none" /> still triggers the onTouchStart and onTouchEnd events. This change in behavior, which appears to differ from React Native, began in with 7.2.0 due to changes in #655.

Expected behavior

Invoking fireEvent.trigger(viewWithPointerEventsBoxNone, "onTouchStart") results in triggering the View's onTouchStart handler.

Similarly, invoking fireEvent.trigger(viewWithPointerEventsBoxNone, "onLayout") results in triggering the View's onLayout handler.

Steps to Reproduce

1. Press the "Press me" text in the Expo Snack to observe the expected behavior.
2. Clone the reproduction case, specifically the pointerevents-box-none-and-ontouchevents branch.
3. npm install
4. npm run test

Screenshots

n/a

Versions

  npmPackages:
    @testing-library/react-native: ^9.0.0 => 9.0.0
    react: 17.0.2 => 17.0.2
    react-native: 0.66.4 => 0.66.4
    react-test-renderer: 17.0.2 => 17.0.2

[thymikee]

We support gesture responder system, but not onTouch*. I see they're not documented though. Ideas why is that?

[dcalhoun]

We support gesture responder system, but not onTouch*. I see they're not documented though. Ideas why is that?

@thymikee great question. I am not sure. I found facebook/react-native#23686, which attempted to open a discussion on this specifically. It was closed as off-topic. Unfortunately, there does not appear to be a new discussion in the appropriate issue tracker.

In regards to onLayout, it is documented. Is it safe to presume this library should support triggering it with fireEvent('layout', myElementWithOnLayout)? If so, I am happy to update my reproduction to include an onLayout example or open a PR with a failing test.

[thymikee]

Is it possible onTouch* are only available with Fabric renderer? There's an example using those so it's definitely an existing feature, but not well documented: https://github.com/facebook/react-native/blob/8bd3edec88148d0ab1f225d2119435681fbbba33/packages/rn-tester/js/examples/PointerEvents/PointerEventsExample.js

In this light we should extend our pointer events support to these events. onLayout should work as well, yes.

[dcalhoun]

Is it possible onTouch* are only available with Fabric renderer?

No, I do not believe so. The failing test case I provided for this issue originates from the WordPress Gutenberg project, which utilized onTouch* alongside of React Native 0.61.5 at the time. I do not believe React Native 0.61.5 leveraged the Fabric renderer.

In this light we should extend our pointer events support to these events. onLayout should work as well, yes.

👍🏻 Great.

[dcalhoun]

I opened #906 for consideration to resolve this issue.