Stack Navigator
Stack Navigators are the most common form of navigator. They allow you to move between screens in your app like 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 backwards.
The changes made in the 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
Parameter | Description |
|---|---|
Use App Theme | Enable to apply the default theme styling to navigation (set under Basic Settings. |
Header
Description | Parameter |
|---|---|
Font | Set the font of 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. |
Color | Set the color of the content on the left and right-hand sides of the header. |
Content
Parameter | Description |
|---|---|
Color |
Configs
Basics
Parameter | 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. |
Header mode | Set the mode of the header. |
Header
Parameter | Description |
|---|---|
Transparent | Enable so that the header appears transparent. |
Title | Set the title of the header. |
Alignment | Set the alignment of the header. |
Allow Font Scaling | Enable so that the label font will scale to meet Text Size accessibility settings (defaults to true). |
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
Parameter | Description |
|---|---|
Card Shadows | Enable so that the shadow of the card appears during transitions (defaults to true). |
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
Description | 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. |
Direction | Set the direction of the gestures. |
Animation | Set to enable transition animations. |
Advanced
Parameter | 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. |
Resources
React Navigation - createStackNavigator
StackNavigator reference
Updated about 1 year ago