Aman Mittal

Dev Advocate | amanhimself.dev
👋 🧪
I am a full stack developer working on contract and a technical writer/blogger. Happy to be part of this community!

Build the Bookbit app from scratch - Part 3: Navigating to a details screen

admin 👋 🧪
In the previous post on creating a Bookbit Starter app from scratch, we focused on fetching real-time data from a REST API endpoint and implementing UI elements such as image, vertical and horizontal scrollable lists.

In this tutorial, let's extend the Bookbit app by creating a Book Profile screen such that when a user wants to view the details from the Discover Books screen, they can tap the book thumbnail to navigate to the book's profile screen, where they will find the details in the form of its title, name of the author who wrote it, description, quotes from the book and a FAB button that leads to a purchase link for the book.

Here is what we are building:



Create a Book Profile screen

The screen we are building in this tutorial is called Book Profile. It will be composed of two main elements. The first element is to add UI elements such as ScrollView and Fetch to organize a layout to display data. The second element is to show the data fetched for a specific book item only when its id passed while navigating from the parent screen or, in Bookbit's case, Discover Books screen.

The Layout of the Book Profile screen is composed of the following elements:

We will not be covering every layout element in detail since they have already been covered in the previous tutorial.

Add a scrolling view

The first two UI elements in the Book Profile screen are ImageBackground and ScrollView.

  • Open the workspace in the Draftbit Builder, then open the app you are building.
  • Add a new Blank screen using the plus icon button in the left panel and call it Book Profile.
  • The contents of this screen are going to be wrapped inside a scrollable view. Add ScrollView from the Layout component.
  • Add a background image using the ImageBackground Media component and change Source type to static for it from the Configs tab of the Properties panel on the right side to choose a custom background image.


On the ImageBackground component set the following padding properties from the Style tab:

  • top: 34
  • bottom: 34
  • left: 32
  • right: 32


  • Then, add a View as the child of the ImageBackground component. Set the Align property on the View to center and set the height to 100%.
  • Add Fetch component as a child to this View. It will be responsible for fetching the data once we enable the navigation from the API endpoint.
  • Inside the Fetch, add another View that will act as a container for the content to be displayed on the Book Profile screen.


After this step, here is how the Layout of the screen will look like:



Add an image component to display the book cover

  • Start by adding a View component as a child to the last View created in the previous step. This new View component will be displayed, the book cover image, the book's title, and the author's name.
  • In the Styles tab in the Properties panel, under Flex Items set the value of Align property to center. Then, add a padding-top and padding-bottom of 34.
  • Inside this View, add a Container component with margin-bottom of 24, width of 120 and height of 190, and set the value of Overflow to hidden. In the Configs tab, set the value of Elevation property to 3.
  • Add an Image component as the child to the Container with a width of 120 and height of 190.


  • Adjacent to Container, add another View component that will contain Text components to display the title and the author's name.
  • For this View, in the Styles tab, under Flex Items set the value of Align property to center, and set padding-top and padding-bottom to 24.
  • Add two Text components to this View as children.
  • The first Text component will display the title of the book. In the Styles tab, set the Font Size to 28, set Color to Custom, and set the margin-bottom to 8.
  • For the second Text component, set the font set Color to Strong.


We do not have any data to display. Let's add that first in the next section.


Passing data from one screen to another

Draftbit uses the react-navigation library under the hood to let you implement different navigation patterns such as Stack, Tab, etc. A feature of this library allows us to pass data from one screen to another as parameters. In our Bookbit app, we need to pass the ID of the book displayed on the Discover Books screen such that when a book thumbnail is pressed, a user can navigate to the Book Profile screen in the app to see the details of the book. To ensure that the information displayed is correct when book is selected, the ID of the book item is used.

In the previous tutorial, we created an API endpoint in Draftbit to fetch the book of the day. The endpoint URL accepts the ID of the book to fetch a book item by its id. We can also use the same endpoint to fetch the data of an individual book item to display on the Book Profile screen based on the ID of the book passed from the Discover Books screen.

To enable this, go to the Discover Books screen and add Navigation action on Touchable components under the following sections displayed on the screen:

  • Book of the day section
  • Trending list
  • New Books list
Assign a navigation action to all of these Touchable components:

  • Select the Touchable in the Layout Tree.
  • Go to the Interactions tab of the Properties Panel and click the '+' icon next to the 'Action' section.
  • Select the Navigation action, then in the Basics section, select the Destination screen to navigate, in this case, Books Profile.
  • In the Pass Data section, click the '+' icon, add id as the key and select the ID from the API endpoint, which is of format: Endpoint Name/id (fetch data).


In the Book Profile screen:
  • Go to the Fetch component, go to the Data tab in the Properties panel.
  • In the Setup section, select the Service name that is the REST API service. Then, select the Endpoint, which is to fetch a single book item.
  • In the Configuration section, at the URL Structure, select the id (navigation) as the value for ID key.


  • To display the data on the Image component, go to the Data tab in the Properties Panel, change the Source Type to Data, and select the image_url variable. Image component supports three type source types:
    • Static used to display an image from a static asset.
    • Remote URL (default option) used to display an image from a URL. Data used to map the image's source to the key in API endpoint such as image_url in the current example.
  • Next, add a variable to display the title of a book from the API endpoint. Text component supports static text and dynamic values using {{varName}} format. For the Book Profile, select the {{getBookOfTheDayTitle}} to display the title.
  • For the author's name, set it to variable By {{getBookOfTheDayAuthors}}. The prefix "By" remains static and is followed by the author's name from the API endpoint, which is dynamic.



Add the description section

To add the description section, follow the steps below:

  • Start by adding a View component adjacent to the View that wraps the image, title, and author's name.
  • In Styles tab, set the padding-top and padding-bottom values to 24. In the Size section, set width to 100%.
  • Add two Text components inside it.
  • For the first Text component, set the font size to 20 and a margin-bottom of 8 in the Styles tab. In the Data tab, set a static text value of About this book in the Input Text section. This component acts as the header of the section for a book's description.
  • For the second Text component, in the Data tab, set the value of the variable {{getBookOfTheDayDescription}}.



Add the quotes section

After the description, let's display a quote section where three quotes are displayed from the book.

  • Add a View component adjacent to the two previous View components. In the Styles tab, set margin-top to 34, margin-bottom to 64, and padding-top and padding-bottom to 24.
  • Add a Container inside it. In the Styles tab, set padding-top and padding-bottom to 18, padding-left and padding-right to 4, and a margin-bottom to 34. In the same tab, set its Color to Background from the drop-down menu. Remove any default value for height property. In the Configs tab, set the value of the Elevation property to 3.
  • Add a Text inside the Container. In the Styles tab, set its Align property value to center, set margin-top and margin-bottom to 6 and set the font-size to 22 . In the Data tab, set the value of the variable to {{getBookOfTheDayQuote1}}.
  • The next two Contains are going to have the same styles properties. The Text component wrapped inside each of the components will differ in the dynamic value for quotes. These values are such as {{getBookOfTheDayQuote2}} and {{getBookOfTheDayQuote2}}.
  • Instead of creating these two Containers on your own and then go through the whole process, you can save the first Container component and its contents as a Custom Block by clicking the "..." icon on the component and then click the Save Custom Block. Add a name for the Custom Block and then click Save.
  • To add a Custom Block, click the "+" icon on the parent View component, go to Saved block components, and select the component name you just saved.



Add a FAB button

A FAB, or Floating Action Button, represents the screen's primary action and is normally positioned above the rest of the screen's content. In Draftbit, you can configure a FAB by setting the text to be displayed on the button, setting or changing the color of the button, or adding an icon. There are four types of FAB available in Draftbit:

  • FAB Mini
  • FAB Fixed
  • FAB Outline
  • FAB extended
The difference between each type varies in their appearance properties.

  • Adjacent to the ScrollView component, add a FAB Fixed.
  • In the Styles tab, select the value for Position to be absolute. Also, set the value for left, right, and bottom properties to 32.
  • In the Config tab, change the value of the Label to "Buy this book".
  • In the Interactions tab, add an action by clicking the '+' icon next to the 'Action' section. Select the "Open Site in Browser" from the menu.
  • Add a mock URL for the Destination property such that when a user taps this button, it will open a link in the webview.

Here is the final output:



Further reading

Connect Xano to Draftbit

admin 👋 🧪
We published a new REST API integration guide on how you can use data from Xano backend with Draftbit.

You can read the complete guide here.

✨Connect Zapier to Draftbit

admin 👋 🧪
You can now send new data and update existing data to your favorite app from Draftbit using a Zapier Webhook.

We published a new REST API integration guide on how you can use data from Zapier Webhooks with Draftbit.

You can read the complete guide here.
Like Comment

⚡️Connect Supabase with Draftbit

admin 👋 🧪
You can now use Supabase in your Draftbit apps!

We published a new REST API integration guide on how you can use data from Supabase with Draftbit.

You can read the complete guide here.
Like Comment

Build the Bookbit app from scratch — Part 2: Fetching data from a REST API

admin 👋 🧪
In the first tutorial in the series on creating a Bookbit Starter app from scratch, the focus was on covering the UI elements that the Draftbit's Builder offer and how to implement them to create mobile app screens. In this tutorial, let's apply this knowledge and learn how to use real-time data in the screens when building an application.

To fetch real-time data in an app, Draftbit Builder supports integrating REST APIs. You can connect nearly any third-party Service that exposes its REST API endpoints to a Draftbit app. We have a list of REST API integrations here that are officially supported. For the current example, let's build the Discover Books screen using Example Data API.

Here is what we are building




What is Example Data API?

Example Data API is a REST API service provided by Draftbit to start building a data-driven app without having to create a backend. It uses real (or real-looking) data to help you make better design decisions along the way. Data is gleaned from several open or creative commons sources. There are different data resources to satisfy specific use cases such as Books, Articles, Products, Orders, Podcasts, Product Reviews, People, etc.

Create Discover Books screen

The screen we are building in this tutorial is called Discover Books. It is going to be composed of two main elements. The first element is to fetch the data from a third-party REST API service. The second element contains introduction new UI components such as ScrollView, Fetch, and List to organize display the data fetched from the API service.


The Layout of this screen is quite long, thus, to understand, let's breakdown it into sections as we go. The requirements to build the first section is to create the following:

  • Add an image background and a ScrollView.
  • The first section of the ScrollView contains a header and a "Book of the day" sub-section.
  • The "Book of the Day" further includes a section title, a cover image of a book item, the title of the book, the author's name, and a View More button with an icon. These details are going to fetch from the REST API.

Add a scrolling view

Let' start by building the user interface of the screen first using components from the Builder.

  • Open the workspace in the Draftbit Builder, then open the app you are building.
  • Add a new Blank screen using the plus icon button in the left panel and call it Discover Books.
  • Add a background Image using ImageBackground Media component and use the same Source for it from the Configs tab of the Properties panel on the right side.
  • The contents of this screen are going to be wrapped inside a scrollable view. Add ScrollView from the Layout component.


The default scrolling orientation of the ScrollView component is vertical. For this particular screen, let's use the default orientation. To change it, you can go to the Configs tab:



Build a custom header

  • Add a padding-bottom of 34 to the ScrollView from the Styles tab.
  • To create the custom header, add a View component and a Text component as its child. Set the Align and Justify property of the View to center. Then, add the padding-top of 24, padding-bottom of 28, and a margin-bottom of 14.
  • Set the background color for the View to the value of Primary, which is one of the pre-defined color values Draftbit Builder offers.
  • Set the styles for the Text in the Styles tab. The Font will have the value of the Headline3 and the Color of the value Surface. In the Data tab, set its value to Discover Books.



Create an endpoint to get "Book of the Day"

In this section, let's add a REST API endpoint to fetch the book item for the "Book of the Day" section.
  • To enable using a REST API, go to the Data tab from the left navbar. It will open a modal called Data & Services.
  • Under the Add a service menu, click the REST API.
  • Enter a name for the REST API service. It is going to represent the name of the Service to be displayed in the menu.
  • Paste the Base URL https://example-data.draftbit.com into the Base URL field. Make sure that there is no "/" at the end of the Base URL.
  •  Accept: application/json and Content-Type: application/json are the default HTTP headers in each REST API configuration. You can also add any Global Variables you've saved by clicking the '+' in the top right corner, giving the Header a name, and selecting your Global Variable from the dropdown. For this example, we do not require to add any other HTTP Header.
  • Click Save.


After you have created a new Service, you'll be prompted to add new Endpoints for your service.
  • To fetch the book item, create a new REST API endpoint. An API endpoint is point of entry between an API and a server. The endpoint defines what information you are accessing from your API.
  • Under the Endpoints menu, click the Create new endpoint button.
  • Enter a name for this endpoint.
  • Add the /books/{{ID}} in Add Path & Params. The /books here is a required path to query one or many book items from the Example Data API. Add Path & Params allows appending a Base URL by adding parameters to fetch specific data from a REST API.
  • Add a Test value for the {{ID}}. The value of it could be anything that exists in the database using the API endpoint.
  • Click the Test button next to the Endpoint input to verify the endpoint is working.
  • Once everything looks right, click Save to save endpoint and click Done to close the modal.



Use Fetch component to display data on the screen

In this section, let's display the book item fetched in the Draftbit app.
  • Add a View component adjacent to the previous one inside the ScrollView. Add padding-top and bottom of value 34.
  • Add a Text component to this View as a child. In the Styles tab, modify its Font to Headline4, Color to Custom and Align to center. Also, add a margin-bottom of 18. Then, add the text Book of the Day in the Data tab.


  • Select the Fetch component from the Lists & Data component menu that contains elements specific to be used to pull data from an external resource. Add it as a direct child to the View.
  • Go to the Configs tab of the Properties panel and select the Service as the REST API service created in the previous section.
  • Select the endpoint to be used to pull the data.
  • In the URL Structure, pass the value of 1 for the id.
  • The Fetch component here allows previewing the data fetched from the API endpoint before consuming it in the app.


To display the data, let's set up the Layout of the section first. Here is what we are looking to build in terms of the components tree:


  • Add a View component under Fetch.
  • Set its Align property to center and add two children View components.
  • In the first child View component, add Container and give it a property of margin-bottom of 14 in Styles tab. Also, set the Overflow to Hidden and Radius to Global.
  • Add an Image with a width of 150 and a height of 220 in the Styles tab. In the Data tab, set the Source type to Data since the book item's image is being fetched from an external resource. This resource type here is the REST API endpoint. Set the value of Source to image_url.


  • For the second View component, set the value for Align property to center.
  • Add a Text component. In the Styles tab, set its Font to Headline5, Color to custom, margin-bottom to 2. In the Data tab, select the Source type of Data and set the Value to title.
  • Add another adjacent Text component. In the Styles tab, set its Font to Subtitle2, Color to Medium, margin-bottom to 2. In the Data tab, select the Source type of Data and set the Value to authors.
  • Add an adjacent Touchable component. In the Styles tab, set a margin-top of 12.
  • Add a View component as its child. In the Styles tab, set the Direction to row, Align and Justify to center.
  • Add a Text component to the View. In the Styles tab, set its Color to Primary and give it a margin-right of 6. In the Data tab, set the value to View.
  • Add an Icon component adjacent to the Text. In the Configs tab, set the Name of the icon to chevron-right-circle, the Color to Primary, and Size to 18.



Create Endpoints to display data in horizontal lists

Over the next two sections in this tutorial, the focus will be on creating two horizontal lists in the Discover Books screen. These lists are going to display multiple book items. In this section, let's start by making these two endpoints.
  • Open the Data modal from the left navbar.
  • Click on the Draftbit Example API under the Connected menu or the name you have given previously when connecting the REST API.
  • Under the Endpoints menu, click the Create new endpoint button.
  • Enter a name for this endpoint.
  • The first endpoint is going to fetch the books by a parameter called rating_count. This parameter orders the list of book items according to their rating. Using the query parameter _sort, pass the rating_count as its value. Then, let's set the _limit of the book items to fetch to 10. Lastly, pass the query parameter _order with a value of desc to order the book items in descending order.
  • Append the Base URL by adding /books?_sort=rating_count&_limit=10&_order=desc in Add Path & Params.
  • Click the Test button next to the Endpoint input to verify the endpoint is working.
  • Once everything looks right, click Save to save endpoint and click Done to close the modal.


  • Under the Endpoints menu, click the Create new endpoint button.
  • Enter a name for this endpoint.
  • This endpoint is going to fetch the book items listed on page 1. The pagination when using Example Data API requires to use a query parameter called _page.
  • Append the Base URL by adding books?_page=1 in Add Path & Params.
  • Click the Test button next to the Endpoint input to verify the endpoint is working.
  • Once everything looks right, click Save to save endpoint and click Done to close the modal.



Create horizontal lists

The first horizontal list is going to display the books that are trending.
  • Add the child View component to the ScrollView with a padding-top and bottom of 34 in the Styles tab.
  • Add a Text component to this View to display a section title.
  • In the Styles tab, set its Font to Headline4, Color to Custom, and Align to Center.
  • Also, set the value of margin-bottom to 18. In the Data tab, set the title to Trending.


  • Select the Fetch component from the Lists & Data component menu that contains components specific to be used to pull data from an external resource. Add it as a direct child to the View.
  • Go to the Configs tab of the Properties panel and select the Service as the REST API service created in the previous section.
  • Select the endpoint to be used to pull the data.
  • The Fetch component here allows previewing the data fetched from the API endpoint before consuming it in the app.


  • Add List as a child component to the Fetch from Lists & Data.
  • In the Styles tab, set the Direction to Row and add padding-left of 32.
  • In the Configs tab, make sure to select the Horizontal to true.
  • In the Data tab, set the value of Mapped data value to data.


  • Add View as a child component to List. It is going to represent an individual book item in the list. In the Styles tab, set the margin-right of 32.
  • Add a Touchable.
  • Inside the Touchable, add another View component with a Container as its child.
  • In the Styles tab for Container, set the width to 80 and height to 118. Also, set the Position > Overflow to Hidden and Border > Radius to Global.
  • In the Configs tab, set the Use gutter padding property to false. Set the Elevation to 3.
  • Add Image to the Container. In Styles tab, set its width to 80 and height to 118. In the Data tab, set the Source Type to Data and then select the Source to image_url.


  • Add another View component adjacent to Container. In the Styles tab, set the margin-top to 10 and the width to 80.
  • Add the Text component to represent the title of the book item.
  • In the Styles tab, set its Font to Subtitle2, Color to Custom.
  • In the Configs tab, set the value of the property Max number of lines to 2 such that the longer book titles are truncated.
  • In the Data tab, set the Source to Data and then set the Value to title that represents the actual title of the book item fetched from the REST API endpoint.


The second horizontal list is going to have the same UI elements we have just created. It differs only in the list title and data source.

You can use the option to Duplicate the whole custom block. Then, change its title and data source.

Here is the final output:



Resources

Build the Bookbit app from scratch — Part 1: Setup, Layout, and UI

admin 👋 🧪
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 is what we are building today



Welcome Screen


Tutorial Screen
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.



The Complete Guide to Layout in Draftbit using React Native FlexBox

admin 👋 🧪
In a React Native app, the Flexbox algorithm is used to specify the layout of a component and its children. The algorithm itself is designed to provide consistency among different screen sizes. In this tutorial, I am going to introduce you to how to use various Flexbox properties to create different layout patterns using Draftbit.

I am going to use a Blank screen template to start with that is going to wrap two components. The first child component is going to be the Text of what the example is about, and the second is going to be a View component. In this View component, you are going to see examples of different Flexbox layout properties.
An example of the template used in this tutorial with a Text and a View component. This screen is going to be modified throughout this tutorial.




The goal of this post is to give you an overview of how you can leverage the tooling provided in the Draftbit build tool. For a quick reference, all the layout properties used can be referred to in the properties panel on the right side.


The flexDirection property

The flexDirection controls the direction of the main axis in which children components are laid out. By default, it has a value set to column along the main axis. The first step is to create three children View components inside the parent View. Each of the child components is going to have a different background color and set a width and height of 50. With the default flexDirection property value, all of these child components are going to appear vertically aligned adjacently.




To change the flexDirection to row , all you have to do is head over to the right panel and select the value under Flex Items > Direction .




The flexDirection property allows the children component to be placed in the opposite direction. This is easily achievable in Draftbit as well. In the right panel, once the direction of the flex items is set, you can enable the Reverse property. The example below shows how to set the value of flexDirection to row-reverse .




Similarly, column-reverse value can be achieved.





The justifyContent property

The justifyContent controls how the children components are aligned within the main axis of their parent component. The default value of this property for each child is flex-start where a child component is aligned at the start of the parent component’s main axis.




To change the value of this property, let’s say to align all the children component at the center of the main axis, you have to change the value of Justify property under Flex Items:




You can set the value to flex-end to align the child components at the end of the parent’s main axis:




Setting the value to space-between is going to spread the children components across the parent’s main axis by evenly distributing the remaining space between them:




Setting the value to space-around is going to evenly place the children components on the parent’s main axis, distributing the remaining space around them:




The last property value is space-evenly which is used to evenly distribute the spacing between each child component.





The alignItems property

The value of alignItems property affects the children components to be aligned along with the cross or the secondary axis inside the parent component. The default value of this property is stretch . In the example below the width and height of each child component have a fixed value of 50pt. This overrides the Stretch property.




The children component must not have a fixed width for this property to affect the secondary axis. The example below shows that when then width is set to auto from the right panel, the alignItems: stretch property works as expected.




The value flex-start aligns the children at the start of the parent’s secondary axis:




The value flex-end aligns the children at the end of the parent’s secondary axis:




The value center aligns the children at the center of the parent’s secondary axis:





The alignSelf property

The value of the align-self property is used to change the alignment of an individual child component by overwriting the value of alignItems set by the parent component.

For example, when the value of alignItems of the parent component is set to flex-start but the first child has an alignSelf value of flex-end . To change the assign the property of alignSelf to an individual child component, you have to select the child component and then from right panel, go to Selected Item and change the value of Align to flex-end.




Similarly, when the parent component has the value of flex-end for the alignItems property, set the alignSelf to flex-start of the first child component:




Setting the value to center for the child component is going to have the following effect:




On removing the fixed width dimension of the first child component and setting the value to stretch is going to have the following effect:





The flexWrap property

The flexWrap property wraps the children components along the main axis on multiple lines when they overflow the size of the parent component.
The default value of this property is nowrap :




The other two values are wrap :




And the wrap-reverse :





The alignContent property

The alignContent property aligns the child components across multiple lines on the secondary axis when they are wrapped using the flexWrap property. The default value of this property is flex-start .



The second value aligns the wrapped lines in the center of the parent component’s secondary axis.


The value flex-end aligns the wrapped lines at the end of the parent component’s secondary axis.



The space-between value distributes the space between the wrapped lines.



The space-around value evenly distributes the space around the wrapped lines.





The position absolute

The property position enables a child component to be positioned relatively within a parent component. The default value of this property known as relative defines each element to be positioned exactly how the flow of the layout. In the example below, the first child component has a fixed margin of 20pt from top and left. The second child has a fixed margin of 40pt from top and left and the third child has a fixed margin of 60pt from top and left. The other two margin properties (right and bottom) are left at auto.



The absolute value allows a child component to layout independently of its siblings. The margin property for each child element remains the same from the previous example.





The zIndex property

This property can control which child component to be displayed on top of its siblings. In the example below, the second child component is displayed on top of the first and the third sibling. The value to control the position is determined by setting the zIndex to 1.

To change the value of zIndex, go to the right panel, and under the property Position you will find the Z-Index field, as shown in the example below.





Conclusion
After completing this tutorial, you’ve got the overview of how to use Flexbox layout elements when building UI components using Draftbit.
Here are some links to help you out: