Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/eds2002/react-native-screen-transitions/llms.txt

Use this file to discover all available pages before exploring further.

Beautiful screen transitions for React Native

Build gesture-driven, shared element, and fully custom animations with a simple API. Full control over how screens enter, exit, and respond to gestures.

Get StartedExplore Presets
React Native Screen Transitions

Quick Start

Get up and running with beautiful screen transitions in minutes.

1

Install the package

Install react-native-screen-transitions and its peer dependencies:
npm install react-native-screen-transitions

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
2

Create a stack navigator

Import the blank stack navigator and create your navigation structure:
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";
import Transition from "react-native-screen-transitions";

const Stack = createBlankStackNavigator();

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

Add custom transitions

Use built-in presets or create custom animations with full control:
<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    screenStyleInterpolator: ({ progress, layouts }) => {
      "worklet";
      return {
        contentStyle: {
          opacity: interpolate(progress, [0, 1, 2], [0, 1, 0]),
          transform: [{
            translateY: interpolate(
              progress,
              [0, 1],
              [layouts.screen.height, 0]
            ),
          }],
        },
      };
    },
  }}
/>
See the Custom Animations guide for more details.

Key Features

Everything you need to build stunning screen transitions.

Full Animation Control

Define exactly how screens enter, exit, and respond to gestures with custom interpolators

Shared Elements

Smooth transitions between screens using the Bounds API for element morphing

Gesture Support

Swipe-to-dismiss with edge or full-screen activation and velocity-driven animations

Snap Points

Create multi-stop sheets that snap to defined positions (bottom, top, side sheets)

Ready-Made Presets

Instagram, Apple Music, X (Twitter) style transitions included out of the box

Multiple Stack Types

Choose from Blank, Native, or Component stacks based on your needs

Explore by Topic

Dive deeper into specific features and capabilities.

✨

Custom Animations

Learn how to create custom screen transitions with interpolators and animation specs

Learn more
🔀

Shared Elements

Animate elements between screens by tagging them with the Bounds API

Learn more
👆

Gesture-Driven Animations

Enable swipe-to-dismiss and configure gesture activation areas

Learn more
🎨

Preset Transitions

Use ready-made transitions inspired by Instagram, Apple Music, and X

View all presets

Ready to get started?

Jump into the quickstart guide and add beautiful screen transitions to your React Native app in minutes.

Start Building

Build docs developers (and LLMs) love

Get started for freeTalk to us