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">

[muneerlalji]

Any updates on this issue? I'm having the same problem and would like to move away from the workaround above

[vinayaksaubhri]

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

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

This will not work for me as I want to wrap the entire home screen in canvas for a animation

[KuryshchukNazar2004]

@vinayaksaubhri Tell me if you found a solution to the problem?

[ivanloy]

@vinayaksaubhri With a similar use case, it works if you make the parent view also cover the whole screen.

<View pointerEvents="none" style={styles.fullScreenContainer}>
    <Canvas pointerEvents="box-none" style={styles.fullScreenContainer} onLayout={setContainerDimensions}>
        <Atlas image={texture} sprites={sprites} transforms={transforms} />
    </Canvas>
</View>