Passive event listeners in Safari iOS > 11.3

[kennethkufluk]

I know Chrome implemented passive event listeners for some events in Chrome 51.
Safari did the same from iOS 11.3 onwards, but they have a different workaround:
You need to attach your event with { passive: false } if you want to be able to preventDefault.
https://bugs.webkit.org/show_bug.cgi?id=182521

Looks like React still doesn't have a decision on support for passive events.
facebook/react#6436

Until that is decided, would it be possible for touch events on the View to be non-passive by default?

(I searched around the code and issues for other mention of this and couldn't find any, but if you've solved this by some other means, I'd be very interested to learn how)

Thanks.

[necolas]

Nope. This is something we need to solve in ReactDOM first; I'll bring it up again.

We're working on some ideas for completely new APIs (facebook/react#17508) but there's no schedule yet for when this will make it into a public experimental release that I could try to incorporate here.

Do you know if you're using e.preventDefault() at all with touch events? And if you can share any more context related to this request it would help me represent your needs better :)

[necolas]

Oh you're asking for them NOT to be passive by default! Most modern browsers are making the top-level touch listeners passive by default, so if you need to attach a non-passive touch event listener you can do so by using the native addEventListener API to attach to the view's underlying DOM node (e.g. using forwardedRef, or if that's not yet in a public release, findDOMNode)

[kennethkufluk]

I’ve done that for one of our components, which swipes between images in a media gallery. It seems to work.

We also have a component for pinch-zooming, which currently acts oddly because it zooms the page at the same time. I’ll use the addEventListener fix there too.

The other touch listeners we have are for Pull-to-Dismiss and Swipe-to-Close. Again, they will need to preventDefault.

Seemed like this is a common need, so I came over here to ask the question. :) It makes total sense to wait for a new API. I hope that appears soon.

Thanks for quick reply!

[necolas]

Is CSS touch-action not sufficient to prevent things like document zooming from occurring?

[kennethkufluk]

As far as I understand it, Safari doesn't understand the "none" value, though that might have changed since 11.3. It might understand the "manipulation" value. I'll have to try it out. The bugs I'm looking at aren't reliably reproducible, possibly I have a race condition in the event handlers (or safari does).

[necolas]

Pre-13 Safari only understands manipulation and that might be enough to avoid the browser-level zooming, pull-to-refresh, and back navigation…but yeah mobile browsers make this stuff a pain