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:
To use the Modal component, define a
visible variable in App Variables and set its default value to
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.
There are three main properties available on the Modal component to configure.
Animation Type controls how a Modal component animates when opened or closed.
|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.
When enabled, this property triggers the Modal component will appear over a transparent background.
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:
|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:
Updated 1 day ago