react-native-screen-transitions

react-native-screen-transitions

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

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.

Author

Ed

Funding

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

License

MIT