Screen

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.

Disabling/Hiding a Screen

You can prevent a Screen from being included in your exported or published app by clicking the icon to the left of the Screen name in the Screens List.

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

Advanced

Enabling Safe Area View on a Screen can help display content correctly on devices with notches and UI elements which may overlap the app content. Learn more in the Safe Area doc.

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.

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

Triggers