ScrollView does not respect pointerEvents: "box-none"

[jjenzz]

Environment

React Native Environment Info:
  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Memory: 93.03 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.3.0 - ~/.nvm/versions/node/v10.3.0/bin/node
    Yarn: 1.6.0 - ~/.yarn/bin/yarn
    npm: 6.1.0 - ~/.nvm/versions/node/v10.3.0/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
  IDEs:
    Android Studio: 3.1 AI-173.4819257
    Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.4.1 => 16.4.1
    react-native: 0.56.0 => 0.56.0
  npmGlobalPackages:
    react-native-cli: 2.0.1

Snack uses React Native 0.55.4

Description

When applying box-none as pointerEvents prop on ScrollView I understood that I would be able to click through the ScrollView to any underlaying components if its child container did not fill the ScrollView. This does not appear to work. I can click the child container elements as expected but not the underlaying content.

Reproducible Demo

https://snack.expo.io/HkE9LeVw7

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.56 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[woodpav]

I can confirm this does not work on 0.56

[buzzb0x]

I'm having the same issue on 0.57.5

[buzzb0x]

In case someone is searching for a workaround, you can put the underlying container inside the ScrollView as the first child. Then, set stickyHeaderIndices={[1, 0]} on the ScrollView and use the margin on the foremost container to create the same effect.

[L-Yeiser]

@buzzb0x would you mind expanding on this a bit. Using stickyHeaderIndices in the parent scroll view breaks pointerEvents: none on child views.

[barnesheaton]

@L-Yeiser Instead of using margins as @buzzb0x suggested. I use a View (with the same height as my fixed content) as my 2nd child and apply pointerEvents: "box-none" to that as well as my fixed content and that works for me

[dmuensterer]

@buzzb0x How does your margin solution differ from @jjenzz solution regarding the disability to apply pointerEvents="none"?
@barnesheaton How does the pointerEvent on the View inside the ScrollView work if ScrollView doesn't support pointerEvents on itself?

Is there any chance you could post a code snippet to show how you got it to work for yourself?

[buzzb0x]

Frankly the behavior was too hacky to maintain. I ended up changing my UI plans, which is very frustrating… Any Facebook product can definitely be marked as not reliable.

[woodpav]

I too was about to change my UI plans and then I found react-native-touch-through-view

[elicwhite]

I was able to repro this on 0.59 with the example in the snack.

[aksonov]

The same problem, any estimate?

@TheSavior why is it low-priority? UI pattern above is very popular nowadays

[aksonov]

@barnesheaton Could you share example? I can't make it work

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.