Use a Full Screen Cover within a View with a Full Screen Cover

Question

I have a parent view covering the entire screen that has a .fullScreenCover. That parent view contains several child views with all the details of the 'page'. One of those child views contains an element that also has a .fullScreenCover control.

struct ParentView: View {
    @State var isPresent = false

    var body: some View {
        VStack {
            // Other children
            ChildView()
        }.fullScreenCover(isPresent: self.$isPresent) {
            CoverView()
        }
    }
}


struct ChildView: View {
    @State var isPresent = false

    var body: some View {
        Button("Hello", action: { self.isPresent = true })
            .fullScreenView(isPresent: self.$isPresent) {
                ChildCoverView()
            }
    }
}

The screen cover for the parent view opens as expected, but when I try to open the screen cover from the child view, nothing happens. If I remove the .fullScreenCover control from the parent view, then the child screen view does work, so it must have something to do with the nesting and all.

Is there a way to get a child .fullScreenCover to work inside a parent view that also has a .fullScreenCover?

It's the same with `sheet` as said [here](https://stackoverflow.com/q/58837007/14351818) --- a bug. Coincidentally, it was fixed 2 days ago in Xcode 12.5.0 Beta 3. — aheze, Mar 05 '21 at 20:16
@Caleb : You do not need wait for fix the bug, you can make a custom View with same functionality of fullScreenCover or sheet. — ios coder, Mar 05 '21 at 23:29

score 2 · Accepted Answer · answered Mar 05 '21 at 20:16

There was/is a bug preventing this from working until iOS 14.5 beta 3.

From the release notes (https://developer.apple.com/documentation/ios-ipados-release-notes/ios-ipados-14_5-beta-release-notes):

You can now apply multiple sheet(isPresented:onDismiss:content:) and fullScreenCover(item:onDismiss:content:) modifiers in the same view hierarchy. (74246633)

The workaround until then is to present from a common ancestor or present the parent fullScreenCover on a different branch of the view tree (ie one that doesn't contain the child view):

struct ContentView: View {
    @State var isPresent = false

    var body: some View {
        VStack {
            // Other children
            ChildView() //branch 1
            Button("Present Parent") { //branch 2
                isPresent.toggle()
            }.fullScreenCover(isPresented: self.$isPresent) {
                Text("hello")
            }
        }
    }
}


struct ChildView: View {
    @State var isPresent = false

    var body: some View {
        Button("Present child", action: { self.isPresent = true })
            .fullScreenCover(isPresented: self.$isPresent) {
                Text("world")
            }
    }
}

Use a Full Screen Cover within a View with a Full Screen Cover

1 Answers1