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 navigatorIf you need to change the configuration of individual screens, you can select a while the navigation menu is open to configure overrides.
Parameter | Description |
Use App Theme | Enable to apply the default theme styling to navigation (set under Basic Settings. |
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. |
Parameter | Description |
Color |
Parameter | 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. |
Header mode | Set the mode of the 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 |
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). |
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. |
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. |
React Navigation - createStackNavigator StackNavigator reference
Updated 7 months ago
Last updated