Shadow for SVG `<Path>` is not working (its just a rect)

[hannojg]

Description

When using a <Shadow> with an <Path> from an SVG the shadow doesn't fit the shape of the path rendered, but just renders a rect:

Version

1.3.6

Steps to reproduce

See reproducer example:

import { View, StyleSheet } from 'react-native';
import { Canvas, Path, Shadow } from '@shopify/react-native-skia'

const svgShape =
  'M44.2821 0C19.8517 0 0.135864 19.6533 0.000678856 44.1436C-0.071138 57.2909 5.56015 69.1253 14.5542 77.2958C24.0382 85.911 32.576 95.5216 40.2899 105.759L43.0105 109.368C43.6484 110.211 44.9116 110.211 45.5452 109.368L48.401 105.581C56.0685 95.4073 64.564 85.8644 73.9932 77.3042C82.9407 69.1803 88.5593 57.4434 88.5593 44.3893C88.5593 19.8777 68.7336 0 44.2821 0ZM44.2821 74.3435C27.8741 74.3435 14.5711 61.0056 14.5711 44.5544C14.5711 28.1033 27.8741 14.7654 44.2821 14.7654C60.6902 14.7654 73.9932 28.1033 73.9932 44.5544C73.9932 61.0056 60.6902 74.3435 44.2821 74.3435Z'

export default function App() {
  return (
    <View style={styles.container}>
      <Canvas style={styles.marker}>
        <Path path={svgShape} color={"rgba(255,255,255,1)"}>
          <Shadow dx={0} dy={17} blur={21.2} color={'rgba(0,0,0,0.45)'} />
        </Path>
      </Canvas>
    </View>
)
}

const MARKER_MAX_HEIGHT = 110
const MARKER_MAX_WIDTH = 89
const styles = StyleSheet.create({
  container: {
    backgroundColor: 'lightgrey',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  marker: {
    width: MARKER_MAX_WIDTH,
    height: MARKER_MAX_HEIGHT,
  },
})

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

https://snack.expo.dev/@hannojg_margelo/rnskia-shadow-reproducer

[hannojg]

ah, stupid me 😄

I just picked a really big blur radius, and the shadow is exceeding the canvas size, thus creating this clipped effect. If I pick a more dense blur its working - sorry!