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.

320

Adding an Action Sheet

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

900

Then, select the Action component in the Components tree:

  • Go to Properties Panel > Config (second tab). 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.
2872

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.
2880

Select Action Sheet Cancel from the Components tree:

  • 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.
2880

📘

Add Actions on Action Sheet Item component

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.

1425

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:

PropertyDescription
Component nameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Action Sheet Item.
Font ColorColor of the Label on the item.
LabelItem label to show when the Action Sheet component is visible. The default value is Option.

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:

Component nameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Action Sheet Cancel.
Font ColorColor of the Label on the item.
LabelItem label to show when the Action Sheet component is visible. The default value is Cancel.