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

[dawidvdh]

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

0.1.165

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.

[chrfalch]

Thanks, @dawidvdh - this sounds like a clear issue with the Android touch handler.