[Android] Pointer events do not work well in scaled SVG's

[labmorales]

Interactive area does not match the shape of the SVG object while scaling on Android

I'm working on an interactive map in which we have sections and each section is a different SVG. They are contained inside a view that does all the zoom control to give more details of the map. When we zoom in the touchable areas don't match the visual areas on Android.

I noticed that the actual pressable area on Android does not take into account a transformation occurring in a parent element. Therefore it does not trigger events in the drawn area, just in the original area not accounting for the scale transformation.

This issue does not occur on iOS it only presents itself on Android.

Snack to reproduce the error:
https://snack.expo.dev/@amorales85/react-svg-pointer-events-android

When testing on Android when you try to tap the lower part of the top blue shape. It will not trigger the alert. The "non scaled version" on the bottom part works as it should.

I'm happy with any workaround, also can try to fix it if someone is kind enough to point me in the right direction. I was guessing this problem was due to the pointer-events issue on Android (#1034) however I noticed that was not the only issue.

Unexpected behavior

All the shape portions of the SVG should be receiving events. Right now just the original (not scale area) is able to trigger events.
https://snack.expo.dev/@amorales85/react-svg-pointer-events-android

Environment info

System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 138.33 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
    Watchman: 2022.05.23.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/andremorales/.rvm/gems/ruby-2.7.4/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8139111
    Xcode: 13.3/13E113 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.2 => 0.68.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.3.0 (both on the snack and locally).

Steps To Reproduce

1. download the snack from https://snack.expo.dev/@amorales85/react-svg-pointer-events-android
2. cd downloaded-folder
3. npm i
4. npm run android

Describe what you expected to happen:

1. The blue region should be clickable in all its extension, not just the original not scaled part.

[labmorales]

@msand would you mind taking a look at this? Just pointing in the direction of a fix or workaround would be awesome.