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.