Skip to main content

​
Install The Package

npm install react-native-screen-transitions

​
Install The Peer Dependencies

The current package peer surface on main is: 
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
Use these floors:
  • @react-navigation/native >= 6.0.0
  • @react-navigation/native-stack >= 7.0.0
  • @react-navigation/elements >= 2.0.0
  • react-native-reanimated >= 3.16.0 or 4.x
  • react-native-gesture-handler >= 2.16.1
  • react-native-screens >= 4.4.0
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

​
Reanimated Setup

Import Reanimated once at the top of your app entry file: 
import "react-native-reanimated";
Then keep the Babel plugin last: 
module.exports = {
  presets: [
    /* your presets */
  ],
  plugins: [
    /* your plugins */
    "react-native-reanimated/plugin",
  ],
};

​
Optional Dependencies

Install these only when you use them: 
# For legacy masked-view flows and shared presets
npm install @react-native-masked-view/masked-view

# For Expo Router
npm install expo-router expo

​
Native Project Step

For bare React Native projects: 
cd ios && pod install

​
Expo Notes

If you need masked-view based flows in Expo, use prebuild. They do not work in Expo Go: 
npx expo prebuild --clean
npx expo run:ios   # or android

​
Gesture Root

The library’s stack core already mounts GestureHandlerRootView and SafeAreaProviderCompat for its own navigators. You do not need an extra app-wide GestureHandlerRootView just to use blank stack or native stack from this library.

​
Verify Installation

If this renders and navigates without Reanimated or Gesture Handler errors, the base setup is correct: 
import { NavigationContainer } from "@react-navigation/native";
import Transition from "react-native-screen-transitions";
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";

const Stack = createBlankStackNavigator();

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

​
Next Steps