Skip to main content
Welcome to react-native-screen-transitions v3.4. This library provides a comprehensive toolkit for creating sophisticated screen transitions in React Native with minimal boilerplate.

​
Key Features

Bounds API

Declarative shared element animations with Transition.Boundary components and the powerful bounds-based animation system.

Gesture Control

Interactive, draggable transitions with full gesture ownership coordination and simultaneous gesture handling.

Auto Snap Points

Intrinsic sizing with snapPoints: ["auto"] and layouts.content for responsive sheets.

Surface Slots

Modular return format for content, backdrop, and surface layers with custom components.

​
Quick Example

Here’s a basic screen transition with the slot-based return format: 
import { Transition } from 'react-native-screen-transitions';

const MyStack = () => {
  const screenStyleInterpolator = ({ progress }) => {
    "worklet";
    return {
      content: {
        style: {
          opacity: interpolate(progress, [0, 1, 2], [0, 1, 0]),
        },
      },
      backdrop: {
        style: {
          opacity: interpolate(progress, [0, 1, 2], [0, 0.7, 0]),
        },
      },
    };
  };

  return (
    <Transition.Stack
      screenStyleInterpolator={screenStyleInterpolator}
      gestureEnabled
      gestureDirection="vertical"
    >
      {/* screens */}
    </Transition.Stack>
  );
};

​
What’s New in 3.4

This release brings powerful new features for advanced animations and improved developer experience:
  • Auto Snap Points: Intrinsic sizing with snapPoints: ["auto"]
  • Boundary Components: Transition.Boundary.View and Transition.Boundary.Pressable with id prop
  • Navigation Zoom: bounds().navigation.zoom() for navigation-style shared transitions
  • Surface Slots: Explicit slot-based return format with surfaceComponent support
  • Ancestor Targeting: Navigate gesture behavior with “self”, “parent”, “root”
  • Deferred Frames: Return "defer" for conditional animation startup
Read the full changelog

​
Getting Started

Choose your path based on experience level:
1

Install the package

Installation guide with peer dependency requirements.
2

Quick start

Build your first transition in minutes with presets and basic customization.
3

Learn core concepts

Understand custom animations, gestures, and snap points.
4

Explore guides

Integrate with Expo Router, handle ScrollViews, or migrate from 3.3.

​
Architecture Overview

The library operates on three core principles:
  1. Worklet-based Animation: Use React Native Reanimated worklets for 60fps animations on the native thread
  2. Gesture-Driven Interactions: Precise gesture ownership coordination across nested navigators
  3. Bounds-based Shared Elements: Measure and animate between arbitrary source and destination bounds
All animations flow through the progress value (0–1 for normal, 1–2 for dismissal) and optional bounds data for shared element tracking.

​
API Surface

The main entry points are:
  • Components: Transition.Stack, Transition.Modal, Transition.Boundary.View, Transition.Boundary.Pressable
  • Hooks: useScreenAnimation(), useScreenGesture(), useTransitionConfig()
  • Factories: Transition.createBoundaryComponent(), Transition.createTransitionAwareComponent()
  • Bounds: bounds() worklet function with .navigation.zoom(), .anchor(), and layout queries

​
TypeScript Support

Full TypeScript definitions included. The library is built with type safety in mind: 
const interpolator: ScreenStyleInterpolator = ({ progress, bounds }) => {
  "worklet";
  return {
    content: { style: { opacity: 1 } },
  };
};

​
Need Help?

  • Troubleshooting: Check caveats for known issues and workarounds
  • Migration: Coming from v3.3? See migration guide
  • Examples: See the GitHub repository for complete working examples
v3.4 requires React Native 0.73+ and Reanimated 3.0+. See installation for full requirements.