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.
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.
A Screen can be renamed by double-clicking it in the Screens list, typing a new name, and then hitting the
You can also rename a Screen by going to the Config tab and updating the Name prop.
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.
|To 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.
|Add an optional description of the Screen.
|Status Bar Color
|This 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: Uses the system's setting
Dark: Explicitly sets the text and icons to dark
Light: Explicitly sets the text and icons to light
|If 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.
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
|Safe Area View
|Enable 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 View
|Enable 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 View
|Enable to add safe area to the bottom of the Screen. Useful to enable when the Screen is not in a Tab Navigator.
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.
|Enter a name and click the
✔️ button to add a navigation parameter.
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
|Create Deep Link for this Screen
|Enable to create a deep link to the current Screen
|On Screen Focus
|Runs every time the user navigates to the Screen
|On Screen Blur
|Runs every time the user navigates away from the Screen
Updated about 1 month ago