React Navigation | Screen Transitions

React Navigation is the stable navigation host for Screen Transitions.

Complete the host setup in React Navigation's Getting Started guide before adding Blank Stack.

Create a Blank Stack

Import the navigator factory from the React Navigation entry point:

TSX

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

Continue to Quick Start for the transition APIs shared by every navigation host.