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():

Expo SDK 56 changes Expo Router's navigator internals. This package does not currently support SDK 56 without replacing the internal React Navigation imports with Expo Router imports.

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