Applying inner drop shadow on a shape with opacity destaturates the shape

[ajitid]

Description

Inner drop shadow when applied to a shape that has opacity doesn't behave as expected. Rather only putting shadow at the edges of the shape, it affects the whole shape. Thus it doesn't appear like a inner shadow as a result.

React Native Skia Version

1.5.0

React Native Version

0.76.7

Using New Architecture

• Enabled

Steps to Reproduce

Create a rect with a solid fill. Now use color picker to check the color of the rect's center point. Now put a small inner shadow in it, and check color at center point again. You'd find the color to be same

Now create a react with a fill that has some opacity in it. Use color picker to check the color of the rect's center point. Now put a small inner shadow in it, and check color at center point again. You'd find the color to be different.

Expected behavior: The color should remain same at that point.

Snack, Code Example, Screenshot, or Link to Repository

Here's a snack link and here is its preview:

The top rects don't have opacity in it while the bottom two do.

Contrast this to the HTML/CSS version where the center point's color is same even if the shape has some opacity in it:

Other details:
I'm using React Native web ~0.19.13 here.