Touchable: use within body scroller / outside of ScrollView

[necolas]

Possible feature enhancement, to help incremental adoption in existing body-scroller React apps.

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.

Touchable* press events will fire under a finger that is scrolling the body

This is because the Touchable* remains the touch responder during a body scroll. Unlike ScrollView, the body element is not under React's control, and is not connected to the responder system.

This can be reproduced in the storybook's documentation for Touchable{Highlight,Opacity}.

1. Start a scroll on top of a Touchable
2. Release the Touchable

Actual: press events fire during the gesture.
Expected: no press events fire during the gesture.

TouchableHighlight underlay can remain visible for a couple of seconds after the gesture

All the events fire when expected. But the visual underlay gets stuck. This problem only occurs under the following conditions: it's the first touch to occur after a body-scroll AND a ScrollView has not been scrolled yet. (I've actually occasionally seen this happen with TouchableHighlight within a ScrollView, but I don't have any reliable steps to reproduce.)

This can be reproduced in the storybook's documentation for TouchableHighlight.

1. Go straight to the TouchableHighlight screen.
2. Scroll down to the examples
3. Press an example

Actual: underlay remains visible long after touch finishes
Expected: underlay immediately disappears

4. Without doing anything else, press again

Actual/Expected: underlay immediately disappears.

5. Scroll the screen
6. Press the example again

Actual: underlay remains visible long after touch finishes
Expected: underlay immediately disappears

7. Repeat previous steps. The behaviour should reproduce consistently.
8. Go to the ScrollView screen.
9. Find an example ScrollView and scroll it.
10. Go back to the TouchableHighlight screen.
11. Attempt to reproduce steps 3-7.

You should find that the issue has magically been resolved.

Environment (include versions). Did this work in previous versions?

• OS: all
• Device: all
• Browser: all
• React Native for Web (version): all
• React (version): all

[maggo]

I'm looking into this problem myself right now after switching from a ScrollView to body scrolling while trying to better manage the address bar hiding.

May I ask how you solved the problem for Twitter Lite? It seems that the feed there is also a body scroller but it doesn't have the issue

[necolas]

Twitter Lite hasn't integrated the Touchables or ScrollView yet

[maggo]

Ah thank you.
My basic idea would be to wrap the whole application in a pseudo ScrollView that binds the body scroll events to a ScrollResponder. In theory this should fix all the outlined issues, right?

[necolas]

Something like that

[MoOx]

I started to look at this. I am not yet familiar with the RN(W) responder concept, but I think I am starting to understand how it's working and what it's supposed to do.
I started to think as creating a body wrapper that will basically mimic a scroll view behavior (= use register ScrollResponder logic on body scroll events) but after thinking a bit more, I was thinking this won't be a good solution for something else different that the body... If we take in consideration non body scroll (eg: simple div+overflow scroll). One magic wrapper might be ok (for body, via opt-in/out?) but we cannot ask for people to wrap all components that can scroll and that are not ScrollView, don't you think?

So we we don't go on the "plug scrollresponder logic events into existing dom elements", that means we have to handle this from Touchable themselves.
Thoughts?

[necolas]

I don't think the not-body-or-ScrollView use case is important. One interesting detail is the timing of scroll events and how that also seems to cause issues for ScrollView becoming responder

[MoOx]

I didn't took lots of time to understand the entire logic of ScrollResponder (probably enough to get the purpose of it) and it seems that a minimal workaround for body scroll to avoid touchable press event to fire is "just" to mimic what ScrollView does by attaching the mixin event to document "scroll" event... https://github.com/MoOx/dame.bio/commit/f4140e46605409803e947badfdbd104ad34239d9#diff-edb9c3ba97dd1591dd89b6b1396deccaR30
In my case, after some tests it's acceptable (as my project is a small sideproject). I will see if I still encounter issues and/or if this solution needs to be improved. I guess for more than a simple website (eg: app with scroll on body + events on touch or I don't know what but a thing that could be more complex) this solution will need to handle more than just scroll event on document.

I am not sure how we can integrate this concept in RNW and if that's a relevant solution.

[MoOx]

The "solution" I used is clearly incomplete. I tried to add touch events to the equation but I am facing an issue because I am sending native event directly and not SyntheticEvent. ScrollResponder (scrollResponderHandleTouchEnd) need e.nativeEvent (to probably check something - I didn't looked why and not sure it's important since the goal of this responder is to act like a magic box).
I looked a bit into react to check how SyntheticEvent are created but it seems it's not simple enough to just call a function around the native event. I am not familiar with react plugin mechanism.
Any thoughts to share to be able to "plug" scroll responder on body events if you think that's the way to go?

Sidenote: during some tests, I got an error in the console Cannot find single active touch. (traced back to react-dom https://github.com/facebook/react/blob/fef40c061ec7db03b6b0faa7608788d625cf78db/packages/events/ResponderTouchHistoryStore.js#L205) when releasing a touchable in some case, not sure if that's a clue about something going wrong with touchable - even if definitely not related to the main issue here.

[MoOx]

I tried a few more things but the effort does not worth it for my project (at least for now as I have other priorities). Between this limitation (that I am not able to workaround) and #731 (even by accepting that I won't benefit of viewport-fit=cover on safari ios - I am experiencing too much bugs where onPress is triggered when it should not), it's hard to imagine using touchables - and I don't feel good enough to enhance the current situation... So I am going to stop using touchables for now :/

Edit: also, using a scrollview stretched as an app wrapper make scroll experience weird and laggy in some browsers, even on desktop.