[Android] pointerEvents + opacity - unstable

[danielgindi]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
      Memory: 31.40 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.9.0 - /usr/local/bin/node
      npm: 6.2.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.5.0 => 16.5.0
      react-native: ^0.57.0-rc.4 => 0.57.0-rc.4
    npmGlobalPackages:
      react-native-cli: 2.0.

Description

On Android, using pointerEvents='box-only' is unstable in the presence of opacity style.
Specifically, I'm animating a view's opacity, and after animating and reverting to original value - the pointerEvents property is no longer respected.

This is similar to #10216

Reproducible Demo

        <Animated.View 
          style= {
            opacity: this._anims.opacity
          }]}
          pointerEvents={'box-none'}>
          
              Something clickable here

        </Animated.View>

Now animate this._anims.opacity to 0 and back to 1.

More info & workaround

• When starting with an opacity of 1, the touches pass through.
• After changing opacity to 0 and back to 1 (whether by animation or by changing state) - touches stop passing through.
• If I set the view with a backgroundColor: 'transparent' - it works even after setting opacity to 0.

My guess is (a bit of educated guess, because I actually looked at the code), that by setting opacity to 0 React marks the view as something that's meant only for layout, and not for actually viewing things, so it can optimize it out.
And coming back to opacity 1 - the view comes back (I see it in layout inspector) but it is not marked as BOX_ONLY anymore. A backgroundColor of 'transparent' forces it to always be treated like an actual view.
The backgroundColor workaround in my opinion is exposing another bug - which is an optimization bug, not something that affects functionality.
And it is kind of nice to have right now as it allows controlling how react optimizes the view hierarchy. Food for thought: Maybe consider adding a special prop for that?

Edit:

As @kabbi mentioned, there actually is a property for disabling optimization on view.

[kabbi]

Hey @danielgindi, I've struggled with this for a while too, before I've read your issue. Actually, there is a flag to control, whether view is optimized out or not, it's collapsable. It works as a workaround.

[danielgindi]

@kabbi Thanks for your comment! This seems like the best workaround for this issue... will try it soon.

[tayfunyugruk]

@danielgindi i solved this problem by setting top position to 10000 for the component so that it stays out of the actual view.

in my case i had a picture on the screen and when it is clicked i was displaying a detail view for the clicked image and between detail image and original image i was displaying a transition image which basically resizes to detail view's image by translateX and translateY. When the detail view is closed everything was turning back to initial state but when i try to click same image it was not responding due to the pointerEvents="box-none" issue on Android (iOS is working well). i changed top position of transition image when animation is completed so it is not blocking touches anymore.

[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.

[danielgindi]

Hey bot, it's not fixed, but there's a workaround.

[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.

[danielgindi]

Annoying bot

[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.