A component to present content above an enclosing view. It has a visible state. When the visible state is set to true, it becomes visible over the enclosing view.

A Modal component wraps around other presentational components, as shown in the example below:

Adding a Modal

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

Then, select the Modal component, go to Properties Panel > Config (second tab).

On property Visible, select the Global Variable Visible as its value. This will change the state of the Modal's visibility when the value is true or false.

The Modal is visible when the value of this Global Variable is true. And is not visible when the value of the same variable is false.

To make the Modal visible, add a Set Global Variable action on the Button component that says Open Modal (or any other button on your initial screen). Set its value to true. When this Button is pressed, the Modal component will be visible.

In the Modal component, add a Button to close it. Select it in the Components tree, and add a Set Global Variable action on the Button component. Set its value to false. When this Button is pressed, the Modal component will be closed and the enclosing view is shown.

That's it! You now have a working Modal component.

Open the iOS or Android preview mode to test it out.

Configuration Properties

There are three main properties available on the Modal component to configure.

Animation Type

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

Property	Description
slide	Modal slides in from the bottom.
fade	Modal fades into view.
none	No animation applied. Default value.

Here is an example of when the Animation Type is set to slide.

Transparent

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

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:

Property	Description
fullScreen	To cover the screen completely.
pageSheet	To cover portrait-width view centered.
formSheet	To cover narrow-width view centered.
overFullScreen	To cover the screen completely, but allows transparency.

Here is an example when the value of Presentation Style is set to pageSheet on iOS preview mode:

The same property has no effect on Android: