Features
react-native-screen-transitions gives you complete control over how screens animate in your React Native app:Full Animation Control
Define exactly how screens enter, exit, and respond to gestures with a simple interpolator API
Shared Elements
Create smooth transitions between screens using the Bounds API for seamless element morphing
Gesture Support
Enable swipe-to-dismiss with edge or full-screen activation, plus multi-directional gestures
Stack Progress
Track animation progress across the entire navigation stack for coordinated animations
Ready-Made Presets
Instagram, Apple Music, and X (Twitter) style transitions included out of the box
Snap Points
Create multi-stop sheets (bottom, top, side) with customizable snap positions
When to Use This Library
Choose react-native-screen-transitions when you need animations that go beyond platform defaults:| Use Case | This Library | Alternative |
|---|---|---|
| Custom transitions (slide, zoom, fade variations) | Yes | @react-navigation/stack works too |
| Shared element transitions | Yes | Limited options elsewhere |
| Multi-stop sheets (bottom, top, side) with snap points | Yes | Dedicated sheet libraries |
| Gesture-driven animations (drag to dismiss, elastic) | Yes | Requires custom implementation |
| Instagram/Apple Music/Twitter-style transitions | Yes | Custom implementation |
| Simple push/pop with platform defaults | Overkill | @react-navigation/native-stack |
| Maximum raw performance on low-end devices | Not ideal | @react-navigation/native-stack |
Choose this library when you need custom animations, shared elements, or gesture-driven transitions that go beyond platform defaults.Choose native-stack when you want platform-native transitions with zero configuration and maximum performance on low-end Android devices.
What You’ll Build
With react-native-screen-transitions, you can create:- Custom screen transitions with slide, zoom, fade, and elastic animations
- Shared element animations that morph images and components between screens
- Bottom sheets and side panels with multiple snap points and gesture controls
- Gesture-driven interactions including swipe-to-dismiss and drag-to-expand
- App-specific transitions matching popular design patterns from Instagram, Apple Music, and more
How It Works
The library provides three stack navigators that extend React Navigation:- Blank Stack - The default choice for most apps with full animation control
- Native Stack - Extends
@react-navigation/native-stackwith custom transitions - Component Stack - Standalone navigator for embedded flows (experimental)
Next Steps
Installation
Install the library and required peer dependencies
Quick Start
Create your first custom transition in minutes