react-native-screen-transitions is a React Navigation transition toolkit for apps that need more control than the platform defaults.
Use it when you want to build:
- custom push and dismiss animations
- gesture-driven cards and sheets
- snap-point flows
- floating overlays
- bounds-driven navigation zoom and shared-transition style motion
See It In Action
My friend Brian made a short video explaining screen transitions and the basics. If you prefer a visual walkthrough, it is a good way to get a feel for the package.
Why This Was Built
I was inspired by apps like Dropset and Family, and I noticed a pattern: many of the most polished transition-heavy apps were iOS-only. It felt like SwiftUI was where that kind of motion work usually happened.
While learning SwiftUI and UIKit is still on my radar, I love React, I love React Native, and I wanted this kind of transition system in React Native. Apps that put real craft and style into transitions were the motivation for this package.
This would not have been possible without React Navigation. Their JS stack and flexible API made the idea viable. Reanimated and Gesture Handler from Software Mansion made the motion work.
React Native can support smooth, 60 fps transition work across Android and iOS. The gap between SwiftUI-style motion and what is practical in React Native is getting smaller.
Screen Transitions is a customizable package for building transitions that used to feel out of reach in React Native.
Choose A Stack
Blank Stack
createBlankStackNavigator() is the default recommendation.
It is the best fit for:
- custom interpolators
- snap sheets
- overlays
- bounds transitions
- embedded and independent flows
Native Stack
withScreenTransitions(createNativeStackNavigator()) is the native-stack integration path.
Use it when you already have a stack built around @react-navigation/native-stack and you want to opt a specific flow into this library's transition system.
That path requires enableTransitions on the screens or navigator where you want the library to take over transition rendering.
Under the hood, this is still a compatibility layer. The transitioned native-stack screen is switched into a transparent modal-style presentation, native animation is disabled, and the library drives the transition visuals with Reanimated on top of that container.
So while native-stack integration keeps you in the native-stack world for things like existing headers and screen primitives, it is not the path with the most control over custom animations.
Use native stack when you already rely on native-stack behavior and you want a one-off custom transition inside that setup. If you want the full transition model and more control over the animation surface itself, choose blank stack.
Special Thanks
Special thanks to the teams at React Navigation and Software Mansion - none of this would exist without them. React Navigation's JS stack and flexible API made Screen Transitions possible. Software Mansion's Reanimated and Gesture Handler power the motion under the hood. Thank you for building these tools for the React Native community.