Provides a way for your app to transition between screens where each new screen is placed on top of a stack.

By default the stack navigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, fade in from the bottom on Android. On iOS, the stack navigator can also be configured to a modal style where screens slide in from the bottom.

This navigator uses native navigation primitives (UINavigationController on iOS and Fragment on Android) for navigation under the hood. The main difference from React Navigation's JS-based stack navigator is that the JS-based navigator re-implements animations and gestures while the native stack navigator relies on the platform primitives for animations and gestures. You should use this navigator if you want native feeling and performance for navigation and don't need much customization, as the customization options of this navigator are limited.

npm install react-native-screens @react-navigation/native

Make sure to enable react-native-screens. This needs to be done before our app renders. To do it, add the following code in your entry file (e.g. App.js):

import { enableScreens } from 'react-native-screens'; enableScreens();

To use this navigator, import it from react-native-screens/native-stack:

import { createNativeStackNavigator } from 'react-native-screens/native-stack'; const Stack = createNativeStackNavigator(); function MyStack() { return ( <Stack.Navigator> <Stack.Screen name="Home" component={Home} /> <Stack.Screen name="Notifications" component={Notifications} /> <Stack.Screen name="Profile" component={Profile} /> <Stack.Screen name="Settings" component={Settings} /> </Stack.Navigator> ); }

The Stack.Navigator component accepts following props:

The name of the route to render on the first load of the navigator.

Default options to use for the screens in the navigator.

The options prop can be used to configure individual screens inside the navigator. Supported options are:

A string that can be used as a fallback for headerTitle.

Whether to show or hide the header for the screen. The header is shown by default. Setting this to false hides the header.

Boolean indicating whether to hide the back button in the header. Only supported on Android.

Boolean indicating whether to hide the back button while using headerLeft function.

Boolean indicating whether to hide the elevation shadow on the header.

String to be used by the header as title string. Defaults to scene title.

Title string used by the back button on iOS. Defaults to the previous scene's headerTitle.

Whether the back button title should be visible or not. Defaults to true. Only supported on iOS.

Function which returns a React Element to display on the right side of the header.

Function which returns a React Element to display on the left side of the header. For now, on Android, using it will cause the title to also disappear.

Function which returns a React Element to display in the center of the header.

Boolean indicating whether the navigation bar is translucent. Only supported on iOS.

A Boolean to that lets you opt out of insetting the header. You may want to * set this to false if you use an opaque status bar. Defaults to true. Insets are always applied on iOS because the header cannot be opaque. Only supported on Android.

Boolean used to set a native property to prefer a large title header (like in iOS setting).

For the large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as ScrollView or FlatList. If the scrollable area doesn't fill the screen, the large title won't collapse on scroll.

Only supported on iOS.

Tint color for the header. Changes the color of the back button and title.

Style object for the header. Supported properties:

• backgroundColor

Style object for header title. Supported properties:

• fontFamily
• fontSize
• color

Style object for header back title. Supported properties:

• fontFamily
• fontSize

Style object for the scene content.

Whether you can use gestures to dismiss this screen. Defaults to true,

Gestures are only supported on iOS. They can be disabled only when stackPresentation is push.

How the screen should be presented. Possible values:

• push - The new screen will be pushed onto a stack. The default animation on iOS is to slide from the side. The animation on Android may vary depending on the OS version and theme.
• modal - The new screen will be presented modally. In addition, this allows for a nested stack to be rendered inside such screens.
• transparentModal - The new screen will be presented modally. In addition, the second to last screen will remain attached to the stack container such that if the top screen is translucent, the content below can still be seen. If "modal" is used instead, the below screen gets removed as soon as the transition ends.
• containedModal – will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android.
• containedTransparentModal – will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.
• fullScreenModal – will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android.
• formSheet – will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.

Defaults to push.

How the given screen should appear/disappear when pushed or popped at the top of the stack. Possible values:

• default - Uses a platform default animation.
• fade - Fades screen in or out.
• flip – Flips the screen, requires stackPresentation: modal (iOS only).
• none - The screen appears/disappears without an animation.

Defaults to default.

The navigator can emit events on certain actions. Supported events are:

Event which fires when the screen appears.

Example:

React.useEffect( () => { const unsubscribe = navigation.addListener('appear', e => { // Do something }); return unsubscribe; }, [navigation] );

Event which fires when the current screen is dismissed by hardware back (on Android) or dismiss gesture (swipe back or down).

Example:

React.useEffect( () => { const unsubscribe = navigation.addListener('dismiss', e => { // Do something }); return unsubscribe; }, [navigation] );

Event which fires when the current screen finishes its transition.

Example:

React.useEffect( () => { const unsubscribe = navigation.addListener('finishTransitioning', e => { // Do something }); return unsubscribe; }, [navigation] );

The stack navigator adds the following methods to the navigation prop:

Pushes a new screen to the top of the stack and navigate to it. The method accepts the following arguments:

• name - string - Name of the route to push onto the stack.
• params - object - Screen params to merge into the destination route (found in the pushed screen through route.params).

navigation.push('Profile', { name: 'Michaś' });

Pops the current screen from the stack and navigates back to the previous screen. It takes one optional argument (count), which allows you to specify how many screens to pop back by.

navigation.pop();

Pops all of the screens in the stack except the first one and navigates to it.

navigation.popToTop();

import { createNativeStackNavigator } from 'react-native-screens/native-stack'; const Stack = createNativeStackNavigator(); function MyStack() { return ( <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown: false, headerTintColor: 'white', headerStyle: { backgroundColor: 'tomato' }, }}> <Stack.Screen name="Home" component={Home} options={{ title: 'Awesome app', }} /> <Stack.Screen name="Profile" component={Profile} options={{ title: 'My profile', }} /> <Stack.Screen name="Settings" component={Settings} options={{ gestureEnabled: false, }} /> </Stack.Navigator> ); }