facebook / react-strict-dom

React Strict DOM (RSD) standardizes the development of styled React components for web and native.
https://facebook.github.io/react-strict-dom
MIT License
3.19k stars 161 forks source link

In React Native, <html.button> does not support pointer events other than onClick #233

Closed dgca closed 2 weeks ago

dgca commented 2 weeks ago

Describe the issue

Pressable elements such html.button element are currently unable to receive pointer events other than onClick.

After looking into it, it seems that html.button and elements whose props include an onPress render a React Native <Pressable /> element. Unfortunately, Pressable does not accept many of the props that useNativeProps normalizes down to.

This also affects pseudo selector styles such as :active, since the event handlers that usePseudoStates tries to use are also invalid.

It looks like a potential fix is to use Pressable's onPressIn, onPressOut, onHoverIn, and onHoverOut and normalize these to onPointerDown, onPointerUp, onPointerEnter, and onPointerLeave, respectively.

Happy to give it a shot and open a PR if y'all would like, let me know.

Expected behavior

Given the following:

<html.button
  onPointerDown={() => console.log('down')}
  onClick={() => console.log('cilck')}
>
  Press me
</html.button>

After pressing the button, I would expect "down" and "click" to be logged.

Actual behavior: Only "click" is logged.

Steps to reproduce

  1. Clone and set up repo at v0.0.28 (current as of right now)
  2. Add an onPointerDown prop to a button in the example app
  3. Run the app & press the button

Test case

No response

Additional comments

No response

necolas commented 2 weeks ago

You have to be using the new RN architecture with the PointerEvent feature turned on in the feature flags

dgca commented 2 weeks ago

You have to be using the new RN architecture with the PointerEvent feature turned on in the feature flags

Ah, such is the price we pay for living on the bleeding edge. Kk, ty. Closing 🫡