How to display a fullstack modal with SwiftUI?

Question

I have a navbar up to and a tab bar at the bottom for most of the navigation in my app. I'm trying to display a fullscreen view, effectively removing all navigation, when clicking a button.

Other questions on SO address this case when there is no navbar or no tab bar, so they don't really answer my use case.

Here what I have tried:

• Hide the navbar & tab bar on click: doesn't work for the tab bar. The top navigation becomes buggy if I try to go back to another view when dismissing the full screen view.

• Use a modal: it works, but it's not fullscreen, which doesn't fit what I trying to do.

• Use a ZStack on top of everything that I toggle with a button: this doesn't hide the tabbar.

Is there a solution, or should I just give up and use a modal?

Thanks

Answer 1

Here is a demo of possible solution.

struct DemoModalOverTabView: View {
    @State private var showModally = false
    var body: some View {
        ZStack {
            TabView {     //  << main tab view
                DemoTab
            }.disabled(showModally) // << deactivate forcefully

            if showModally {
                DemoModal     //  << modal view
                   .zIndex(1)     // << required !!
                   .transition(.move(edge: .bottom)).animation(.default)
            }
        }
    }

    var DemoTab: some View {
        Button("Show") { self.showModally = true }
            .tabItem { Image(systemName: "person") }
    }

    var DemoModal: some View {
        Button("Hide") { self.showModally = false }
           .frame(maxWidth: .infinity, maxHeight: .infinity)
           .background(Color.yellow)
           .edgesIgnoringSafeArea(.all)
    }
}