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.

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
Mode	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 Enabled	True/False	Select whether or not to animate the transitions between screens.