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
| 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. |
| Border | Set the bottom border color of the header |
Back Area
| Property | Description |
|---|---|
| Icon | Set an icon for the header bar back area. |
Left Area
| Property | Description |
|---|---|
| Text & Icon Color | Set the color for the left area text and icon |
Right Area
| Property | Description |
|---|---|
| Text & Icon Color | Set the color for the right area text and icon |
Content
General
| Property | Description |
|---|---|
| Background Color | Set the background color of the header |
Configs
Basics
General
| Property | Description |
|---|---|
| Name | Set the name of the navigator. |
| Initial route | Set a screen or navigator as the initial route. Make sure this is set, especially on the Root Navigator |
| Presentation | Set 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
| Property | Description |
|---|---|
| Show Header | Set whether the top header bar should be displayed. Enabled by default. |
| Transparent | Set whether the top header bar should be transparent. Disabled by default. |
| Header Mode | Specifies 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
| Property | Description |
|---|---|
| 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. Enabled by default |
Back Area
| Property | Description |
|---|---|
| Icon | Set an icon for the header bar back area. |
| Label | Set a label for the header bar back area. |
Left Area
| Property | Description |
|---|---|
| Icon | Set an icon for the header bar left area. |
| Label | Set a label for the header bar left area. |
Right Area
| Property | Description |
|---|---|
| Icon | Set an icon for the header bar right area. |
| Label | Set a label for the header bar right area. |
Content
General
| 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 Enabled on Android and Disabled on iOS. |
Gestures & Animation
Gestures
| Property | Parameter |
|---|---|
| Gestures | Enable so that gestures can be used to dismiss the screen. Default is Enabled |
| 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
| Property | Parameter |
|---|---|
| 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 | Extra 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
Updated 6 months ago