Can we cast a shadow under a Mask element?

[bglgwyng]

I tried a code like below and it didn't work.

<Mask mask={shape}>
  <LinearGradient start={vec(0, 0)} end={vec(256, 256)} colors={["blue", "yellow"]} /> 
  <Shadow dx={10} dy={10} blur={25} color="#93b8c4" />
</Mask>

I wanted to cast a shadow in the shape of shape while the LinearGradient element fills the shape.
Do we have any way to achieve this?
If there's a way to do the same thing without using Mask, that solution also would be very helpful.

[wcandillon]

LinearGradient is a shader and Shadow is an image filter, you need to apply them to a shape.
For instance:

<Mask mask={shape}>
  <Rect>
    <LinearGradient start={vec(0, 0)} end={vec(256, 256)} colors={["blue", "yellow"]} /> 
    <Shadow dx={10} dy={10} blur={25} color="#93b8c4" />
  </Rect>
</Mask>

[bglgwyng]

My original code included Fill surrounding LinearGradient and Shadow. I omitted it by mistake when I wrote the example.
However, Shadow doesn't work while LinearGradient works fine. I just tried Rect but it didn't fix the behavior.

[bglgwyng]

@wcandillon I have been experimenting with the Mask and Shadow features and have noticed that they don't seem to work well together. I am a bit confused as to whether this is intended behavior or a bug. If Mask is supposed to be masking the shadow added by Shadow, then I can understand why the shadow effect may not be visible.
If this is the case, would it be possible to suggest another way to achieve the shadow effect without using Shadow as a child element?
Or, do I misunderstand the semantics of Mask and Shadow?

Also, I was wondering if you could share any examples of how to apply shadow effects (or other effects) using useDrawCallback. It can be a workaround for now if there exists.

Thank you for your help and expertise!

[wcandillon]

If you want to see Mask and Shadow used together, you can checkout this demo: https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Wallpaper/Wallpaper.tsx

If you think there is a bug, feel free to let us know in a small reproducible example

[bglgwyng]

Thanks! I didn't know that Shadow works inside Group.
Putting Shadow and Mask into the same Group element makes the result I expect.