> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/screen.md).
# 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:
1. Click on a screen name in the component tree (A) or the screen itself within your workspace (B).
2. Type **ctrl+c** or **command+c** on Mac, and **ctrl+c** on PC, to copy the screen.
3. Type **ctrl+v** or **command+v** on Mac, and **ctrl+v** on PC, to paste a duplicate of the screen.
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 )
|
| 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 Screen
{% hint style="warning" %}
This feature is available to users with a Team level subscription only at this time.
{% endhint %}
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](/~/changes/wHhkjLVeheBnfbpghRnw/drawer-navigator.md) |
## 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](/~/changes/wHhkjLVeheBnfbpghRnw/top-tab-navigator.md#screen-specific-tab-navigator-properties), [Bottom Tab Navigator](/~/changes/wHhkjLVeheBnfbpghRnw/bottom-tab-navigator.md#screen-specific-tab-navigator-properties), and [Drawer Navigator](/~/changes/wHhkjLVeheBnfbpghRnw/drawer-navigator.md#screen-specific-drawer-navigator-properties) docs.
