Shared element transition doesnt work with border radius

[jamesheavey]

Description

The shared element transition doesnt work correctly when transitioning from an element with border radius 100 to an element also with radius 100

Link to previous discussion with video

@MatiPl01 @piaskowyk

Steps to reproduce

add a shared element block as below on 2 screens and transition between them

<Animated.Image
    source={{ imageurl }}
    style={{
      width: "100%",
      height: "100%",
      borderRadius: 100
    }}
    sharedTransitionTag={`tag`}
/>

Snack or a link to a repository

https://github.com/MatiPl01/reanimated-set-border-radius-issue

Reanimated version

3.6.1 - 3.13.0

React Native version

0.73.1 - 0.74.3

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[MatiPl01]

While I was preparing the repro for the issue, I made this observation. If someone needs a workaround, please look at the proposed temporary solution in the linked discussion.