[iOS] Rotating image on top of another image causes rendering defects

[ryankask]

I noticed that when rotating an image on top of a background image, the foreground image doesn't render properly and also causes other components to become distorted/disappear:

Here is an RNplay.org snippet that show this: https://rnplay.org/apps/bgf0rA

I've noticed that there are some workarounds:

• Nest the Animated.Image in the background Image https://rnplay.org/apps/cMVf2Q
• Nest the Animated.Image in a View https://rnplay.org/apps/o6mm6g (maybe the same thing as above)

This isn't related but on Android the image looks 3d as it rotates. Is it possible to enable this on iOS?

This is happening on version 0.27.2 and 0.24.1 on rnplay.org

[zachgibson]

"Here is an RNplay.org snippet that show this: https://rnplay.org/apps/cMVf2Q" This looks just fine to me, no distortion or disappearance. And you can add perspective to your transform to make it activate a 3d space. Check this fork: https://rnplay.org/apps/ZncoFg

[ryankask]

@zachgibson Sorry about that, I mixed up the link. The buggy version is here: https://rnplay.org/apps/bgf0rA. I've corrected the link above.

Thanks for the perspective tip! That seems to be the default on Android.

[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-rotating-image-on-top-of-another-image-causes-rendering-defects

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.