Shared element transitions with Reanimated

WHAT THIS TESTS Whether you know how Reanimated bridges two independent screens so a single element appears to fly and morph between them, and the exact tagging contract that makes it work.

A GOOD ANSWER COVERS The core mechanism is the sharedTransitionTag prop placed on an Animated.View on each screen. When both the outgoing and incoming screens contain an Animated.View with the same tag string, Reanimated measures the source view's frame, then on navigation interpolates the corresponding target view from that frame to its final layout, animating position, width, height, and other supported style properties. This requires React Navigation's native-stack navigator, because the transition is coordinated with the native screen push. You can supply a custom sharedTransitionStyle, a worklet receiving the source and target measurements, to control exactly which properties animate and how. Both endpoints must actually be mounted as Animated.View with the matching tag at the moment of transition.

COMMON WRONG ANSWERS Giving the two views different tags, so no match is found and nothing animates. Trying it on the JS-based stack navigator instead of native-stack. Tagging a plain View rather than Animated.View. Expecting it to work for elements that are conditionally unmounted on one side. Confusing this with manually animating with shared values across screens, which is far more work.

LIKELY FOLLOW-UPS What properties are interpolated by default, how do you customize the curve, what are the limitations and platform caveats, how does this compare to react-navigation-shared-element, and how do you debug a transition that does not fire.

ONE CONCRETE EXAMPLE On a list screen each thumbnail is an Animated.View with sharedTransitionTag of photo-42. On the detail screen the hero image is also an Animated.View with sharedTransitionTag photo-42. Using a native-stack navigator, tapping the thumbnail pushes the detail screen and the thumbnail smoothly expands and repositions into the full hero image, giving a continuous sense of the same object moving between screens.