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 Started Explore Presets

Quick Start

Get up and running with beautiful screen transitions in minutes.

Install the package

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

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

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>
  );
}

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]
            ),
          }],
        },
      };
    },
  }}
/>