Skip to main content
.fullScreenCover(props: {
    isPresented: boolean,
    setIsPresented: (value: boolean) => void,
    content: () => Component,
    onDismiss?: () => void
}): Component
​
props
object
required
Configuration for the full-screen cover presentation.

​
Support

​
Usage

​
Basic full-screen cover

const body = () => {
    const [showCover, setShowCover] = useState(false)

    return VStack([
        Button("Show Full Screen", () => setShowCover(true))
    ]).fullScreenCover({
        isPresented: showCover,
        setIsPresented: setShowCover,
        content: () => VStack([
            Text("Full Screen Content")
                .font("title"),
            Button("Dismiss", () => setShowCover(false))
        ])
    })
}

​
With onDismiss callback

const body = () => {
    const [showCover, setShowCover] = useState(false)

    return VStack([
        Button("Open", () => setShowCover(true))
    ]).fullScreenCover({
        isPresented: showCover,
        setIsPresented: setShowCover,
        content: () => Text("Cover content"),
        onDismiss: () => {
            console.log("Cover dismissed")
        }
    })
}

​
Notes

  • Unlike .sheet(), a full-screen cover takes over the entire screen and does not show a drag indicator.
  • The user cannot dismiss a full-screen cover by swiping down. You must provide an explicit dismiss action (e.g., a button that sets isPresented to false).

​
See Also

  • sheet — presents a half-height modal sheet
  • presentationDetents — controls sheet snap points (not applicable to full-screen covers)