Owning Transitions

Vicenti traces the project from React Native’s early Navigator component through NavigationExperimental, which enabled native-driver animations but required substantial boilerplate. He and Expo’s Brent Vatne created React Navigation to make navigation easier to start with while keeping its logic, URL handling, views, and gestures customizable. He notes that apps including PlayStation, Urban Dictionary, and the NFL use it.

React Navigation v2 clarified the division between navigation logic and the view that renders screens. Vicenti shows how `createNavigator` can combine a `StackRouter` with `StackView`, letting developers retain stack behavior while changing the view. For example, the stack can be configured to present screens as modals instead of cards.

Vicenti introduces a transitioner intended to let each screen manage its own animation and gesture. In his examples, screens define transition setup and execution, then render animated opacity or modal movement based on transition progress. He also shows how a shared `FadeTransition` component can reuse transition behavior across screens.

Vicenti explains that Gesture Handler tracks gestures on the native thread, while Reanimated lets gesture responses and follow-through animations run there as well. He demonstrates a custom swipe-to-dismiss modal and a shared-element example where product photos and labels animate between screens. The shared-element behavior is built outside the transitioner, which he presents as a test of whether the abstraction supports independently developed transitions.

Vicenti describes animating screens behind a modal as a possible future capability, while noting that the API and implementation are still speculative. He is optimistic that the transitioner could support UIKit-style effects, including animated headers and shared text, but says some keyboard behavior may remain beyond JavaScript-based navigation. He invites developers to experiment with the transitioner and contribute documentation, bug reports, and fixes.