Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

eds2002/react-native-screen-transitions

Repository files navigation

react-native-screen-transitions

Customizable screen transitions for React Native. Build gesture-driven, shared element, sheet, and fully custom animations with a simple API.

iOS Android
ios.mp4
android.mp4

Features

  • Full animation control for screen enter, exit, and gesture-driven states.
  • Shared element and fullscreen navigation zoom transitions through the Bounds API.
  • Snap-point sheets with gesture-aware ScrollView and FlatList coordination.
  • Transition slots for content, backdrop, surface, and custom tagged elements.
  • Built-in presets for common modal, card, and shared-transition patterns.
  • Blank stack, native stack, and Expo Router integration.
  • Written in TypeScript.

Getting Started

Install the package:

npm install react-native-screen-transitions

Install peer dependencies:

npm install react-native-reanimated react-native-gesture-handler \
 @react-navigation/native @react-navigation/native-stack \
 @react-navigation/elements react-native-screens \
 react-native-safe-area-context

See the documentation site.

Support

v3 (current) supports Reanimated v3, Reanimated v4, and React Native Gesture Handler v2.

Line Reanimated React Native Gesture Handler
v3 (current) v3, v4 v2

Author

Ed

Funding

If this library saves your team time, sponsor it on GitHub or buy me a coffee to support maintenance.

License

MIT

About

Easy screen transitions 😎

Resources

License

Contributing

Stars

Watchers

Forks

Sponsor this project

Packages

Contributors

Languages

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /