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. |
2. App's Name | Displays the name of your app. You can modify it in Project Settings. |
3. App's Icon | Displays the icon of your app. You can modify it in Project Settings. |
4. 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. |
5. Custom Code | Opens a modal to add a Custom Function, Components or Packages. |
6. Variables | Opens a modal to set screen and app-level Variables. |
7. Theme | Opens a modal to add or modify theme colors. |
8. Assets | Opens a modal that allows you to upload and manage static assets. |
9. Design Mode | The main interface of the builder. When building a screen, it will show how the components on the screen are laid out. |
10. Navigate Mode | The interface where you can add a new navigator or update the existing navigation settings of your app. |
11. Preview Mode | The interface where you can preview your app on an iOS simulator, or an Android emulator or Web. |
12. Live Preview | Generates a QR code to be scanned to launch Live Preview. |
13. 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. |
14. Share App | Opens a prompt to generate a Share App Link for your project that you can share privately. |
15. Settings | Opens a modal where you can manage app-level settings and configuration, and create App Variables . |
16. Publish | Opens a prompt to publish your app. |
17. 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. |
18. 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, 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.
Updated 5 months ago