Any tips for getting the shadow to render on the first render without explicitly setting width and height?

[melyux]

I'm using this to overcome the shadow limitations and it works great. But when the object changes size (the text inside gets shorter), there's a noticeable delay between the component changing size and the shadow doing so.

Any way around this? Or to mitigate it?

[ftzi]

The shadow is applied on the first render, but it might have some imperfections. In the following renders, it is precisely applied with the acquired height and width.

Maybe you can try to add a new property to this lib, such as noPrecision, which wouldn't reapply the shadow on the following renders. This way, on size-changeable components, this delay wouldn't happen.

I tried for a long time to reach a shadow that was pixel-perfect on the first render, but I always ended up facing some situations with visual artifacts.

[ftzi]

Maybe, you can change the Shadow component so it isn't reused when the text changes. Try setting key={myText} to it. With a changed key, the previous component will be unmounted and a new one will be mounted.

[melyux]

It does work very well on the first ever render, it's just on updates it has problems... I do have the key on the Shadow component that changes when the text changes, but it doesn't seem to help with this. Actually, if I don't have the key set, the shadow never changes, it stays the same size as it was on the first render even when the component size changes.

Here's a video of the first render and subsequent renders

ScreenRecording_10-24-2024.10-26-50_1.mov

[ftzi]

Is upgrading React Native to 0.76 an option for you? https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture#box-shadow-and-filter-style-props

[melyux]

Definitely an option once Expo 52 comes out in 2 weeks. Thanks for the heads up.