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

PropertyDescription
Use App ThemeEnable to apply the default theme styling to navigation (set under Basic Settings).

Only available on Root Navigator.

Header

General

PropertyDescription
FontSet the font of the text in the header.
SizeSet the size of font of the text in the header.
Line SpacingSet the line spacing on the text in the header.
Line HeightSet the line height on the text in the header.
Text ColorSet the color of the text in the header.
Background ColorSet the background color of the header.
BorderSet the bottom border color of the header

Back Area

PropertyDescription
IconSet an icon for the header bar back area.

Left Area

PropertyDescription
Text & Icon ColorSet the color for the left area text and icon

Right Area

PropertyDescription
Text & Icon ColorSet the color for the right area text and icon

Content

General

PropertyDescription
Background ColorSet the background color of the header

Configs

Basics

General

PropertyDescription
NameSet the name of the navigator.
Initial routeSet a screen or navigator as the initial route. Make sure this is set, especially on the Root Navigator
PresentationSet 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

PropertyDescription
Show HeaderSet whether the top header bar should be displayed. Enabled by default.
TransparentSet whether the top header bar should be transparent. Disabled by default.
Header ModeSpecifies 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

PropertyDescription
TitleSet the title of the header.
AlignSet the alignment of the header. Defaults to Left.
Allow Font ScalingEnable so that the label font will scale to meet Text Size accessibility settings. Enabled by default

Back Area

PropertyDescription
IconSet an icon for the header bar back area.
LabelSet a label for the header bar back area.

Left Area

PropertyDescription
IconSet an icon for the header bar left area.
LabelSet a label for the header bar left area.

Right Area

PropertyDescription
IconSet an icon for the header bar right area.
LabelSet a label for the header bar right area.

Content

General

PropertyDescription
Card ShadowsEnable so that the shadow of the card appears during transitions. Default value is Enabled.
Card OverlayEnable so that a semi-transparent overlay appears under the card during transitions. Defaults to Enabled on Android and Disabled on iOS.

Gestures & Animation

Gestures

PropertyParameter
GesturesEnable so that gestures can be used to dismiss the screen. Default is Enabled
Horizontal Response DistanceSet the horizontal distance of touch start from the edge of the screen to recognize gestures. Defaults to 50.
Vertical Response DistanceSet the vertical distance of touch start from the edge of the screen to recognize gestures (defaults to 135).
Velocity ImpactSet the number that determines the relevance of velocity for the gesture (defaults to 0.3).
DirectionSet the direction of the gestures.

Animation

PropertyParameter
AnimationSet to enable transition animations.

Advanced

PropertyDescription
Keyboard HandlingEnable so keyboard automatically dismisses when navigating to a new screen.
Status Bar HeightExtra 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