The Draftbit Docs

Welcome to the Draftbit documentation. You'll find comprehensive documentation and information to help you start working with Draftbit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Layout

Components used to build out the structure of your screen.

Keyboard Avoiding View

When configured, it will automatically adjust the position of the contents of the screen for a better fit when a user focuses on a field and the keyboard appears.

Configuration

🚧

Make sure to set the Flex Grow property of the Keyboard Avoiding View to 1

Parameter

Description

Enable

Enable the keyboard avoiding view

Resizing Behavior

Select how the screen will resize once the keyboard drawer opens.

Keyboard Vertical Offset

Set the distance between the top of the keyboard and the bottom of the screen's contents.

Resources

React Native Docs
Expo Docs

Divider

A basic line used to separate sections of content from each other.

Configuration

Parameter

Description

Color

Set the color of the divider

Height

Set the height/thickness of the divider

Container

A basic UI component similar to a View that can be styled and customized.

Configuration

Parameter

Description

Elevation

A number between 0 and 3 that controls the intensity of the drop shadow on the container.

Background image

Set an image as the background of the container.

Use gutter padding

Apply gutter padding (configurable in the theme's Spacing menu) to the right and left sides of the container. The default setting is 16pt. Set how to resize the container's background image when the image dimensions set in the builder don't match the actual dimensions of the image.

Background image resize mode

Set how to resize the container's background image when the image dimensions set in the builder don't match the actual dimensions of the image.

Blur View

A component that renders a native blur view on iOS and a semi-transparent view on Android.

Default, Light and Dark Blur Views

Configuration

📘

To use the Blur View, place whatever you want to be blurred above the Blur View as seen below

Additionally, set the Position of the Blur View to Absolute and Top: 0, Bottom: 0, Right: 0, Left: 0.

Parameter

Description

Tint

Select the type of tint to be applied to the blur view.

Intensity

A number between 1 and 100 that controls the how intense the blur is.

Resources

Expo

Scroll View

A basic container equipped with scrolling capabilities. If you are creating a list of Row, Card, or Field components, consider using a List component instead to increase your application's performance.

Configuration

Parameter

Description

Bounce

Enable so that the contents of the Scroll View bounce when the user reaches the end of the Scroll View

Horizontal

Enable to position the contents of the Scroll View into a row that will scroll horizontally.

Show Vertical Scroll Indicator

Enable to show a bar that shows the progress of scrolling through the Scroll View vertically

Show Horizontal Scroll Indicator

Enable to show a bar that shows the progress of scrolling through the Scroll View horizontally

Resources

React Native Docs
Expo Docs

Row

A layout component that will arrange all of the components nested inside of it into a row.

Configuration

Align Vertically

Parameter

Description

Start

Lines are grouped together and positioned at the beginning of the cross axis.

End

Lines are grouped together and positioned at the end of the cross axis.

Center

Lines are grouped together and positioned in the center of the container's cross axis.

Align Horizontally

Parameter

Description

Start

Child elements are positioned at the beginning of the container.

Center

Child elements are positioned in the center of the container.

End

Child elements are positioned at the end of the container.

Between

The first child element is positioned at the beginning, the last child element is positioned at the end and all remaining child elements are spread out evenly in between.

Around

Child elements are spread out across the line with equal amounts of space surrounding them.

Spacer

Adds space to the inside of things. Not on the outside! This means you always have precisely the type of space you need

Configuration

Use the input to define how much space is to be added inside each side of the Spacer.

Stack

A layout component that will arrange all of the components nested inside of it into a stack/column.

Configuration

Parameter

Description

Start

Elements are positioned at the beginning of the container.

Center

Elements are positioned in the middle of the container.

End

Elements are positioned at the end of the container.

Center

Center will automatically center anything you place inside of it. You can control its width, height and background color.

Configuration

Parameter

Description

Width

Define the width of the area to be centered.

Height

Define the height of the area to be centered.

Background Color

Set the background of the area to be centered.

Circle

A Circle will always be round and center its content.

Configuration

Parameter

Description

Size

Define the size of the circle.

Background Color

Set the background of the circle.

Square

A Square will always be a perfect square and centers its content.

Configuration

Parameter

Description

Size

Define the size of the square.

Background Color

Set the background of the square.

Updated 3 months ago


Layout


Components used to build out the structure of your screen.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.