What are shared element transitions between screens, and how do you implement them?

Short answer

They smoothly animate a visual element (such as a product image) while transitioning from a list screen to a detail screen, expanding it from its original position to its final position on the new screen.

Explanation

Reanimated v3 has built-in shared element transition support through the sharedTransitionTag property. When an element on the first screen and one on the second screen have the same tag, the animation engine calculates the transition path and smoothly matches the element's size and position during navigation.

Code example

// On the list screen:
<Animated.Image
  source={{ uri: item.imageUrl }}
  sharedTransitionTag={`image-${item.id}`}
  style={styles.thumbnail}
/>

// On the detail screen:
<Animated.Image
  source={{ uri: item.imageUrl }}
  sharedTransitionTag={`image-${item.id}`}
  style={styles.fullHeroImage}
/>

Common mistakes

• Using the same sharedTransitionTag for more than one visible element on the same screen, causing identifier conflicts.

Follow-up questions

• What is the key difference between Native Stack Navigator and Stack Navigator in React Navigation?
• What are Shared Values in Reanimated, and how do they differ from useState?

Sources

• Reanimated docs — Shared Element Transitions