Shared Element Transitions: Morphing Views Across Screens
Morph a component from one screen to another during navigation. By giving two components the same sharedTransitionTag, Reanimated animates the view's properties (size, position) between screens for a seamless transition.
Why it exists
When navigating between screens, an element on screen A disappears and a new, similar one appears on screen B, creating a visual disconnect even if they represent the same item. Shared Element Transitions were created to bridge this gap, making the UI feel more fluid and intuitive by showing the element's journey from one state to the next.
The mental model
Think of it as a teleportation effect for a UI component. You identify a component on a source screen and its destination counterpart on another screen. When you navigate, the framework creates a temporary clone of the component and animates its transformation from the source's position and style to the target's, making it look like the same element is moving and morphing across the screen boundary.
How it works
When a screen transition occurs, React Native Reanimated scans for components with a matching sharedTransitionTag on the old and new screens. If a match is found, it hides both original components. It then creates a new, temporary view that is animated over the entire view hierarchy, changing its properties (width, height, position, color) from the source's to the target's. By default, this is a 500ms timing animation. Once complete, the temporary view is removed, and the original target component is revealed.
When to use it
Use this for list-to-detail screen transitions where an element is present on both. A classic example is tapping a product image in a grid, which then smoothly expands and moves to become the header image on the product detail page. This provides a strong visual cue about the relationship between the two screens.
When not to use it
Do not use this for production-critical features yet, as the library documentation marks it as experimental. Avoid it for transitions between elements that don't represent the same logical entity, as this will confuse users. Also, if you need fully custom transition logic, the current API is limited, though it does allow for duration and spring customizations.
One canonical example
To link a large view on Screen A to a smaller one on Screen B, you wrap both in an Animated.View and assign the same tag: <Animated.View sharedTransitionTag="product-image" />. On Screen A, it might have a style of { width: 150, height: 150 }, and on Screen B, { width: 100, height: 100 }. Upon navigation, Reanimated will automatically animate the size change between the two screens.
Interview question
Which statement accurately describes how Reanimated achieves the visual morphing effect in a shared element transition?
- a.It keeps both the source and target components visible and animates their properties in sync.
- b.It directly animates the original component from the source screen's position to the target screen's.
- c.It creates a temporary, animated clone that transforms from the source's properties to the target's.Correct
- d.It hides the source component and instantly reveals the target component with a subtle fade animation.
Why? this is the answer
Reanimated creates a temporary clone that animates from the source's position and style to the target's, making it appear as if the same element is moving. The original components are hidden during this process, making option B incorrect.
Just read this? Test yourself on what you have been reading.
Read the original → docs.swmansion.com
- #react-native
- #reanimated
- #animation
- #ui
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles