[v5] Problem with borderRadius transformation if size of View(width, height) is different in each screen

[TommysG]

I am trying to create a shared element transition but i am facing this issue. If the element (View) in the first screen has a borderRadius( e.g 10) and in the second screen the size of the element is different (with or without borderRadius), then i notice a flickering transformation on the border on my way back to the first screen. Anyone with the same problem???

EXAMPLE OF FLICKERING TRANSFORMATION ON VIEW'S BORDER

If now, the size(width, height) of the element (View) in the second screen is equal to the size of the element (View) of the first screen, then the animation is smooth.

EXAMPLE OF SMOOTH BORDER TRANSFORMATION WHEN WIDTH, HEIGHT IS EQUAL

Any solutions to this?

[TommysG]

With an Image instead of a View with backgroundColor, it works perfect. Can't find out what's the problem

[IjzerenHein]

Yeah I know why this happens. This is because when animating the top rectangle (which is as wide as the screen), it scales it to look like the square one. And in the process it also tries to change the border-radius. But because of the scaling, it looks off, as in the horizontal curve is less than the vertical curve. This is unfortunately a limitation of how react-native-shared-element tries to morph views from one size to another. (it uses scaling because this can be applied at high performance, and attempts not to resize shapes as this causes additional re-layouting). A workaround could be to use animation="fade" in your sharedElements function: https://github.com/IjzerenHein/react-native-shared-element#sharedelementanimation

[TommysG]

But i think that the problem occurs, only when i try to animate a View. If i try to animate an image the border radius animates smoothly.

A quick workaround i found is to create an image with a solid color and animate this, instead of a view with a background color. But, i think that it's not so efficient.

[IjzerenHein]

But i think that the problem occurs, only when i try to animate a View. If i try to animate an image the border radius animates smoothly.

Yeah thats correct. If it's a single view (with no children) or an image-view, then it can resize the view (change its width and height) and the border-radius transition will be perfect. But if it's a composite view (view with 1 or more children), then it uses the scaling (scale-transform) approach instead. This is because resizing doesn't work for views with children, as the children would not to be re-layouted upon changing the size of the parent view.