Links

Screens

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 New Screen icon at the top of your components 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:
  1. 1.
    Click on a screen name in the component tree (A) or the screen itself within your workspace (B).
  2. 2.
    Type ctrl+c or command+c on Mac, and ctrl+c on PC, to copy the screen.
  3. 3.
    Type ctrl+v or command+v on Mac, and ctrl+v on PC, to paste a duplicate of the screen.
  4. 4.
    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 absolute pixels or set to fit contents.
True/False
Background Color
Default (none). Select any color using the color picker, RGBA or HEX value
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 [cover, contain, stretch, repeat, center]
Orientation (iOS and Android only)
Define the screen's orientation.
Select from list [portrait, landscape, auto]

* 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 and Reuse Screens

Thunkable allows you to reuse a screen, and its associated blocks, in multiple projects.
This feature is available with the Thunkable Teams plan. See here for more information: Thunkable pricing.

Save Screen

  1. 1.
    Select the screen in the Designer.
  2. 2.
    Click the vertical elipses at the top of the screen's properties pane.
  3. 3.
    Click Save Screen.
  4. 4.
    Give your screen a descriptive name.
  5. 5.
    Click Save.

Add Screen to Another Project

  1. 1.
    Open the project in which you'd like to add the saved screen.
  2. 2.
    Click the upside-down arrow at the top of the Designer's component tree.
  3. 3.
    Click Add From Saved Screens.
  4. 4.
    Select the screen you want to add.
  5. 5.
    Click Copy.

Errors

When a saved screen is added to a new project, you may notice some errors in the blocks that you’ll need to address. This is because the app you have added the screen to doesn’t necessarily have the same features. For example, the blocks may navigate the user to a screen that doesn’t exist in the new app. Another example of an error that would need to be addressed is if the screen had a data viewer, but the data source wasn’t connected to this project.

View All Saved Screens

  1. 1.
    Navigate to your Projects Page.
  2. 2.
    Click My Screens in the upper left.
  3. 3.
    On you My Screens page you can view your screens, rename them, and delete screens you no longer need.

Disable app screen preview

You can disable screen preview for apps with many screens to improve platform performance and load time. When enabled, the project only loads the screen you're working on, and the others are paused.
To disable app screen preview:
  1. 1.
    Click your account avatar or icon in the upper right corner.
  2. 2.
    Select Settings.
  3. 3.
    Click the FEATURES tab.
  4. 4.
    Toggle on Disable app screen preview.

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.