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
Updated 8 months ago