Screen
When building apps on Thunkable, Screens function like blank pages in a book. They allow you to display different components and information.
The
Horizontal Alignment
property allows you to space elements in a Screen horizontally

.png?alt=media&token=1ba52eab-7db8-47bf-9334-ae6c90dea0cd)
The
Vertical Alignment
property allows you to space elements in a Screen vertically

Property | Description |
Background Color | Default ( none ). Select any color using the color picker, RGBA or HEX value |
Background Picture | You can upload a background image to your app or reference an image url e.g. beaver-yellow.png |
This determines how to resize the image when the frame doesn't match the raw image dimensions.

- Cover: Fills the entire screen without changing the height and width ratio of the image
- Contain: The entire image will be scaled down to fit inside the screen, without changing the height and width ratio of the image
- Stretch: The image's height will change to fill the screen length-wise
- Repeat: Repeat the image to cover the screen. The image's height and width ratiowill not change
- Center: Positions the image in the middle of the frame

Property | Description |
Scrollable | Default ( false ). Indicates whether the screen is scrollable. For scrollable to work, the components in your screen must have heights either set in absolute pixels or set to fit contents |
Property | Description |
Screen Orientation | Default ( all ). You can fix the screen orientation to portrait and landscape |
Property | Description |
Show StatusBar | Default ( true ). If set to false , hides the top status bar |
Property | Description |
StatusBar Style | Choose between default , light-content or dark-content to set the theme or style of the status bar |
Please Note: The
Translucent StatusBar
property will only work on Android devices at this time.Property | Description |
Translucent StatusBar | Default ( false ). Set to true to make the Status Bar translucent. Android-only. |
Please Note: The
StatusBar Color
property will only work on Android devices at this time.Property | Description |
StatusBar Color | Default ( 0,0,0,0.53 ). Select any color using the color picker, RGBA or HEX value. Android-only. |
Thunkable allows you to reuse a screen, and its associated blocks, in multiple projects with the "Save to My Screens" feature. You can find the save screen button at the top of the properties for every screen component in your app.

It's important that when you save your screen you use a descriptive and memorable name that describes what your screen does. The example below is for a sign in screen, which is something that often get reused across multiple projects.

Once you've saved a screen, any time you click the
+
button to add a new screen you will be given the option to add a blank screen or to "Copy from My Screens".
Simply choose the screen that you want to add in and click the "Copy" button to proceed.


Event | Description |
Starts | Fires when the Screen is first opened |

Event | Description |
Opens | Fires anytime the Screen is opened |

Event | Description |
BackButtonPressed | Fires when the physical or on-screen back button is pressed. (Android only) |

Function | Description |
ToggleDrawerMenu | Opens or Closes the drawer menu, if available. Must be used in conjunction with the Drawer Navigator |
Last modified 11mo ago