Installation

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/react-navigation";
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.