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.

Adding an Action Sheet

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

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:

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

📘

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.

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:

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: