# 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.

| Parameter         | Description                                                                                                                                       |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Use App Theme** | Enable to apply the default theme styling to navigation (set under [Basic Settings](https://docs.flexmoney.uk/documentation/draftbit/draftbit-5). |

| 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.                  |
| <p><strong>Initial route</strong><br> (<em>Make sure this is set, especially on the Root Navigator</em>)</p> | 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](https://reactnavigation.org/docs/en/stack-navigator.html)\
&#x20;[StackNavigator reference](https://reactnavigation.org/docs/1.x/stack-navigator/)

![](https://cdn.readme.io/img/book-icon.svg?1613687634098) Updated 7 months ago

* [Table of Contents](https://docs.flexmoney.uk/documentation/draftbit/stack-navigator)
  * &#x20;[Styles](#styles)
    * [Theme](#theme)
    * [Header](#header)
    * [Content](#content)
  * &#x20;[Configs](#configs)
    * [Basics](#basics)
    * [Header](#header-1)
    * [Content](#content-1)
    * [Gestures & Animation](#gestures--animation)
    * [Advanced](#advanced)
    * [Resources](#resources)