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 content01 / CONTINUITY 02 / COORDINATION 03 / CONTROL Name the parts.
BUILT FOR REACT NATIVE Good motion
Good motion
connects
everything.
Turn separate screens into one continuous experience. Shared elements, reveals, and gestures. All moving together.
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 interactiveSMALL API. EXPRESSIVE MOTION.
Name the parts.
Set them in motion.
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 },
},
});