Touches pass through overlay Views in Android, but not iOS

[semekh]

Description

There is a discrepancy between event propagation in iOS and Android.

On Android: You can have have two "overlay" views that span the whole view, containing some control elements. All control elements are tappable, as long as they don't overlap.

On iOS: The same configuration results in the top view acting like a glass that prevents any interaction with the elements on the bottom view.

In other words, transparent Views do propagate touch events to underlying Views in Android, but not in iOS.

I personally prefer Android's behavior.

Reproduction

https://snack.expo.io/SkBZGASx-

On Android: You can tap on both the green and red box. On iOS: You can only tap on the green box.

Solution

Add pointerEvents='box-none' to overlay Views. https://snack.expo.io/BkVomRrlb

Additional Information

• React Native version: 0.44
• Platform: both iOS and Android
• Operating System: N/A

[semekh]

Updated the reproduction link. Also, added my workaround in "Solution" section.

[brentvatne]

It sounds like we should try to make these both behave the same, and look to the web for the correct default. PR welcome for this, it will be a breaking change for whichever platform changes.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[semekh]

Any updates on this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[tianxind]

I am having exactly the same issue. Please do take a look at the problem. Thank you very much!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[fxsalazar]

Any news on this matter?

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[jahskee]

I still experience the same issue with 0.59, the touch event is still being propagated to lower layer views when in Android.

[MartinCura]

Using RN 0.56 and this also happens (only in iOS, which is irksome).

Workaround seems to work but is a pain as i have to use it on every level of nested view.

[joebernard]

Still an issue on 0.61.2. @brentvatne Could we please get this one reopened?

[joebernard]

I am finding the pointerEvents solution isn't working in my case. I'm placing an absolutely positioned overlay on top of a React Navigation modal. Per the docs it seems this is actually the correct behavior, as it says box-none only has an impact on subviews. No mention that it would or should affect views with a lower z-index (views appearing behind an absolutely positioned overlay).

'box-none': The View is never the target of touch events but its subviews can be.

However adding a low zIndex won't help since the overlay needs to be on top.

[VrTech]

I found this issue as well, any solutions?

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[flloyddsouza]

Still experencing this issue on iOS, Android works fine.