Action Sheet

The Action Sheet overlays pressable buttons on top of content at the bottom of the Screen. You can nest n number of Action Sheet Item and Action Sheet Cancel component as child components of the Action Sheet.

The Action Sheet has an Show Action Sheet property to which you can assign a boolean (true/false) Variable to control when to display the Action Sheet.

The Action Sheet component will block all other interactions with the app until closed.

How to use

The Action Sheet accepts Action Sheet Item and Action Sheet Cancel component as child components. These components each have an On Press Trigger where you can assign whatever Actions you need to perform for each actionable item.

Assigning a Variable

As mentioned above, you'll typically use a Screen Variable or App Variable to store the state of the Action Sheet's visibility. When the variable is false the Action Sheet won't be shown and when true it will be shown.

To use the Action Sheet component, define a visible (or use another name that suits you) variable and set its default value to false. Setting the default value to false will make sure the Action Sheet is not displayed initially.

With the Action Sheet component selected in the component tree go to the Data tab in the right panel and assign the variable you just created to the Show Action Sheet prop.

Once you have the variable attached to the Action Sheet, you can then toggle that variable using a Set Variable Action from any available Triggers.

Showing the Action Sheet

Select a Trigger for an interactive component on your Screen, like a Button's On Press Trigger, and then add a Set Variable Action in the Action Editor.

With the Set Variable Action selected in the Action Editor, from the right panel choose the variable you created for the Show Action Sheet prop and type true into the input for the New Value prop.

Now, whenever a user presses that Button, the On Press Trigger will fire, running the Set Variable Action, which updates the variable associated with the Action Sheet's Show Action Sheet Config prop to true, and in turn making the Action Sheet visible to the user.

Hiding the Action Sheet

Remember, once the Action Sheet is visible, the user won't be able to interact with any other components on your Screen except for any Action Sheet Items or Action Sheet Cancel components that you have added to the Action Sheet.

That means in order to close the Action Sheet, you'll need to use a Set Variable Action on one of the Action Sheet Item or Action Sheet Cancel components' On Press Triggers that updates the variable associated with the Action Sheet to false.

Now the On Press Trigger fires when pressed, running the Set Variable Action, which updates the variable associated with the Action Sheet's Show Action Sheet Config prop to false, and in turn making the Action Sheet hidden to the user.

Toggling the Action Sheet

Sometimes it's more convenient when instead of setting true or false explicitly in the Set Variable Action as explained above, you can instead select the same variable as the New Value, and then apply the Negate Transform Function from the transform with input below. This will always set the New Value to true if already set to false, and to false if already true.

In this case, the On Press Trigger will fire, running the Set Variable Action, which updates the variable associated with the Action Sheet's Show Action Sheet Config prop to the opposite of its current value, and in turn toggling the Modal's visibility depending on its existing state.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Configuration Properties

Data Properties

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.