pointerEvents="none" on <Canvas /> not working on android?

[vinayaksaubhri]

Description

on Android when I have the Canvas as an overlay using StyleSheet.absoluteFill and I set the prop pointerEvents="none" then I still can not select any buttons below the Canvas overlay, as if the Canvas is still capturing the events, it works perfectly on iOS.

Version

1.2.3

Steps to reproduce

use the Canvas element as an overlay to a View with buttons using absolute positioning and then set the pointerEvents to none, the buttons would still not be pressable on Android.

Snack, code example, screenshot, or link to a repository

If I have an overlay component like so:

function Overlay() {
  const {height, width} = useWindowDimensions();
    
  return (
    <Canvas style={StyleSheet.absoluteFill} pointerEvents="none">
      <Rect height={height} width={width} color="red" opacity={0.5} />
    </Canvas>
  );
}

And I have Screen component like so:

function SomeScreen() {
    return (
        <>
            <View style={{flex: 1}}>
                <Button title="navigate" onPress={() => { console.log('I have been tapped') }} />
            </View>
            <Overlay />
        </>
    )
}

I would not be able to select the button on Android.

[mvaivre]

This issue was reported in the past, but I can confirm that it's happening today with 1.2.3.

[ugar0ff]

Same, checked on
"@shopify/react-native-skia": "1.3.11",
"@shopify/react-native-skia": "1.3.13",
and
"react-native": "0.74.5",

[ugar0ff]

I found solution, need to wrap Canvas in View with pointerEvents="none"

    <View
      pointerEvents="none"
      style={styles.shadowContainer>
      <Canvas pointerEvents="none">