[iOS] applying LayoutAnimation to resize a View with shadow will result in artifacts

[seph14]

I noticed this after the shadow implementation being switched to native stuff.
The artifacts is pretty obvious on the bottom side,

This one shows when the panel is animating, notice the bottom shadowing is being exaggerated.

This one shows how the shadow should look like (after the animation is done).

The shadow property used is
shadowColor: '#666',
shadowOpacity: 0.6,
shadowOffset: {width:0,height:0},
shadowRadius: 1

[jaredly]

What react native version are you using?
If this is using native shadows, does LayoutAnimation w/ shadow work normally in iOS?

[seph14]

I'm on 0.19 and yes the shadow is using the native implementation.
So as the screenshots above showed, shadows doesn't show correctly bounds when the view moves (and resizes) with LayoutAnimation.

I haven't tested if shadow breaks while view is only resizing and not moving,
but I can confirm that if a view is both resizing and moving, shadow attached to the view is rendering in wrong dimensions.

[seph14]

@jaredly sorry but will this receive any fix?
I think the root is pretty clear that the
shadow property is assigned directly with the value after transition and so it doesn't move along with View's size changes.

[jaredly]

GIven that there are 830 open issues, the best way to get progress on this is to try and fix it yourself ;) it's possible that someone from the core team will decide to investigate this, but there are more far-reaching bugs & deficiencies with react native that will probably take priority.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/ios-applying-layoutanimation-to-resize-a-view-with-shadow-will-result-in-artifacts

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[yasir-netlinks]

Hi @seph14 were you able to solve this issue ?