Shared element transition doesnt work with border radius

jamesheavey commented 2 months ago

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[bot] commented 2 months ago

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 commented 2 months ago

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.

software-mansion / react-native-reanimated