Skip to main content
React Native Screen Transitions is a feature-rich transition library for React Navigation. It is powered by modern React Native tooling, especially the Software Mansion stack: Reanimated, React Native Gesture Handler, and react-native-screens. The goal is to give you fine-grained control over transitions, gestures, shared elements, and snap-driven layouts without forcing you into a small set of built-in animations.

​
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 because the gesture and the animation stay connected. Screen Transitions is designed around that same idea: gesture-driven animation, real-time interpolation, and screen transitions that respond directly to user input instead of feeling detached from it.

​
Architecture Overview

  • Blank Stack — A bare navigator with no built-in animations. You define everything through screenStyleInterpolator, gesture props, and screen options.
  • Native Stack — Wraps native iOS and Android screen behavior while still letting you customize the transition layer with Reanimated.
  • Progress System — Animations are 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().
  • Gesture System — Configure direction, velocity, activation areas, and snap behavior per screen.

​
Next Steps

Let’s build smooth navigation.