Installation

Choose Your Navigation Setup

This page installs the stable v3 release.

1. Install The Package

npm install react-native-screen-transitions

2. Install The Peer Dependencies

The package expects these 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

If you use Expo, prefer expo install:

npx expo 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

The important version floors are:

• @react-navigation/native >= 6.0.0
• @react-navigation/native-stack >= 7.0.0
• react-native-reanimated >= 3.16.0 or 4.x
• react-native-gesture-handler >= 2.16.1
• react-native-screens >= 4.4.0

For project-level setup such as the Reanimated import, Babel plugin ordering, Gesture Handler wiring, and any native React Navigation requirements, follow the official installation guides for the underlying packages in your app.

3. Optional Masking Dependency

Install @react-native-masked-view/masked-view if you use:

• navigationMaskEnabled
• library-managed navigation zoom masking
• the legacy Transition.MaskedView

npm install @react-native-masked-view/masked-view

4. Native Project Step

For bare React Native projects, install iOS pods after changing dependencies:

cd ios && pod install

5. Verify The Setup

If this renders and navigates without Reanimated or Gesture Handler errors, the base setup is correct:

1import Transition from "react-native-screen-transitions";
2import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";
3
4const Stack = createBlankStackNavigator();
5
6export function RootNavigator() {
7  return (
8    <Stack.Navigator>
9      <Stack.Screen name="Home" component={HomeScreen} />
10      <Stack.Screen
11        name="Detail"
12        component={DetailScreen}
13        options={{
14          ...Transition.Presets.SlideFromBottom(),
15        }}
16      />
17    </Stack.Navigator>
18  );
19}

Then continue to Quick Start.

Start From A Complete App

If you are creating a new project, these starters keep the two supported v3 navigation setups separate:

• v3 Expo Router starter — an Expo SDK 55 app exercising the final Router environment supported by the v3 withLayoutContext() integration.
• v3 React Navigation starter — upstream React Navigation with the v3 blank stack.

Both starters show the same detail transition, snap-point sheet, and paired-boundary remote-media zoom, so the only meaningful difference is the navigation host.