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.

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:
Property | Description |
---|---|
Component name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Action Sheet Item. |
Font Color | Color of the Label on the item. |
Label | Item 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 name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Action Sheet Cancel. |
Font Color | Color of the Label on the item. |
Label | Item label to show when the Action Sheet component is visible. The default value is Cancel . |
Updated 7 months ago