A specialized set of components that are wrapped around other components to hold them.

Modal

A component to present content above an enclosing view. It has a visible state. When the visible state is set to true, it becomes visible over the enclosing view.

A Modal component wraps around other presentational components, as shown in the example below:

Initial Configuration

To use the Modal component, define a visible variable in App Variables and set its default value to false.

Then, select the Modal component, go to Properties panel > Config. On property Visible, select the Global Variable Visible as its value. This will change the state of the Modal's visibility when the value is true or false.

The Modal is visible when the value of this Global Variable is true. And is not visible when the value of the same variable is false.

To make the Modal visible, add a Set Global Variable action on the Button component that says Open Modal (or any other button on your initial screen). Set its value to true. When this Button is pressed, the Modal component will be visible.

In the Modal component, add a Button to close it. Select it in the Components tree, and add a Set Global Variable action on the Button component. Set its value to false. When this Button is pressed, the Modal component will be closed and the enclosing view is shown.

That's it! You now have a working Modal component. Open the iOS or Android preview mode to test it out.

Available Properties

There are three main properties available on the Modal component to configure.

Animation Type

Animation Type controls how a Modal component animates when opened or closed.

Property	Description
slide	Modal slides in from the bottom.
fade	Modal fades into view.
none	No animation applied.

Here is an example of when the Animation Type is set to Slide.

Transparent

When enabled, this property triggers the Modal component will appear over a transparent background.

Presentation Style

This property controls how the Modal component appears. It's an iOS-only property that means, setting up this property will only have an effect on iOS devices and not on Android.

There are four values available:

Property	Description
fullScreen	To cover the screen completely.
pageSheet	To cover portrait-width view centered.
formSheet	To cover narrow-width view centered.
overFullScreen	To cover the screen completely, but allows transparency.

Here is an example when the value of Presentation Style is set to pageSheet on iOS preview mode:

The same property has no effect on Android.

Action Sheet

An overlay component that displays content from the bottom of the screen. It is a specific type of component that displays two or more choices related to the current context.

It is presented above an enclosing view. It has a visible state. When the visible state is set to true, the Action Sheet appears, and when the state is set to false, it disappears.

In Draftbit, an Action Sheet component wraps two other components:

Action Sheet Item
Action Sheet Cancel

Here is an example of how you can layout the Action Sheet, Action Sheet Item, and Action Sheet Cancel components. The Sheet Item and Sheet Cancel buttons are nested inside the Action Sheet component.

Initial Configuration

To use the Action Sheet component, define a visible variable in App Variables and set its default value to false.

Then, select the Action component in the Components tree, go to Properties panel > Config. On property Show Action Sheet, select the Global Variable Visible as its value. This will change the state of the component's visibility when the value is true or false.

To make the Action Sheet visible, add a Set Global Variable action on the Button component that says Open Action Sheet (or any other button on your initial screen). Set its value to true. When this button is pressed, the Action Sheet component will be visible.

Select Action Sheet Cancel from the Components tree, and add a Set Global Variable action on it. Set its value to false. When it is pressed, the Action component will be closed, and the enclosing view is shown.

📘
On Action Sheet Item, you can add any other Action available in Draftbit, such as sending an API request, etc.

Open the iOS or Android preview mode to test it out.

Action Sheet Item

An Action Sheet Item is a Button component in the general sense. Must be nested inside the Action Sheet component. It has the following configuration:

Property	Description
Component name	To alter the name of the component. The name is reflected in the Components tree. Defaults to Action Sheet Item.
Label	Item label to show when the Action Sheet component is visible. The default value is `Option`.
Font Color	Color of the Label on the item.

Action Sheet Cancel

The Action Sheet Cancel component will trigger a Set Global Variable action to close the action sheet. Must be nested inside the Action Sheet component. It has the following configuration:

Property	Description
Component name	To alter the name of the component. The name is reflected in the Components tree. Defaults to Action Sheet Cancel.
Label	Item label to show when the Action Sheet component is visible. The default value is `Cancel`.
Font Color	Color of the Label on the item.