# Stack Navigator

{% embed url="<https://youtu.be/Z9R_kg4ew2M>" %}

{% hint style="warning" %}
Navigators are the only component that you cannot drag and drop into your phone at the moment. You'll have to drag it left to the tree hierarchy. Make sure that screens are fully contained within your navigator.
{% endhint %}

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LB2XvXHDB4qDrPhetaf%2F-LB2bVTl1dkWWU7uUQkT%2FThunkable%20Documentation%20Exhibits%20\(85\).png?alt=media\&token=bb075e0d-c0cf-48cb-885d-855a93954729)

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LB2XvXHDB4qDrPhetaf%2F-LB2bO8jUdRfcK8n_R8a%2FThunkable%20Documentation%20Exhibits%20\(84\).png?alt=media\&token=4b122b88-4810-4189-8f26-8f0010158b9b)

## Name Your Screens

The Stack navigator creates a header bar across all screens. You can add a title to this bar by navigating to the Screen properties

| Property          | Description                                                                           |
| ----------------- | ------------------------------------------------------------------------------------- |
| Header Title      | Title of your header                                                                  |
| Header Back Title | Title of the back button on a stacked screen; if `blank`, will use the `Header Title` |

## Stack Navigator Properties

### Set Your Screen Transitions

To enable a Stack transition, you will have to add a Screen navigation block like the one below. You can find the Screen navigation block in the pre-built Control category:

![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWYeR-MpHbCPfo6qGVQ%2F-MWYgxZKV1658PjyqXWP%2Fbtn_click_1.png?alt=media\&token=70e26ef5-3b7c-4622-9118-3df655dc4379)

Screens can Stack from left to right or from top to bottom. You can set the transition style with the Stack property below:

| Property | Description                                                                                                     |
| -------- | --------------------------------------------------------------------------------------------------------------- |
| Mode     | Default (`card`); `Card` mode stacks screens from left to right while `modal` stacks screens from top to bottom |

{% hint style="warning" %}
It is not possible to use blocks to navigate from a screen **outside** of your Stack Navigator to a screen **inside** your Stack Navigator
{% endhint %}

### Hide Your Header

It is possible to hide the Header bar and maintain the Stacking transition by using the Stack property below. Hiding the Header bar will also hide the back button that makes it easier to transition to your original screen

| Property    | Description                                                       |
| ----------- | ----------------------------------------------------------------- |
| Header Mode | Default (`Screen`); If you want to hide the header, set to `none` |