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

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

Only available on Root Navigator.

Header

1400

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.
Back Area IconSet the color of the icon selected to display as the Back Area in the header.
Left Area Text & IconSet the color of the text and icon displayed on the left-hand side of the header.
Right Area Text & IconSet the color of the text and icon displayed on the right-hand side of the header.

Content

1400
PropertyDescription
ColorSet the color of properties under Content.

Configs

Basics

1400
PropertyDescription
NameSet 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 modeSet the transition mode of the header. Defaults to Card.
Header modeSet the mode of the header. Defaults to Screen.

Header

1400
PropertyDescription
TransparentEnable so that the header appears transparent.
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 (defaults to true).
Back Area IconSet the icon for the Back Area of the header
Back Area LabelSet the label for the Back Area of the header
Left Area IconSet the icon for the left-hand side of the header.
Left Area LabelSet a label for the left-hand side of the header.
Right Area IconSet the icon for the right-hand side of the header.
Right Area LabelSet a label for the right-hand side of the header.

Content

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

Gestures & Animation

1400
PropertyParameter
GesturesEnable so that gestures can be used to dismiss the screen.
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.
AnimationSet to enable transition animations.

Advanced

1400
PropertyDescription
Keyboard HandlingEnable so keyboard automatically dismisses when navigating to a new screen.
Status Bar HeightSet the amount of padding to be added to the top of the header to account for a translucent status bar.

Additional Resources