[Share Element] Transitioning cloned element is taking the highest zIndex value overlapping existing components

[bruno-de-queiroz]

Description

The zIndex of the shared element clone is always taking the highest value while animating leading to flickering of components should be on top.

Steps to reproduce

1. Create a stack navigator with expo-router
2. Add an Animated.View with sharedTransitionTag in screen A with zIndex: 1
3. Add another Animated.View with the same sharedTransitionTag in screen B with zIndex: 1
4. Add a Animated.Text with zIndex: 9999 in screen B

Expected behavior: The animation should respect the zIndex of the Animated.Text in screen B

Snack or a link to a repository

https://snack.expo.io/

Reanimated version

3.3.0

React Native version

0.72.5

Platforms

iOS

JavaScript runtime

None

Workflow

Expo Dev Client

Architecture

None

Build type

Release mode

Device

None

Device model

iPhone 12 mini

Acknowledgements

Yes

[github-actions[bot]]

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?

[ThusSpokeNomad]

I'd +1 this, especially since I'm also trying to use shared elements while having a bottom tabs navbar (from expo-router), it suddenly pops in front of the navbar during transition and goes back behind it when finishes. I wonder what would be the idiomatic way of putting (and keeping) shared element behind the navbar (bottom tabs with expo-router in my case).

[Saphirah]

It would look weird though, if you do the transition with the actual zIndex. Your animated element would potentially slide through most of the components of the new screen!

My suggestion is to add a small fade transition at the end. Let the animation finish and once the element comes to a hold you fade it out, removing the flicker and letting the elements appear smoothly.

I will try to implement this later, once I am back home.

[piaskowyk]

Hey 👋 Thank you for the report! Shared Element Transition is still an experimental feature, but we currently working on fixing SET's issues.

[mathieupost]

I'd +1 this, especially since I'm also trying to use shared elements while having a bottom tabs navbar (from expo-router), it suddenly pops in front of the navbar during transition and goes back behind it when finishes.

I'm also having this issue. @ThusSpokeNomad did you find a workaround maybe? I've tried setting a very high zIndex and position absolute to the TabBar, but without success.

[ThusSpokeNomad]

I'd +1 this, especially since I'm also trying to use shared elements while having a bottom tabs navbar (from expo-router), it suddenly pops in front of the navbar during transition and goes back behind it when finishes.

I'm also having this issue. @ThusSpokeNomad did you find a workaround maybe? I've tried setting a very high zIndex and position absolute to the TabBar, but without success.

@mathieupost my solution was literally a full reimplementation of this feature on my own. I'm creating a new Animated View and Image with custom zIndex, interpolate them from captured transform rect to target transform rect then fade out. All of this is using reanimated APIs like interpolate, Animated.View etc. It's not trivial but also not super difficult to actually implement shared element transition on your own.