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, it puts that screen on top of the deck, preserving the history so you can always go backward.

📘

The changes made in a Stack Navigator's config panel will apply to all screens within the navigator

If you need to change the configuration of individual screens, you can select a while the navigation menu is open to configure overrides.

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.

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.

Back Area Icon

Set the color of the icon selected to display as the Back Area in the header.

Left Area Text & Icon

Set the color of the text and icon displayed on the left-hand side of the header.

Right Area Text & Icon

Set the color of the text and icon displayed on the right-hand side of the header.

Content

Property

Description

Color

Set the color of properties under Content.

Configs

Basics

Property

Description

Name

Set the name of the navigator.

Initial route
(Make sure this is set, especially on the Root Navigator)

Set a screen or navigator as the initial route.

Transition mode

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

Header mode

Set the mode of the header. Defaults to Screen.

Header

Property

Description

Transparent

Enable so that the header appears transparent.

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 (defaults to true).

Back Area Icon

Set the icon for the Back Area of the header

Back Area Label

Set the label for the Back Area of the header

Left Area Icon

Set the icon for the left-hand side of the header.

Left Area Label

Set a label for the left-hand side of the header.

Right Area Icon

Set the icon for the right-hand side of the header.

Right Area Label

Set a label for the right-hand side of the header.

Content

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 true on Android and false on iOS).

Gestures & Animation

Property

Parameter

Gestures

Enable so that gestures can be used to dismiss the screen.

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

Set to enable transition animations.

Advanced

Property

Description

Keyboard Handling

Enable so keyboard automatically dismisses when navigating to a new screen.

Status Bar Height

Set the amount of padding to be added to the top of the header to account for a translucent status bar.

Additional Resources


Did this page help you?