[Android] Svg swallowing touch events

[EskelCz]

Bug

When svg view is placed over other elements, touch events on it behave differently for ios and android. On ios it goes through to the underlying element, which is very useful. On android it doesn't, the touch event ends up in the svg, even though no shape inside it was touched.

It seems like a minor issue but for my use case it is actually absolutely critical.

Environment info

React native info output:

  React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
      Memory: 27.04 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.2.0 - /usr/local/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.3 => 0.59.3

Library version: 9.5.1

Reproducible sample code

Here I've made a simple demo: https://snack.expo.io/@eskel/svg-pointer-events It uses expo version of react-native-svg, but I have the same issue in my app which uses the latest version here. I've also tried using touch-events='box-none' and it makes no difference at all.

Steps To Reproduce

Describe what you expected to happen:

1. Tap the button, it should switch color from blue to green. That should work consistently on ion and android. Now it only works on ios.

[EskelCz]

Hm, ok so this seems like a react native issue. With box-none it works on android, on the other hand it doesn't work on ios, throwing "UIView base class does not support pointerEvent value: box-none". So I guess the problem is ios now.

For anyone else running into this, here is a workaround (using pointerEvents only on android): https://snack.expo.io/@eskel/svg-pointerevents-solution

[mario4693]

I've the same issue and the workaround didn't worked

[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. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. Fell free to reopen this issue, if this still affecting you.

[Raademar]

Hm, ok so this seems like a react native issue. With box-none it works on android, on the other hand it doesn't work on ios, throwing "UIView base class does not support pointerEvent value: box-none". So I guess the problem is ios now.

For anyone else running into this, here is a workaround (using pointerEvents only on android): https://snack.expo.io/@eskel/svg-pointerevents-solution

This solution worked for me.

[msand]

There's wip to support pointerEvents properly https://github.com/react-native-community/react-native-svg/issues/1290 Would you mind testing the latest commit from the develop branch?

[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. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[AlastairTaft]

Workaround did not work for me

[richardgarnier]

For the workaround, be sure to set the react-native property pointerEvents and not the svg style property pointerEvents.

[labmorales]

The workaround did work for me. But it seems like when the parent view of the SVG is scaled the clickable area remains the same size on Android. 😢