[Android] Pointer Events box-none not working after react-native 66

[labmorales]

Bug

Before react-native 66 pointer events, box-none worked as expected on Android. It preserved the interactive area to the actual area that was painted. After the update made in react native 66 (https://reactnative.dev/blog/2021/10/01/version-066 more specifically https://github.com/facebook/react-native/pull/29039/files) that stopped working.

That can be seen on the snacks below when trying to select the blue section behind the red section. Before react native 66 you can do that and after the blue section can only be selected outside the box of the red section.

Working on react-native 64
https://snack.expo.dev/@amorales85/react-native-svg---box_none-working

Not working on react-native 68
https://snack.expo.dev/@amorales85/react-native-svg---box-none-not-working-properly

Unexpected behavior

Working on react-native 64
https://snack.expo.dev/@amorales85/react-native-svg---box_none-working

Not working on react-native 68
https://snack.expo.dev/@amorales85/react-native-svg---box-none-not-working-properly

Environment info

React native info output:

    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 123.67 MB / 16.00 GB
    Shell: 5.8.1 - /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.5, 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.4.1/13F100 - /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.4.0

Steps To Reproduce

Can see the issue happening in this snack:
https://snack.expo.dev/@amorales85/react-native-svg---box-none-not-working-properly that usese react-native 68.

Short, Self Contained, Correct (Compilable), Example

N/A I think.

[marksyzm]

Version 13 seems to introduce a breaking issue - I rolled back to 12.4.4 and all is fine again.

[labmorales]

That's very strange. This bug was filed before version 13. All the tests were made using version 12.4.4. Are you sure you did not revert the react-native version to a version lower than 66?

[marksyzm]

I was working on my project and was having trouble with a rendering issue which turned out to be me populating the path with the wrong values, and while doing that, the path d value was no longer being set (I was doing this via native props from RN reanimated). Upgraded from 12.4.4 to 13.0 and the path was no longer visible and the touch events weren't passing through, so I rolled back again to 12.4.4 and it was all fine.

[marksyzm]

There are so many weird issues combining these libraries anyway

[labmorales]

Got it @marksyzm. Seems like a different issue though. This one is about only having events in the SVG painted areas with the usage of the pointerEvents box-none.

[WoLewicki]

There is a regression that came with v13 of this library, it looks like a bug in the implementation of react-native's BaseViewManagerDelegate which does not handle pointerEvents, which causes their setter not to be called. Since this delegate is used since Fabric has been added to the library, it causes this issue. I am working on fixing it somehow though.

[WoLewicki]

@labmorales did passing pointerEvents directly to SvgView ever work? Looking at the props passed here: https://github.com/react-native-svg/react-native-svg/blob/7b7ca40262b29a5b5fc777849537ab58a5bb9c2d/src/elements/Svg.tsx, there is no pointerEvents prop sent to the native side. Or am I missing something?