Stack Navigator

Stack Navigators are the most common form of the navigator. They allow you to move between Screens in your app as you navigate through a stack of cards in a deck. When you navigate to a Screen, by default it puts that Screen on top of the deck, preserving the history so you can go backward.

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 and for Android it uses the device OS default animation. But the animations can be customized to match your needs.

The changes made in a Stack Navigator's Config settings will apply to all screens within the navigator. If you need to change the configuration of individual screens, you can select a Screen while the navigation menu is open to configure overrides.

Adding a Stack Navigator

Make sure you're in the Navigate view in the Builder, then click the + button at the top-left above the navigation hierarchy in the left panel, and select Stack Navigator.

Adding Screens to a Stack Navigator

You can add Screens to a Stack Navigator by dragging and dropping the Screen under the desired Stack Navigator in the left-side panel.

Configuring a Stack Navigator

Select the Stack Navigator you'd like to configure from the left panel. Once selected, the right panel will update with the available properties in the Styles and Config tabs.

Styles

Theme

Property	Description
Use App Theme	Enable to apply the default theme styling to navigation (set under Basic Settings). Only available on Root Navigator.

Property

Description

Use App Theme

Enable to apply the default theme styling to navigation (set under Basic Settings).

Only available on Root Navigator.

Header

General

Property	Description
Font	Set the font of the text in the header.
Size	Set the size of font of the text in the header.
Line Spacing	Set the line spacing on the text in the header.
Line Height	Set the line height on the text in the header.
Text Color	Set the color of the text in the header.
Background Color	Set the background color of the header.
Border	Set the bottom border color of the header

Back Area

Property	Description
Icon	Set an icon for the header bar back area.

Left Area

Property	Description
Text & Icon Color	Set the color for the left area text and icon

Right Area

Property	Description
Text & Icon Color	Set the color for the right area text and icon

Content

General

Property	Description
Background Color	Set the background color of the header

Configs

Basics

General

Property	Description
Name	Set the name of the navigator.
Initial route	Set a screen or navigator as the initial route. Make sure this is set, especially on the Root Navigator
Presentation	Set the presentation mode of the header. Defaults to `Card`. `Card`: Use the default OS animations for iOS and Android screen transitions. `Modal`: Use Modal animations. This changes a few things: Sets headerMode to screen for the screen unless specified otherwise. Changes the screen animation to match the platform behavior for modals. `Transparent Modal`: Similar to modal. This changes following things: Sets headerMode to screen for the screen unless specified otherwise. Sets background color of the screen to transparent, so previous screen is visible Adjusts the detachPreviousScreen option so that the previous screen stays rendered. Prevents the previous screen from animating from its last position. Changes the screen animation to a vertical slide animation.

Property

Description

Name

Set the name of the navigator.

Initial route

Set a screen or navigator as the initial route. Make sure this is set, especially on the Root Navigator

Presentation

Set the presentation mode of the header. Defaults to Card.

Card: Use the default OS animations for iOS and Android screen transitions.
Modal: Use Modal animations. This changes a few things:
Sets headerMode to screen for the screen unless specified otherwise.
Changes the screen animation to match the platform behavior for modals.
Transparent Modal: Similar to modal. This changes following things:
Sets headerMode to screen for the screen unless specified otherwise.
Sets background color of the screen to transparent, so previous screen is visible
Adjusts the detachPreviousScreen option so that the previous screen stays rendered.
Prevents the previous screen from animating from its last position.
Changes the screen animation to a vertical slide animation.

Header

General

Property	Description
Show Header	Set whether the top header bar should be displayed. Enabled by default.
Transparent	Set whether the top header bar should be transparent. Disabled by default.
Header Mode	Specifies how the header should be rendered. Defaults to `Screen`. `Float` - Render a single header that stays at the top and animates as screens are changed. This is default on iOS. `Screen` - Each screen has a header attached to it and the header fades in and out together with the screen. This is default on other platforms.

Property

Description

Show Header

Set whether the top header bar should be displayed. Enabled by default.

Transparent

Set whether the top header bar should be transparent. Disabled by default.

Header Mode

Specifies how the header should be rendered. Defaults to Screen.

Float - Render a single header that stays at the top and animates as screens are changed. This is default on iOS.
Screen - Each screen has a header attached to it and the header fades in and out together with the screen. This is default on other platforms.

Title

Property	Description
Title	Set the title of the header.
Align	Set the alignment of the header. Defaults to `Left`.
Allow Font Scaling	Enable so that the label font will scale to meet Text Size accessibility settings. Enabled by default

Back Area

Property	Description
Icon	Set an icon for the header bar back area.
Label	Set a label for the header bar back area.

Left Area

Property	Description
Icon	Set an icon for the header bar left area.
Label	Set a label for the header bar left area.

Right Area

Property	Description
Icon	Set an icon for the header bar right area.
Label	Set a label for the header bar right area.

Content

General

Property	Description
Card Shadows	Enable so that the shadow of the card appears during transitions. Default value is `Enabled`.
Card Overlay	Enable so that a semi-transparent overlay appears under the card during transitions. Defaults to `Enabled` on Android and `Disabled` on iOS.

Gestures & Animation

Gestures

Property	Parameter
Gestures	Enable so that gestures can be used to dismiss the screen. Default is `Enabled`
Horizontal Response Distance	Set the horizontal distance of touch start from the edge of the screen to recognize gestures. Defaults to `50`.
Vertical Response Distance	Set the vertical distance of touch start from the edge of the screen to recognize gestures (defaults to `135`).
Velocity Impact	Set the number that determines the relevance of velocity for the gesture (defaults to `0.3`).
Direction	Set the direction of the gestures.

Animation

Property	Parameter
Animation	Set to enable transition animations.

Advanced

Property	Description
Keyboard Handling	Enable so keyboard automatically dismisses when navigating to a new screen.
Status Bar Height	Extra padding to add at the top of header to account for translucent status bar

Nesting Navigators

You can also nest Stack Navigators within other Stack and Tab Navigators and they can have their own nested Screens as well.

To add a Stack Navigator inside another Navigator, select the Navigator you wish to add to then click the + button and select Stack Navigator or drag-and-drop and existing Stack Navigator inside another.

Additional Resources

StackNavigator reference from React Navigation