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    

Inputs & Controls

Components that can be used to log user input

Text Input

A basic, but highly customizable text field that logs user input from the keyboard.

Configuration

Parameter

Description

Editable

Allows you to toggle if the text input is able to be used or not.

Auto Focus

When enabled, the keyboard will open as soon as screen loads and the input will immediately be ready to use

Field name

The name of the value of the component to be used in the onChange function used to log user input.

Max length

Allows you to set a maximum number of characters that can be entered into the input.

Multiple Lines

When enabled, text will wrap and extend to multiples lines instead of extending past the screen.

Disable Spell Check

When enabled, a red line will not appear under incorrectly spelled words/words not known to Auto Correct.

Auto Correct

When enabled, Auto Correct will check what is being entered in the input.

Hide Caret

When enabled, the cursor in the text input will be hidden.

Placeholder Text

Text to appear while the text input is blank.

Auto Complete (Android Only)

The selected value alerts the system the type of content to expect, therefore improving its auto complete capabilities.

Default Value

The initial value stored in the text input.

Keyboard Type

Allows you to select the type of keyboard that will appear when the user focuses on the text input. Examples

Number of Lines

Only applicable when Multiple Lines is enabled. Allows you to set how many lines the text input will extend to.

Return Key Type

Allows you to select the type of return key the user will see.

Scroll Enabled

Only applicable when Multiple Lines is enabled. When enabled, the user will be able to scroll through the text they've entered.

Auto Capitalize

Allows you to select what type of input will be capitalized.

Return Key Label

The Android-only alternative to Return Key Type.

Selection Color

Allows you to change the color of the highlight over selected text in the input.

Password Field

When enabled, the user input is hidden on the screen and is displayed with '●'.

Text Content Type

Allows you to select a content type which informs the system what to expect which prompts it to suggest proper autofill content.

Allow Font Scaling

When enabled, font sizes in the input will scale to match with the text size the user has set in their accessibility settings.

Clear Text on Focus

When enabled, all text in the input will be deleted when the input is focused on.

Hide Context Menu

When enabled, the context menu will become hidden.

Select Text on Focus

Select Text on Focus

Text Break Strategy

Android Only. Allows you to set how paragraphs of multiple lines will be broken up.

Placeholder Text Color

Allows you to set the color of the placeholder text.

Underline Color

Android Only. Allows you to set the color of the line that appears under text when the user is finished typing.

Enables Return Key Automatically

When enabled, the return key will be disabled until the user inputs text in the field.

Resources

React Native

Touchable

A wrapper component that is used to make other components responsive to user touch. Useful for creating custom buttons.

Configuration

Parameter

Description

Hit Slop

Define the area beyond the actual dimensions of the wrapped component that will respond to user touch.

onPress handler

Define the function that will be executed when the Touchable element is pressed.

Resources

React Native Docs
Expo Docs

Checkbox

A basic checkbox that a user can toggle between a selected and unselected state

Configuration

Parameter

Description

Color

Set the background color of the checkbox for its selected state.

Disabled

Removes checkbox functionality and grays out the outline of the box.

Field name

Set the name of the field in the onPress function that controls toggling the checkbox value and its state.
If you have multiple checkboxes on a screen, make sure to assign each one a different Field name. Without doing so, all checkboxes will be toggled by a single user interaction.

Resources

React Native Docs

Switch

A basic switch that can be toggled between a selected and unselected state

Configuration

Parameter

Description

Color

Set the background of the switch that will be displayed when it is selected.

Disabled

Remove switch functionality, gray out the switch, and sets it as unselected.

Field name

Set the name of the field in the onPress function that controls toggling the switch value and its state
If you have multiple switches on a screen, make sure to assign each one a different Field name. Without doing so, all switches will be toggled by a single user interaction.

Resources

React Native Docs

Radio Button

A button used to indicate a single user selection out of a list of options

Configuration

Parameter

Description

Color

Select the color of the radio button.

Disabled

Removes radio button functionality and grays out the component.

Selected

Toggle between a selected and unselected state.

Unselected Color

Select the color of the radio button outline in the unselected state.

Slider

A component that allows the user to select a value from a fixed range of numbers.

Configuration

Parameter

Description

Step

Set the increment of the value

Disabled

Removes slider functionality, grays out the slider and sets the value to 0

Field Name

Set the name of the field in the onChange function that controls setting the value of the slider and its state

Thumb Size

The size of the thumb

Maximum Value

Maximum value of the slider

Minimum Value

Minimum value of the slider

Thumb Tint Color

The color of the thumb

Hit Slop

The size of the touchable area that extends past the thumb

Thumb Border Radius

The border radius of the thumb

Track Border Radius

The border radius of the track of the slider

Maximum Color

The color of the slider track on the right of the thumb

Minimum Color

The color of the slider track on the left of the thumb

Disabled Thumb Tint Color

The color of the thumb when the slider is set to Disabled

Resources

Expo Docs

Updated 10 months ago


Inputs & Controls


Components that can be used to log user input

Suggested Edits are limited on API Reference Pages

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