Shared element transition doesnt work with border radius

[jamesheavey]

m2-res_480p.mp4

I understand this is an issue that is known, I just want to know if this is being actively worked on? Also does anyone know of any work arounds?

It works as intended if I have the border radius at 0, however when I but it at 100 it breaks and does this.

Please see the start of the video for 100 radius and end for 0

The animated block on both screens looks like this:

<Animated.Image
    source={{ uri: selectedEvent.thumbnail }}
    style={{
      width: "100%",
      height: "100%",
      borderRadius: 0, // 100
    }}
    sharedTransitionTag={`event-${selectedEvent.eventId}`}
/>

Another issue is the flicker when navigating

[MatiPl01]

Hey!

Do you still see this issue? I am trying to reproduce it but the border radius seems to work fine and is animated properly.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-09.at.02.27.30.mp4

[MatiPl01]

I talked with @piaskowyk and he confirmed that this is an issue that should be fixed. Could you please open an issue (Bug report) here and describe the problem? We will look into the possible solution.

[jamesheavey]

Hi @MatiPl01 thank you so much for your help. I have created a issue here: #6244

Would you be able to add the snack that you made to it?

Thanks again!

[MatiPl01]

I added a link to the repo with repro.
What's interesting, I managed to get it work properly when I update the borderRadius proportionally to the size of my component.

Let's say, you have component on the first screen with width and height set to 100 and borderRadius also set to 100.

If your component on the second screen has different dimensions, e.g. width and height set to 50, which is the half of initial dimensions, the borderRadius should also decrease twice to 50.

Please let me know if it helps you.
This is an issue and should be resolved on our side, though, but you can use this workaround for now.

[jamesheavey]

In my initial video, the image also flickers when transitioning (you can see it goes black on some transitions) do you happen to know the reason for this? Sometimes it transitions perfectly, othertimes it flickers

[MatiPl01]

Please try upgrading reanimated. You mentioned 3.6.1 version in the issue you created. I tested locally with this reanimated version and I also got strange results, such as the complete disappearance of the shared element. After I upgraded to 3.13.0, I no longer see the issue.

Please check on your side and let me know if it works for you.

With 3.6.1	With 3.13.0
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-09.at.19.44.23.mp4	Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-07-09.at.19.47.14.mp4