Introduction to the Builder

800

Builder menu bar/top bar

1437

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 tabsDescription
1. Dashboard ButtonIt navigates you back to Draftbit's Dashboard.
2. App's NameDisplays the name of your app. You can modify it in Project Settings.
3. App's IconDisplays the icon of your app. You can modify it in Project Settings.
4. API & Cloud ServiesOpens 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.
5. Custom CodeOpens a modal to add a Custom Function, Components or Packages.
6. VariablesOpens a modal to set screen and app-level Variables.
7. ThemeOpens a modal to add or modify theme colors.
8. AssetsOpens a modal that allows you to upload and manage static assets.
9. Design ModeThe main interface of the builder. When building a screen, it will show how the components on the screen are laid out.
10. Navigate ModeThe interface where you can add a new navigator or update the existing navigation settings of your app.
11. Preview ModeThe interface where you can preview your app on an iOS simulator, or an Android emulator or Web.
12. Live PreviewGenerates a QR code to be scanned to launch Live Preview.
13. Export CodeOpens 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.
14. Share AppOpens a prompt to generate a Share App Link for your project that you can share privately.
15. SettingsOpens a modal where you can manage app-level settings and configuration, and create App Variables .
16. PublishOpens a prompt to publish your app.
17. CommitOpens 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.
18. Links PanelA panel where you will find links to Draftbit's updates, community and documentation.

Screens

380

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:

1425

The example below demonstrates how to rename a screen.

1395

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.

1395

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.

600

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

1395

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

Properties Panel

940

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, Size & Position, Margins & Padding, Borders, Backgrounds and Effects, and Typography.

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.