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.

slideModal slides in from the bottom.
fadeModal fades into view.
noneNo animation applied. Default value.

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



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:

fullScreenTo cover the screen completely.
pageSheetTo cover portrait-width view centered.
formSheetTo cover narrow-width view centered.
overFullScreenTo 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: