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 | Set a screen or navigator as the initial route. |
Transition mode | Set the transition mode of the header. Defaults to |
Header mode | Set the mode of the header. Defaults to |
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 |
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 |
Vertical Response Distance | Set the vertical distance of touch start from the edge of the screen to recognize gestures (defaults to |
Velocity Impact | Set the number that determines the relevance of velocity for the gesture (defaults to |
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
Updated about 1 month ago