Links

Stack Navigator

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.

Stack Navigator Properties

Set Your Screen Transitions

To enable a Stack transition, add a Screen navigation block like the one below. You can find the Screen navigation block in the Control drawer of blocks:
Property
Description
Data Type
Mode
Define how your screens will stack.
Select from list: card - new screens slide in from the left modal - new screens slide in from the bottom

Header Mode

Property
Description
Data Type
HeaderMode
Define how the header appears in your app.
Select from list: float - headers fade in with the screen change screen - headers slide with the screen change

Header Shown

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 the previous screen.
Property
Description
Data Type
HeaderShown
Define if the header appears in your app.
Toggle:
true (blue) - show header false (grey) - hide header (including the back arrow)