screen choreography

Appearance

FROM THE EXAMPLE APPS

See the motion. ​

Real transitions, recorded in the native examples. Watch the demos, then explore the code behind them.

Gallery native app recording, showing forward and return shared element transitions

A photo becomes the hero.

One retained photo, with image, gradient, icon, and text following the same frame.

Explore the source
Trips native app recording, showing forward and return shared element transitions

Trips

A trip opens into a scene.

A retained photo scene expands from its card into the trip detail screen.

Explore the source
Wallet native app recording, showing forward and return shared element transitions

Wallet

All the details, together.

Multiple shared roles move together as companion sections reveal on the detail screen.

Explore the source

Make it yours ​

Both example apps use the same shared demo screens and transition implementations. They use module-scoped defineTransition recipes, one retained owner per shared role, and local companion reveals.

  • React Navigation: follow the bare example setup to install dependencies, build, and run on iOS or Android.
  • Expo Router: follow the Expo example setup. Use a native development build; Expo Go does not include this library’s native host.

The checked-in example environments are React Native 0.83 and Expo SDK 57. See installation for the package’s declared peer requirements and compatibility considerations.

The homepage preview is a browser illustration of the ownership model. These recordings show the actual React Native library. Neither is a performance benchmark; see performance measurements for the measurement setup and its limits.

Photography comes from the existing example assets. Sources and license.

Made for the moments between screens.

MIT licensed · Built by Dorian Mazur and contributors