Touchable issues

[necolas]

The problem

The overall issue appears to be that a) events don't always occurs in the same order, which means the responder is not transferred correctly, b) mouse move events during a touch can cause the responder to be terminated, and c) scroll events are not always fired in situations where they are expected in React Native.

There are problems with the responder event system setup that are covered by these issues:

#693

https://glitch.com/edit/#!/statuesque-bedbug

locationX is relative to the element on which the native event occurred but not the element which the responder event is attached.

#731

https://glitch.com/edit/#!/cultured-bracket

In React Native, ScrollView will trigger onScroll events if you're dragging down when at the top of the scroll view - this allows the responder system to transfer the responder grant from the touchable back to the scroll view. But the web stops dispatching scroll events when scrollTop === 0, so the responder system leaves the touchable as the responder. The reported issue goes away when ScrollView dispatches a DOM scroll event after it receives a touchmove that occurs when scrollTop === 0.

#829

There are 2 significant issues with using Touchable* components within an app that relies on the document.body (rather than ScrollView) being the root scroller. I believe the root cause of both issues is that the body is not part of the responder system, which Touchable and ScrollView rely on to coordinate transfer of the responder grant.

#1164

https://codesandbox.io/s/6njwzqojnr

TouchableOpacity will trigger another component at the same location when changing views (if second component is an "" or "")

#1124

Across multiple browsers, if you hold the mouse very still onPress triggers, but if the mouse is in motion onPress does not work.

Context

Part of the solution may related to producing the correct events (as can be inferred from React Native). This might involve changes to the event filtering logic in the REP, and the scroll event logic in ScrollView.

• Responder Event Plugin
• ScrollResponder
• ScrollView

Related incomplete patches

Attempts to patch these problems.

• https://github.com/necolas/react-native-web/pull/997/files
• rxrossi@1e3eb7f

[tafelito]

@necolas what's missing on the 2 solutions you mentioned above?

I don't see this happening at twitter, is this an issue from the latest versions of RNW, are you doing anything different there?

[paularmstrong]

@tafelito: Twitter doesn't use ScrollView and has a bunch of hacky workarounds in order to avoid using it (because we rely on body-scrolling, for various reasons). In the long run, this isn't great and we'd like a path to move away from our workaround.

[tafelito]

For us this also happens outside a ScrollView. We are avoiding it in some places just using preventDefault but that just also a hack and it doesn't even work in every case

…

________________________________ From: Paul Armstrong <notifications@github.com> Sent: Wednesday, January 16, 2019 18:24 To: necolas/react-native-web Cc: tafelito; Mention Subject: Re: [necolas/react-native-web] Responder Event System issues (#1219) @tafelito<https://github.com/tafelito>: Twitter doesn't use ScrollView and has a bunch of hacky workarounds in order to avoid using it (because we rely on body-scrolling, for various reasons). In the long run, this isn't great and we'd like a path to move away from our workaround. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#1219 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AFsmlCJS0V7tKkrZCZxIwIKrZVcNS2b0ks5vD7SVgaJpZM4ZoyPr>.

[viggyfresh]

Hi @necolas,

Just wanted to follow up on @aligg's comment in #1124 (see #1124 (comment)) - we ended up solving our issue! For posterity: we had inadvertently mixed our metaphors and wrapped a bunch of RNW components inside a div with overflow-y set to scroll; when we replaced this with a RNW ScrollView, all of our problems magically went away! I'm not at all familiar with the responder event system, but I presume this particular blend of web and RNW components isn't supported (or wise).

[RichardLindhout]

@necolas Maybe we can listen to a normal click event of the browser instead of onTouchStart etc.