# Stack Navigator ## Overview In mobile app development, a stack navigator is a navigation pattern that allows users to navigate between different screens in a linear manner.

It is commonly used for navigation flows with hierarchy, where the user moves forward and backward through a series of screens. When a new screen is opened, it becomes the topmost screen in the stack, and the user sees it displayed on their device. The previously visible screens remain in the stack but are temporarily hidden. When the user navigates back, the topmost screen is popped off the stack, revealing the previous screen. For example, in an account creation flow, the stack navigator would handle the progression from creating an account, completing a user profile, and uploading a profile image.

## Video Tutorial ### How to Use the Thunkable Stack Navigator In this tutorial, we'll explore what a stack navigator is and provide step-by-step instructions on implementation. {% embed url="" %} ## Add a Navigator To add a navigator to your app: 1. Click the dropdown arrow at the top of your component tree. 2. Hover over **Add Navigator**. 3. Select the navigator you want to add.

## Add Screens to a Stack Navigator To add an additional screen to your stack navigator, create a new screen and, within the component tree, drag it to nest within the stack navigator component. To remove a screen, delete it in the component tree. ## Set Your Screen Transitions For users to proceed further into the stack, you must add a screen navigation block like the one below to each screen within your stack navigator.

The navigate to block can be found under the Core blocks heading in the Control drawer of blocks.

## Stack Navigator Properties Click on the stack navigator in the component tree to access the navigator’s properties panel. Here, on the right side, you can customize the properties specific to the navigator.

Property	Value	Description
Presentation	card or modal	Define how your screens stack: card - new screens slide in from the left modal - new screens slide in from the bottom
HeaderMode	float or screen	Define how the header behaves: float - headers fade in with the screen change screen - headers slide with the screen change
HeaderShown	True/False	Define whether or not the header is displayed. When set to false, the header is hidden, including the back arrow typically used to navigate back in the stack navigator.
Animation	default, fade, or none	Define how the animation loads when screens are pushed or popped: default - Default animation based on the platform and OS version. fade - Simple fade animation for dialogs. none - The screens are pushed or popped immediately without any animation.