How to build an app UI from Scratch using Draftbit

Published in

Draftbit

15 min readApr 28, 2021

Like React Native, Draftbit Builder uses the Flexbox algorithm to specify the layout of an app screen. The algorithm provides consistency among different screen sizes. With this tutorial’s help, let’s learn step-by-step how to create a user interface using the Draftbit app builder and see in action how Flexbox layout components are configured, and understand the building blocks of the Builder. For the current example, we are building the welcome screen from Bookbit app.

Creating React Native applications gives the ability to generate one source code for multiple mobile platforms such as iOS and Android. Over the years, the developer experience of building such apps using the framework has improved with the introduction of features like Hot Reloading and Fast Refresh. Taking advantage of these features, at Draftbit, we aim to provide a better developer experience for software developers and designers alike. Draftbit is a low-code app builder used to build working prototypes of mobile applications exported to React Native.

Here are two screens we are going to build in this post

The concepts covered in the post are entirely oriented towards the Draftbit Builder and are as following:

How to create a new app in the Draftbit Builder
Understanding the elements to create a screen in Draftbit Builder, such as what does left, center, and right panels are for
How to rename a component and re-arrange their order using the drag-and-drop feature
How to use an Image Background component
How to use an Image component
Add a component from Bits and Blocks
How to configure a text component and use Draftbit’s built-in typography elements
How to create a button with a solid background
How to create a borderless button using a Touchable component
Add and use a pre-built screen template from the Draftbit Builder
How to use components like Container and Icon
How to create custom blocks of different components to re-use them
How to create a button with an outline
How to preview an app generated with Expo

How to create a new app in Draftbit Builder

Before we start, make sure you are logged-in into your Draftbit account. After logging in, you will be welcomed by a similar Dashboard screen as shown below:

To instantiate a new app in the Draftbit Builder, click the button ‘Create App’ on the screen’s right top corner. After clicking the button, fill in the necessary details of the app prototype as per your needs. It’s a four-step process:

In the modal form, enter the name of the app prototype under ‘App Name’.
Enter the ‘App Description’ for the app prototype and press ‘Continue’.
Select a template. Since we are building from scratch, let’s start with a blank app. Click the button ‘Start with blank app’ at the bottom center of the modal form and then press ‘Continue’. There are tons of layouts for various purposes available in the Builder that you can choose.
It will notify you that the Builder is ready, and you can start by pressing the button ‘Start Building’.

Here is the overview of instantiating a new app:

Understanding the elements to create a screen in Draftbit Builder

The left Panel

Once this new app is instantiated, the Draftbit Builder welcomes you with a blank screen named Blank with no React Native components represented. The advantage of using a blank screen is that you can build the user interface from scratch.

You will see that the ‘Screens’ section is currently selected on the side panel on the left side. Every screen created in the Builder falls under this section. This section is further divided into two sub-sections or panels: Screens and Layout.

The ‘Screens(1)’ shows the number of existing screens in the app, currently one since there is only one screen. The ‘Layout’ is where you can add React Native components to configure and structure the user interface for a particular screen. Since the first screen is already created for us, let’s rename it.

Rename a screen

To rename a screen in the Draftbit Builder you will have to follow the following steps:

Select the screen
Double click it and enter the name of the screen

Draftbit Builder will take care of updating it automatically.

To verify that the screen name is updated, you can click the “Code” button to View Code in the top center panel, and the component screen we just renamed reflects there.

Here is the code snippet for your reference:

import React from 'react';
import { ScreenContainer } from '@draftbit/ui';

const WelcomeScreen = props => {
  return <ScreenContainer hasSafeArea={true} scrollable={false} />;
};

export default WelcomeScreen;

The right panel

Initially, the Builder creates a root View component (in React Native terms) as SafeAreaView. Every other component that we will create in this screen will be the child of this component. If you need to edit this value, it is done from the right panel.

Wait… What’s a right panel?

The right panel is used to configure each Layout element’s properties that is representing some part of the UI on the screen. It is divided into four tabs:

Styles is where the definition or modification of a layout component is handled.
Configs are where the configuration of the layout component is handled. For example, you can rename a component.
Data is where data consumption in real-time from a REST API is consumed or is used to provide a value for a component such as Text.
Interactions are where different kind of relationships between components and screens is handled. For example, you can control navigation from one screen to another on the Touchable component.

We will cover all of these tabs in later posts in-detail but for this post, let’s keep the majority of the focus on Styles and Configs tabs.

Since we want to edit the value of SafeAreView to false:

Select the Welcome screen and go to the Configs tab in the right panel.
Toggle the button that says Has SafeAreaView to off.

Every time you change a default value or add a value in the Styles or Configs panel, Builder highlights that property with a yellow dot. This way, it makes it easy to find which properties are currently being used for a particular screen or component. It is similar to writing StyleSheet reference properties in React Native.

Creating the first screen

The first screen we are going to create is called the Welcome screen. It is going to have the following structure of React Native Layout components.

The first component that we are going to add is called ImageBackground. It provides a feature to add a background image on a screen component. To add it:

Click the plus icon button in the Builder.
Under the Media components bits, click the Image Background components. When adding an image as a background image or just to use it in an Image component, always make sure that the file name you are uploading begins with a letter instead of a number.

The Image Background component requires a background image. The Builder allows you to upload a custom image as the source for this component:

Select the Image Background component from the left panel.
Select the Data tab in the right panel.
Click the value for Image Source.
In the modal, you can choose to upload a custom background image and then select it. It will be used as the source of the Image Background component.

The element we will represent is a container that contains a logo composed of an Image component, a title, and a tagline, both composed from a Text component.

Click the plus icon button in the Builder.
Select the View and Text from Basic components to add. This set of components are the essential blocks of building a screen.
Select the Image from Media components to add. These components help further define the structure and UI of a screen.

We want to display the title and tagline below the logo. You can drag-and-drop to re-arrange the order of components for a particular screen as shown below:

Let’s modify the styles for these components.

Select Image Background and set the value of Align and Justify to center under Flex Items. This section is used to align the position of a component using Flexbox algorithm. A component here can either be the child of it or can be self-aligned.
Then, add a value of 1 to Sizing > Grow. It defines the flex item’s ability (in this case, the Image Background component) to grow based on the screen size if necessary.
Then, in the Margins & Padding add a bottom padding of 40pt. The default value for either margin or padding is 0pt. The values can also be defined in % in the Builder wherever necessary.

Select View , and in the Styles tab, set the value of Align to center under Flex Items.
Then, in the Margins & Padding add a bottom margin of 120.
Select Image. In the Styles tab, add a bottom margin of 4. Under the Size, add a width of 120 and a height of 164.
Then, go to the Data tab, and in Image source upload an image to represent the logo.
Lastly, go back to the left panel, double click the Image component to rename it to Logo.

A Text component can use Draftbit’s built-in typography elements. These typography elements are composed of Font and Color. There are pre-defined typography values ready to use.

Rename the first Text component to Title and the second one to Tagline.
Set styles for Title in the right panel. Select Headline1 font. It comes with custom values for Size, Letter Spacing, Line Height, and Color.
To change the color, select the Color Picker. There are pre-defined color values you can choose. For the Headline1 font, the color value of strong is chosen from the default theme. You can also add custom HEX or RGBA values to set the color for a property.
Go to the Data tab and add the Title element’s value to represent the Text property.

Similarly, for Tagline select the font Subtitle1.
Add a top margin of 4.
Then, add the Text value in the Data tab.

In the original layout of this screen we are building, there is another View component used to wrap two buttons. It is the child element of Image Background and not the previous View component that we have been working on so far. Let’s create the first button with a solid background.

Select the Image Background, click the plus icon button, and then click View.
Set horizontal padding for this to 34.
Set a Width of 100%.
In the left panel, click the plus button icon, select Blocks and then click Button Solid.
Change the value of property Text in the Data tab to Discover Books.
Go to the Configs tab and the value for the Component name property to Discover Books. It is another way to rename a component.
Change the value of the Color Override property to a custom hex value of #332036. It represents the solid background color of the button component. Once you add a custom value for the color, it can be re-used and is shown in the Recent section in the color picker.
To change the color value of the label of this button, select the picker for the Label Color Override property and change it to the pre-defined value of Background which has an actual hex value of #ffffff.
In the Styles tab, add horizontal padding of 28 and change the value of property Border Radius to Button.

Now, in the same View container, let’s create a borderless button with a Touchable and a Text component.

Select the parent View container, click the plus button icon to add a child View component. It is going to wrap the elements of the borderless button. In the right panel, under the Styles tab, change the value of Align to center.
Also, add a top margin of 20.
Select the newly added View and add a Touchable from Inputs & Control. These type of components are used to log a user’s input.
In the Styles, set the value for Align and Justify under Flex Items to center.
Also, change its size. Add width to 60% and a minimum height, represented by the property Min H to 42.
Add a Text component to this Touchable component. After that, change its Font to Button. Then, change the Color to Medium from pre-defined values.
Then go to the Configs tab and change the Component name to Learn more.
Lastly, go to the Data tab and add the value of the Text property to Learn more.

How to add a pre-built screen template

The original Bookbit app example is composed of six different screens. To avoid repetition of concepts we have already covered, let’s use the pre-built screen template that the Draftbit Builder offers, and using it, let’s go through those features which we haven’t seen so far.

To use a pre-built screen in your Draftbit app, start by clicking the Add button in the Builder’s center panel. You will find there are plenty of pre-built screens for different purposes. Some of them are for general use cases, for example, lists of articles, login forms, etc. Some of them are quite specific such as the Author Profile from the Bookbit app.

Let’s add a tutorial screen to the demo app:

Click the Add button in the center panel, and search for Tutorial screen in the search bar.
Add the screen Tutorial screen (Bookbit 2 of 8).
You will notice that the screen template now appears in the left panel after the Welcome screen.
Rename it to Tutorial.

How to use components like Container and Icon

Take a look at the Layout of this new screen. It is composed similarly to the Welcome screen using Bits and Block components. However, few different components are used here, such as Icon, Container, and Button Outline.

Let’s start with Container, which is a layout component and functions just like a View component but with some extra props.

It is used to add a drop shadow to another component, such as an icon displayed on the screen. The elevation property on this component, which is found in the right panel under the Configs tab as shown below, is used to control the drop shadow intensity using values from 0 to 3.

In the Tutorial screen, it is used to provide a shadow for the Icon component it wraps in the screen’s layout. An Icon component is found under the Basic collection of components and is usually a symbol representing an item in a screen’s layout.

In the right panel under the Configs tab, you can add or modify an icon by its name, color, and size.

The property Name defines the icon. Draftbit supports various icon sets such as Ionicons, Ant Design, Material icons, Font Awesome, etc.

How to create custom blocks and re-use them

Creating a layout for different screens in the Builder, you will often find yourself repeating the same patterns using the same set of components. An advantage Builder gives here is to re-use them by creating custom blocks for a set of components that are visually similar. You can use these custom blocks either in the same screen or in different ones and customize the information.

Let’s take the example of the Tutorial screen. It currently displays rows of different icons in its own container with some text wrapped by a View component with a flex-direction property set to row.

To create or save a custom block:

Hover the mouse over the parent component and click on the ellipses menu shown on the right.
Then click Save Custom Block and name it something useful.

You can re-use this custom block.

Select the component under which you want the custom component to be placed.
Click the plus icon button and go to Saved .
Select the custom block component.

Then modify its properties and content to display appropriate information. For example, in the below demo, we position it correctly by adding a top margin, then change the icon name and add text to display.

How to create a button with an outline

There are different types of button components currently supported in the Builder. The two most common to use button components are Button Solid and Button Outline. Earlier, we have seen how to use and configure a Button Solid component when creating the Welcome screen. The Button Outline works in the same way. You can add it from Blocks > Buttons panel.

Unlike the Button Solid component, it does not have a solid colored background. The two important configuration options available on it are:

Color Override is used to set the color of the boundary of the button.
Label Color Override is used to set the color of the label.

Preview the screen

The Draftbit Builder allows you to Preview a screen in two ways. The first way is to use the Preview tab in the Builder itself using Expo.

The second way to preview a screen is to use Live Preview on a real device by scanning the QR code using the Expo Go app.

Conclusion

It has been a long one, we know, but the objective of this tutorial was to make you familiarize with the panels and properties that Draftbit exposes you to build User Interfaces.

Here are some links to help you out:

Draftbit documentation on Layout properties which provides an overview of all the available properties related to Flexbox.
If you want to understand or get familiarize with Flexbox check our guide on React Native Flexbox Layout using Draftbit’s Visual Builder.
Check out more tutorials on building mobile apps from scratch using Draftbit.

💜 We at Draftbit love our Community and are always open for your questions, feedback and feature requests. You will also find more resources to learn and build with Draftbit.
Reach out to us on twitter/@draftbit for more questions.