How to drop shadow in Backdrop Blur

[tminhtri92]

Here is design:

My code:
`
const { width, height } = useWindowDimensions();
const image = useImage(require("../src/assets/images/Blob-1.png"));

  <Canvas style={{ width, height }}>
    <Fill color={"#ffffff"} />
    {image && (
      <>
        <Image
          image={image}
          fit="contain"
          x={0}
          y={0}
          width={738}
          height={504}
        >
        </Image>
        <BackdropBlur
          blur={60}
          clip={{
            rect: {
              x: 20,
              y: 90,
              width: 350,
              height
            },
            rx: 30,
            ry: 30,
          }}
        >
          <Fill color={'#ffffff66'} />
        </BackdropBlur>
      </>
    )}
  </Canvas>

`
Result:

[wcandillon]

Here's the documentation on drop shadows: https://shopify.github.io/react-native-skia/docs/image-filters/shadows/#drop-shadow
Not sure if this is relevant here, but there is a property only to draw the drop shadow. This might come handy.

[tminhtri92]

Thanks William, but i think cause clip in BackdropBlur make drop shadow not working
My code
<> <Image image={image} fit="contain" x={0} y={0} width={738} height={504} > </Image> <BackdropBlur blur={60} clip={{ rect: { x: 20, y: 90, width: 350, height: 494 }, rx: 30, ry: 30, }} > <Fill color={'#ffffff66'} /> <Shadow dx={12} dy={12} blur={25} color="#93b8c4" /> </BackdropBlur> </>
Result:

[wcandillon]

Makes sense, this is were it comes handy to only draw the shadow and do it outside the clip