Modal

A Modal overlays content on top of the Screen. You can nest other child components, like Views, Buttons, and Text Inputs inside the Modal.

For example, maybe you want to show an alert to a user when something happens in your app - the Modal is great way to handle this. Or, if you need to show a confirmation/prompt dialog, a Modal is also a good option.

The Modal has a Visible property to which you can assign a boolean (true/false) Variable to control when to display the Modal.

The Modal component will block all other interactions with the app that aren't available within the Modal itself and will always be rendered on top of any other components.

📘

Previewing

To preview the Modal in action, you need to switch to one of the preview modes (Web, iOS, Android).

⚠️

Incompatible with other overlay components

Because a Modal will always be rendered on top of other UI elements, you can't combine the Modal with other components that also have an overlay effect. This includes Picker when configured for native mode, Date Picker, and Action Sheet.

How to use

Assigning a Variable

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

To use the Modal 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 Modal is not displayed initially.

With the Modal component selected in the component tree go to the Config tab in the right panel and assign the variable you just created to the Visible prop.

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

Showing the Modal

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 Variable 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 Modal's Visible Config prop to true, and in turn making the Modal visible to the user.

Hiding the Modal

Remember, once the Modal is visible, the user won't be able to interact with any other components on your Screen unless they are displayed inside the Modal.

That means in order to close the Modal, you'll need another Button, or similar component, inside the Modal to again Trigger a Set Variable Action that updates the variable associated with the Modal to false.

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 Modal's Visible Config prop to false, and in turn making the Modal hidden to the user.

Toggling the Modal

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, whenever a user presses that Button, the On Press Trigger will fire, running the Set Variable Action, which updates the variable associated with the Modal's Visible Config prop to the opposite of its current value, and in turn toggling the Modal's visibility depending on its existing state.

Style Properties

The Modal doesn't have any style properties itself, however it does have a default white background, but you can set the Modal to be transparent.

You can use a View component as the parent component inside the Modal to set a background color and layout the other child components to display within the Modal.

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:

Configuration Properties

Animation Type

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

Transparent

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

You can use a View or Scroll Viewcomponent as the parent component inside the Modal to set a background color and layout the other components to display in the Modal.

This can be useful when you don't want the Modal to obscure everything beneath it on the Screen.

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.