Adapters | Screen Transitions

Adapters let an existing navigator use the screen transition runtime without moving to one of this package's bundled navigator creators.

withScreenTransitions

Use withScreenTransitions() when your app primarily uses React Navigation's native stack and you want specific screens to support custom screen transitions without giving up the native-stack behavior your app already depends on.

Wrap the native-stack navigator with the adapter to make its screens transition aware. For longer multi-screen custom-motion flows, prefer Blank Stack instead.

TSX

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

Don't forget to set enableTransitions to true when you want this screen to use custom transitions.

TSX

1<Stack.Screen
2  name="Detail"
3  component={DetailScreen}
4  options={{
5    enableTransitions: true,
6    gestureEnabled: true,
7    transitionSpec: {
8      open: Transition.Specs.DefaultSpec,
9      close: Transition.Specs.DefaultSpec,
10    },
11    screenStyleInterpolator: () => {
12      "worklet";
13
14      return {
15        content: {
16          style: {
17            // ...
18          },
19        },
20      };
21    },
22  }}
23/>;

Expo Router

For Expo Router, wrap the adapted native stack with withLayoutContext():

This v3 adapter supports Expo Router through Expo SDK 55. Expo Router forked its navigation internals in SDK 56, so SDK 56+ apps must use the separate v4 alpha Expo Router integration.

TSX

1import { createNativeStackNavigator } from "@react-navigation/native-stack";
2import { withLayoutContext } from "expo-router";
3import { withScreenTransitions } from "react-native-screen-transitions";
4
5const NativeStack = createNativeStackNavigator();
6const Stack = withScreenTransitions(NativeStack);
7
8export const ScreenTransitionsStack = withLayoutContext(Stack.Navigator);

Blank stack is still the default recommendation for custom motion. Use the native-stack adapter when the app already depends on native-stack behavior and only needs selected screens or flows to participate in custom transitions.

withScreenTransitions

Expo Router

Related Reading