Introduction to the Builder

Builder menu bar/top bar

The builder menu bar is the main navigator that provides access to different settings and options inside the Draftbit builder.

From left to right:

Menu tabs

Description

  1. Dashboard Button

It navigates you back to Draftbit's Dashboard.

  1. App's Name

Displays the name of your app. You can modify it in Project Settings.

  1. App's Icon

Displays the icon of your app. You can modify it in Project Settings.

  1. API & Cloud Servies

Opens a modal 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.

  1. Custom Code

Opens a modal to add a Custom Function, Components or Packages.

  1. Theme

Opens a modal to add or modify theme colors.

  1. Assets

Opens a modal that allows you to upload and manage static assets.

  1. Design Mode

The main interface of the builder. When building a screen, it will show how the components on the screen are laid out.

  1. Navigate Mode

The interface where you can add a new navigator or update the existing navigation settings of your app.

  1. Preview Mode

The interface where you can preview your app on an iOS simulator, or an Android emulator or Web.

  1. Live Preview

Generates a QR code to be scanned to launch Live Preview.

  1. Export Code

Opens a modal where you can view the code of the current screen, copy the current's screen code, or export the whole project in a .zip file.

  1. Share App

Opens a prompt to generate a shared link for your project that you can share privately.

  1. Settings

Opens a modal where you can manage app-level settings and configuration, and create global variables.

  1. Publish

Opens a prompt to publish your app as a PWA.

  1. Commit

Opens a prompt to commit the source code of your Draftbit to GitHub. You will need to configure your GitHub settings in app-level settings first.

  1. Links Panel

A panel where you will find links to Draftbit's updates, community and documentation.

Screens

The Screens menu is divided into two sections:

  • Screens
  • Components

Adding and renaming a Screen

This section is used to add a new screen from the Examples 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.

Components tree

The Components 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 Component, 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 Components 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) contains four 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.


Did this page help you?