One element. Still alive.
Your content moves between screens as one retained native subtree. Its state and React context stay with it.
Understand the modelSkip to contentConnected by
Define the motion.
Connected by
motion.
Shared element transitions for React Native. Keep real content alive as photos, cards, and entire scenes move between screens.
npm install react-native-screen-choreographyBrowser recreation of the Gallery example. Watch the native recording ↗
Aurora is in the Field notes gallery grid.Many parts. One rhythm.
Pair shared elements with local reveals and exits. Define how they move together with one progress value.
Compose a transitionForward. Back. Your call.
Drive a return with gesture progress. Finish it, cancel it, or let velocity and a threshold decide.
Make it interactiveFive ways to explore.
Define the motion.
Keep the connection.
A module-scoped recipe connects your shared roles, timing, and companion content. The same definition works in both navigation integrations.
Build your first transition Open source. MIT licensed. Yours to make your own. photo-motion.tsTYPESCRIPT
import { defineTransition, Springs }
from 'react-native-screen-choreography';
// One definition. A connected experience.
export const photoMotion = defineTransition({
motion: { spring: Springs.default },
shared: {
hero: {
kind: 'bounds',
radius: [16, 0],
},
},
enter: {
details: { during: [0.55, 0.9], translateY: 16 },
},
});