Introduction to the Builder

Builder menu bar

The builder menu bar is the main navigator that provides different tabs inside the Draftbit builder. These tabs are used to modify application-level settings and much more.

See the highlighted menu in the above image. All the available tabs described below:

Menu tabs

Description

Screens

Gateway to all application screens. Here you can view, modify or create new screens.

Theme

Gateway to a default theme. Here you can add custom color values.

Navigation

Gateway to add a new navigator or view the current navigation structure. All configuration options related to Tab and Stack navigators are available here.

Data

Gateway to integrate and connect API and Cloud services. Here you can add a custom API and create its endpoints to add data to the app.

Assets

Gateway to add custom images that can be used inside the app.

Project Settings

Gateway to add app-level settings

Settings options available here adding an app icon, adding a splash screen, setting permissions, app orientation, custom bundle identifier, etc.

Screens

Screens tab is divided into two sections:

  • Screens
  • Layout

Adding and renaming a Screen

This section is used to add a new screen from the Example Gallery by clicking the '+' button or rename a screen's name.

The example below demonstrates how to add a blank screen:

The example below demonstrates how to rename a screen.

Layout

The Layout tree is where you see all the available components placed on the screen, rearrange them, and see their relationship with other elements.

Adding and Rearranging Components

To add components to the Layout, click the '+' next to Layout to launch the component picker. In this menu, you can click to add components to the Layout Tree.

Bits are what we consider primitives that include real React Native components and Draftbit components. These are essentially base-level components in our system that cannot be edited or changed. However, they can be re-used to create custom blocks of components.

Saved are what we consider custom blocks composed of using different Bits. You can create these custom blocks of components, save them, and re-use them later on any screen. To duplicate a component or create a Custom Block, click the '...' menu next to the component name to launch a context menu.

To rearrange components, simply click the component in the Layout Tree, drag it and drop it where you would like it to go instead.

To delete a component, duplicate a component click the '...' menu next to the component name to launch a context menu.

Properties Panel

The Properties Panel (the right side of the Builder, boxed in red) is composed of 4 different tabs. From left-to-right, these tabs are:

1. Styles Tab
Where you'll configure Layout and Additional Layout and Style Options.

2. Properties Tab
Where you'll configure the properties specific to each component. You can reference the component's documentation for specifics on the configurable properties of each component.

3. Data Tab
Where you'll configure Fetch & List components to Fetch Data and provide dynamic values on components like Text in your app.

4. Interactions Tab
Where you'll configure Actions related Navigation, API Requests, etc.

Builder Views

The Builder defaults to the Single Screen View which will display the Screen you have selected in the Screens list on the left-hand side.

To switch to the Multiple Screen View and see all of the screens in your project, click the 4-panel square button above the Web Preview screen.

To switch to the Preview mode that loads the full Preview of the app directly in the browser, click the ▶️ button

Top Bar

You can open a variety of different menus and share your app with multiple publishing options from the top bar of the Builder.

From left to right:

  • Insert: Opens the component drawer.
  • Add: Opens the modal to add a new screen.
  • Custom: Opens the Custom Screen Code menu.
  • Preview: Generates a QR code to be scanned to launch Live Preview.
  • Learn: Opens a modal with links to Documentation and Community.
  • Code: Opens the View Code modal where you can export the whole project in a .zip file or copy the screen code.
  • Share: Opens a prompt to generate a shared link for your project.
  • Publish: Opens a prompt to publish your app as a PWA.

Did this page help you?