[Android] BoxShadow appears randomly when Canvas/Box size is dynamic

[JAWS-tm]

Description

Hello everyone,

I have a problem with the BoxShadow component.

My application must have neumorphic elements. But I want my element to be able to have dynamic sizes (flex, percentages, ...). I also need to be able to put whatever I want in my elements not just Skia components, so I need a Canvas with another View above it.

I achieved this by using the onLayout callback on a parent view that has a dynamic or fixed size and I apply the size returned by onLayout on my canvas and on my Box. It works on IOS but on Android the BoxShadows are not drawn every time, or sometimes they are drawn multiple times.

Do you have any solution to resolve the bug or it's related to the core library ?

Thank you for your help

Version

0.1.157

Steps to reproduce

You can see what I do in the Snack.

I also put a simple Box with fixed values, and as you can see sometimes this Box is also not drawn either

It's random so sometimes all boxes are drawn and sometimes only one or no boxes are drawn

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

Here is a snack with what I'm doing : https://snack.expo.dev/@jaws_tm/276ee9

[wcandillon]

The code looks a bit complex, could you rewrite it with the cavas size based on flexbox properties and then use onSize to draw the elements based on the canvas size? https://shopify.github.io/react-native-skia/docs/animations/values#canvas-size

We would also need to confirm that the appears on the latest version as well. Hope we can get to the bottom of this, if you could reproduce the issue in a smaller/simpler example, that would be fantastic and save us a lot of time. thank you for the report 🙋🏼‍♂️

[JAWS-tm]

Thanks for your quick reply

First I used the onSize property but since I need to have a canvas bigger than the parent div (otherwise the shadows are cut by the canvas) I can't directly size the canva.

Example: I want a 50x50 square, I need my canvas to be 90x90 so that my shadows are visible. So I get the parent size with onLayout (50x50) and I add 20 of ""padding"" so size the canvas with 90x90, then put my canvas relatively with an offset of x:-20; y:-20. Finally I add another View who contain the content above the canvas.

I don't know if it's very clear, don't hesitate to ask me for more details if necessary.

[JAWS-tm]

There is another render I get sometimes : Is like the canvas render many times. This also appear sometimes when I click on the Canvas

[wcandillon]

the smallest reproducible example on the latest version of Skia would be useful, from there we could add tests for it and make sure it works as expected.

[JAWS-tm]

Hi William,

You can check this snack : https://snack.expo.dev/@jaws_tm/276ee9 And as you can see the onSize doesn't work. There is something wrong in my code ?

Thanks

[wcandillon]

yes box={rrect(rect(20, 20, size.current.width, 90), 10, 10)} needs to be box={box} where box is

const box = useComputedValue(() => rrect(rect(20, 20, size.current.width, 90), 10, 10), [size]);

[JAWS-tm]

Sorry I didn't send the good snack. There's the correct one : https://snack.expo.dev/@jaws_tm/skia-onsize-bug

With the same code as in the documentation

[wcandillon]

The example seems to work correctly? The original issue was about shadows, but this example is not using shadows anymore. Could you please to the following:

1. Try on the latest version of RN Skia (we fixed a lot of issues that SDK 48 doesn't have)
2. If there are one or more issues (one size not working or shadows not working), provide us with the smallest reproducible example that showcases the issue. I hope this helps.

[JAWS-tm]

For me it doesn't :

The Snack is on SDK 47, you think it's the problem ?