Screens are the foundation of your app's user interface (UI). All apps have one or more Screens, and each Screen can have their own Styling, Variables, Functions, and more.

All the other available components, such as View, Button, and Text are nested inside a Screen in the component tree as child components.

Screens can be added to Stack and Tab navigators to organize different parts of your app. You can also navigate between Screens using the Navigate Action from an interactive component like a Button, Link, or Pressable.

Adding a Screen to your app

To add a Screen to the app:

  • Click the + button in the top-right of the Screens list.
  • Select Add Blank to add an empty Screen to your app or Add Example Screen to open the templates modal to select a pre-built Screen.

Renaming a Screen

A Screen can be renamed by double-clicking it in the Screens list, typing a new name, and then hitting the Enter key.

You can also rename a Screen by going to the Config tab and updating the Name prop.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Configuration Properties

Basic

PropertyDescription
NameTo alter the name of the screen. The name is reflected in the Screen list at the top left in the builder, used when navigating using custom code, and in the file name of the actual codebase.
Defaults to Blank.
DescriptionAdd an optional description of the Screen.
Status Bar ColorThis will adjust the color of the text (clock...) and icons (battery...) in the operating system's Status Bar to accommodate the background color. Defaults to Default.
Default: Uses the system's setting
Dark: Explicitly sets the text and icons to dark
Light: Explicitly sets the text and icons to light
ScrollableIf enabled, screen height will increase as per the content within it and will be scrollable to show the content in the visible area. Disabled by default.

Advanced

Enabling Safe Area View on a Screen can help display content correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content. Such items include:

  • Physical notches
  • Status bar overlay
  • Home activity indicator on iOS
  • Navigation bar on Android
PropertyDescription
Safe Area ViewEnable to add safe area to the top and bottom of the Screen. Useful to enable when the Screen is in a Stack Navigator's with a hidden header and not in a Tab Navigator.
Top Safe Area ViewEnable to add safe area to the top of the top of the Screen. Useful to enable when the Screen is in a Stack Navigator's with a hidden header.
Bottom Safe Area ViewEnable to add safe area to the bottom of the Screen. Useful to enable when the Screen is not in a Tab Navigator.

Data Properties

Navigation Params

Navigation parameters allow you to pass data to a Screen when navigating to it.

For instance, if you have a Screen with a List of properties and another Screen that displays a single property's details, you can add a navigation parameter to the details Screen of id. Then you'll be able to pass the list item's id value from the list Screen when you navigate to the details Screen where you can make a request to your API to fetch the details to display.

PropertyDescription
Parameter NameEnter a name and click the ✔️ button to add a navigation parameter.

Deep Linking

Deep Linking is an advanced feature which allows you to open a specific Screen in your app from a website or another app.

In order to access a Screen from a different app, type the provided URL into a web browser. This will only work if you're using the Draftbit Live Preview app or if you export your project

PropertyDescription
Create Deep Link for this ScreenEnable to create a deep link to the current Screen

Triggers

NameDescription
On Screen FocusRuns every time the user navigates to the Screen
On Screen BlurRuns every time the user navigates away from the Screen