Full Screen Cover Modifier

The Full Screen Cover modifier presents a modal layer that covers the entire screen when binding to a Boolean value you provide is True.

Overview

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 <code>isPresenting</code> 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.