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:
Property | Description |
---|---|
fullScreen | The modal takes over the entire screen, like a new page or screen overlay. |
pageSheet | The modal covers part of the screen, typically appearing as a sheet that slides up from the bottom. On larger devices like iPads, it’s centered with some background visible on the sides. |
formSheet | The modal appears as a smaller window in the center of the screen. On larger devices, it becomes even smaller, with more background visible around it for a focused feel. |
overFullScreen | Similar to fullScreen, but the content underneath stays visible, creating a layered effect with the Transparent option. |
Configuration Properties
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. |
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
Property | Description |
---|---|
Visible | A boolean (true /false ) value that determines if the Modal is visible |
Conditional Display
You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.
Updated 9 days ago