Getting Started | Screen Transitions

This page covers only the Screen Transitions navigator setup. It assumes your app already has Expo Router or React Navigation configured.

Expo Router

Screen Transitions exports a BlankStack that is ready to use in an Expo Router layout. Replace the stack in the layout where you want Screen Transitions:

TSX

1// app/_layout.tsx
2import { GestureHandlerRootView } from "react-native-gesture-handler";
3import Transition from "react-native-screen-transitions";
4import { BlankStack } from "react-native-screen-transitions/expo-router";
5
6export default function RootLayout() {
7  return (
8    <GestureHandlerRootView style={{ flex: 1 }}>
9      <BlankStack>
10        <BlankStack.Screen name="index" />
11        <BlankStack.Screen
12          name="detail"
13          options={Transition.Presets.SlideFromBottom()}
14        />
15      </BlankStack>
16    </GestureHandlerRootView>
17  );
18}

You can use BlankStack in the root layout or a nested _layout.tsx. Only the routes inside that layout participate in its transition stack.

Expo Router remains responsible for routing. Continue to navigate with router.push(), router.replace(), router.back(), or Link as usual.

Screen Transitions exports the same Blank Stack for React Navigation through its React Navigation entry point:

TSX

1import { NavigationContainer } from "@react-navigation/native";
2import { GestureHandlerRootView } from "react-native-gesture-handler";
3import Transition from "react-native-screen-transitions";
4import { createBlankStackNavigator } from "react-native-screen-transitions/react-navigation";
5
6const Stack = createBlankStackNavigator();
7
8export default function App() {
9  return (
10    <GestureHandlerRootView style={{ flex: 1 }}>
11      <NavigationContainer>
12        <Stack.Navigator>
13          <Stack.Screen name="Home" component={HomeScreen} />
14          <Stack.Screen
15            name="Detail"
16            component={DetailScreen}
17            options={Transition.Presets.SlideFromBottom()}
18          />
19        </Stack.Navigator>
20      </NavigationContainer>
21    </GestureHandlerRootView>
22  );
23}

Your screens continue to use navigation.navigate(), navigation.goBack(), and the rest of the standard React Navigation API.

Adapting a native stack

withScreenTransitions wraps an existing native stack so individual screens can use Screen Transitions animations while the rest retain native-stack behavior:

TSX

1import { createNativeStackNavigator } from "@react-navigation/native-stack";
2import { withScreenTransitions } from "react-native-screen-transitions";
3
4const NativeStack = createNativeStackNavigator();
5const Stack = withScreenTransitions(NativeStack);

Use the adapter when you specifically need a native stack. For a stack driven entirely by Screen Transitions, use Blank Stack.