software-mansion/react-native-svg

[Android] Svg swallowing touch events

Open

#1034 opened on Jun 19, 2019

View on GitHub
 (11 comments) (5 reactions) (0 assignees)Java (7,107 stars) (1,076 forks)batch import
Platform: Androidbuggood first issuehelp wanted

Description

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.

Contributor guide

Tech stack
androidiosreactjavascript
Domain
mobile
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React Native basicsAndroid touch event handlingreact native svg library structure
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the Android native implementation of the SvgView class (likely in Java or Kotlin) to understand how touch events are dispatched. The bug report indicates that touches on the SVG view are not passing through to underlying views as they do on iOS. Check the onInterceptTouchEvent and onTouchEvent methods. Also review the usage of 'pointerEvents' prop and ensure consistency with iOS behavior. The provided Expo snack can be used for testing.