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)

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

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

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)

Last modified 1mo ago