All Collections
Modal Presentation
Full Screen Cover Modifier
Full Screen Cover Modifier

Used to present a modal layer that covers the entire screen when the binding to a Boolean value that you provide is True.

Updated over a week ago

Use the Full Screen Cover modifier to show a modal layer that covers the entire screen.

To build a Full Screen Cover, you must create and bind a Boolean value to the Is Presented parameter. This determines whether to present the Full Screen Cover.

It’s best practice to create the Full Screen Cover in a separate component and insert an instance of it in the Full Screen Cover modifier.

For example, the Full Screen Cover modifier has been added to the Main screen with an instance of the Full Screen Cover screen attached to the modifier. When a user clicks on the Button, the Full Screen Cover screen is presented because the Boolean value isPresenting is bound to the Button.

Unlike a Sheet, you must set a dismissing action for the Full Screen Cover or else a user won’t be able to remove it. In this example, I applied the On Tap Gesture to the component of the Full Screen Cover.

From the Inspector panel, you can also add an Action that executes when dismissing the Full Screen Cover. It is most commonly used with a Custom code integration.

Did this answer your question?