Screen

Video Tutorials

Appearance and Layout

Space Elements Horizontally

The Horizontal Alignment property allows you to space elements in a Screen horizontally

Space Elements Vertically

The Vertical Alignment property allows you to space elements in a Screen vertically

Add a Background Color or Picture

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

Enable Scrolling

Set Orientation

Status Bar

Hide (or show) Status Bar

Status Bar Theme

Status Bar Opacity

Status Bar Color

Save Screen

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 to add a new screen you will be given the option to add a blank screen or to "Copy from My 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

when Screen1 Opens

when Screen1 Closes

when Screen1 BackButtonPressed

in Screen1 call ToggleDrawerMenu