Backdrop Filter Not Working on Mobile

I created a simple repo for this https://github.com/jack-beanstalk-2022/RNSkia-BackdropFilter-Error

All it does is render a red transparent circle on top of a blue opaque circle and set the backdrop filter to blur = 12.

function App(): React.JSX.Element {
  const clip = rrect(rect(100, 50, 100, 100), 50, 50);

  return (
    <Canvas style={{flex: 1}}>
      <Group>
        <Circle cx={100} cy={100} r={50} color="blue" />
        <BackdropFilter
          filter={<Blur blur={12}/>}
          clip={clip}>
          <Group
            clip={clip}>
            <Circle cx={150} cy={100} r={50} color="red" opacity={0.7} />
          </Group>
        </BackdropFilter>
      </Group>
    </Canvas>
  );
}

The result I got on Android & IOS simulator:

The result I got using similar code on Web:

My own investigation: I suspect this is a Skia bug https://issues.skia.org/issues/379330016, but an easy fix is to use the recommended way to implement backdrop blur. That is to pass in a paint to saveLayerRect rather than a ImageFilter here .

Other relevant things:

My project is on "@shopify/react-native-skia": "0.1.241", "react": "18.3.1", "react-native": "0.75.4" and Fabric is not enabled
There is a glassmorphism example in RNSkia https://www.youtube.com/watch?v=ao2i_sOD-z0 , it demonstrates the same above mentioned behavior for me. I wonder if it is working for others

Shopify / react-native-skia

Backdrop Filter Not Working on Mobile #2741