[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