Skip to main content
React Native Screen Transitions is a powerful animation library for React Navigation that brings native-grade screen transitions and gesture interactions to your app. Built on Reanimated 3 and Gesture Handler, it provides fine-grained control over every pixel of your navigation experience.

​
Key Features

  • Native Stack & Blank Stack — Choose between native iOS behavior or fully custom animations
  • Fluid Gestures — Swipe-to-dismiss with natural velocity and snapping
  • Snap Points — Multi-stop bottom sheets and side sheets with smooth transitions
  • Shared Elements — Measure bounds and animate elements across screens
  • Customizable Animations — Write interpolators with Reanimated for infinite possibilities
  • Overlay Support — Persistent UI that animates with the stack
  • Expo Router Compatible — Works seamlessly with file-based routing

​
Quick Overview

Here’s a minimal example that adds a slide-from-bottom animation to a detail screen: 
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";
import Transition from "react-native-screen-transitions";
import { View, Text, TouchableOpacity } from "react-native";

const Stack = createBlankStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <TouchableOpacity onPress={() => navigation.navigate("Detail")}>
        <Text>Open Detail</Text>
      </TouchableOpacity>
    </View>
  );
}

function DetailScreen() {
  return (
    <View style={{ flex: 1, backgroundColor: "#fff" }}>
      <Text>Detail Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen
        name="Detail"
        component={DetailScreen}
        options={{
          ...Transition.Presets.SlideFromBottom(),
        }}
      />
    </Stack.Navigator>
  );
}

​
Getting Started

Choose your path based on your needs:

Quick Start

Installation

Custom Animations

Shared Elements

Gestures

Snap Points

​
Why Screen Transitions?

Native navigation feels smooth and responsive because every interaction is hardware-accelerated and responsive to user input. Most React Native navigation libraries animate after the gesture completes, creating a disconnect. Screen Transitions makes the gesture drive the animation in real time, matching iOS and Android native behavior.

​
Architecture Overview

  • Blank Stack — A bare navigator with no built-in animations. You define everything via screenStyleInterpolator and gesture options.
  • Native Stack — Wraps native iOS/Android behavior but still allows customization via Reanimated.
  • Progress System — All animations driven by a normalized progress value from 0 (entering) to 1 (visible) to 2 (exiting).
  • Bounds API — Measure layout coordinates and animate elements across screens using sharedBoundTag and bounds() utilities.
  • Gesture System — Individual gesture props let you configure direction, velocity, activation areas, and snap behavior per-screen.

​
Next Steps

Let’s build smooth navigation.