Screen
When building apps on Thunkable, Screens function like blank pages in a book. They allow you to display different components and information.
Adding a Screen to your Project
There are two ways to add a new screen to your app:
Click the + icon next to your Screen names in the Screens bar.
Click Screens + at the top of your component tree. Select Create New Screen.
Copy and paste components
Once you’ve perfected the design of a screen on the Design tab of a drag and drop project you can duplicate it using copy and paste keyboard shortcuts.
To copy and paste a screen:
Click on a screen name in the component tree (A) or the screen itself within your workspace (B).
Type ctrl+c or command+c on Mac, and ctrl+c on PC, to copy the screen.
Type ctrl+v or command+v on Mac, and ctrl+v on PC, to paste a duplicate of the screen.
The new screen will be added to the right of the existing screen.
Screen Properties
Screen
| Property | Description | Data Type |
|---|---|---|
Scrollable | Select whether your user can scroll on this screen. For scrollable to work, the components in your screen must have heights either set in | True/False |
Background Color | Default ( | Color |
Background Image | The image file to be shown in the tab's background | PNG, JPG, GIF, SVG, etc. Can also use URL that ends in file extension (eg https://thunkable.com/static/media/logo.ba96eb83.png) |
Background Image Resize Mode* | Set how image is shown if the file and the tab component have different dimensions/aspect ratio | Select from list |
Orientation (iOS and Android only) | Define the screen's orientation. | Select from list |
* Background Picture Resize Mode
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 ratio will not change
Center: Positions the image in the middle of the frame
Status Bar
The status bar is located at the top of a phone's screen. The status bar displays information regarding signal strength, battery, and whether or not things like the alarm or wi-fi are enabled.
| Property | Description | Data Type |
|---|---|---|
Visibility | Decide whether you want the status bar visible on the screen. | True/False |
Style | Default is best practice, but you can select light-content or dark-content to potentially override the user's phone settings. | Select from menu (default, light-content, dark-content) |
Color (Android only) | Color of the status bar. | Color |
Translucent (Android only) | When translucent is set to true, the app will appear under the status bar. | True/False |
Save Screen
This feature is available to users with a Team level subscription only at this time.
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.
Name Your Screen
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.
Add a New Screen
Once you've saved a screen, any time you click the + button at the top of your component tree to add a new screen to your project, you will be given the option to add a blank screen or to "Add From Saved Screens".
Choose a Saved Screen
Simply choose the screen that you want to add in and click the "Copy" button to proceed.
Screen Blocks
when Screen1 Starts
Event | Description |
Starts | Fires when the Screen is first opened |
when Screen1 Opens
Event | Description |
Opens | Fires anytime the Screen is opened |
when Screen1 BackButtonPressed
Event | Description |
BackButtonPressed | Fires when the physical or on-screen back button is pressed. (Android only) |
in Screen1 call ToggleDrawerMenu
Function | Description |
ToggleDrawerMenu | Opens or Closes the drawer menu, if available. Must be used in conjunction with the Drawer Navigator |
Screen-Specific Navigator Properties
When you add a Screen to a Navigator, you will see a new section for Navigation Options in your Screen's Properties panel. You can read about these properties in the Top Tab Navigator, Bottom Tab Navigator, and Drawer Navigator docs.
Last updated
