Skip to main content

​
npm install

Install the library and all required peer dependencies. 
npm install react-native-screen-transitions \
  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

​
Peer Dependencies

All of these packages are required:
PackageVersionPurpose
react-native-reanimated^3.0.0Worklet animations
react-native-gesture-handler^2.10.0Gesture recognition
@react-navigation/native^6.0.0Navigation context
@react-navigation/native-stack^6.0.0Stack navigator
@react-navigation/elements^1.0.0Navigation components
react-native-screens^3.20.0Native screen optimization
react-native-safe-area-context^4.0.0Safe area insets

​
Optional Dependencies

For advanced features, install these as needed: 
# For masked view animations (SharedIGImage, SharedAppleMusic presets)
npm install @react-native-masked-view/masked-view

# For Expo Router integration
npm install expo-router

​
Native Setup

​
Bare React Native

Run the native setup for Reanimated and Gesture Handler: 
npx react-native doctor
npm run android  # or ios
The doctor command will guide you through any additional native configuration.

​
Expo

If you’re using Expo, make sure to use expo prebuild to generate native code: 
npx expo prebuild --clean
npx expo run:ios   # or android
For masked view support in Expo, you’ll need to prebuild (won’t work in Expo Go).

​
Verify Installation

Create a simple test file to confirm everything is linked correctly: 
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";
import Transition from "react-native-screen-transitions";

const Stack = createBlankStackNavigator();

export default function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={() => null}
        options={{
          ...Transition.Presets.SlideFromBottom(),
        }}
      />
    </Stack.Navigator>
  );
}
If this runs without errors, you’re ready to go.

​
Next Steps

  • Move on to Quick Start to create your first animated navigation
  • Check Stack Types to choose between Blank Stack, Native Stack, or Component Stack