Stack Navigator
Last updated
Last updated
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.
In this tutorial, we'll explore what a stack navigator is and provide step-by-step instructions on implementation.
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.
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.
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.
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.
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.
