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