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:
Click the dropdown arrow at the top of your component tree.
Hover over Add Navigator.
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:
|
HeaderMode | float or screen | Define how the header behaves:
|
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. |
Last updated
