Native Stack Adapter | Screen Transitions

withScreenTransitions adapts the native-stack navigator supplied by the host integration.

Adapt the navigator

Pass the native-stack navigator to withScreenTransitions:

TSX

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

Enable Screen Transitions on each participating screen:

TSX

1<Stack.Screen
2  name="Detail"
3  component={DetailScreen}
4  options={{
5    enableTransitions: true,
6    gestureEnabled: true,
7    ...Transition.Presets.SlideFromBottom(),
8  }}
9/>

Use this adapter when a flow must keep native-stack headers, options, or navigator behavior. For new flows, Blank Stack gives Screen Transitions full control over the transition lifecycle.