[Android] Svg swallowing touch events

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

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