hide TabView after clicking on a NavigationLink in SwiftUI

Question

when I have a TabView{} and the first Tab has a NavigationView , when I click on a Row , I want that TabView{} to disappear. How do I do that?

Same Issue here: How to hide the TabBar when navigate with NavigationLink in SwiftUI?

But unfortunately no solution.

Answer 1

There is no way to do that currently. For example, NavigationView responds to the .navigationBarHidden(_:) method on its descendants, but there is not an equivalent for TabView .

If this is something you'd like to see, let Apple know .

Answer 2

there's no way to hide TabView so I had to add TabView inside ZStack as this:

var body: some View {
    ZStack {
        TabView {
            TabBar1().environmentObject(self.userData)
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
            }
            TabBar2()
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
            }
        }

        if self.userData.showFullScreen {
            FullScreen().environmentObject(self.userData)

        }
    }
}

UserData:

  final class UserData: ObservableObject {
    @Published var showFullScreen = false}

TabBar1:

struct TabBar1: View {
    @EnvironmentObject var userData: UserData

    var body: some View {
        Text("TabBar 1")
            .edgesIgnoringSafeArea(.all)
            .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
            .background(Color.green)
            .onTapGesture {
                self.userData.showFullScreen.toggle()
        }
    }
}

FullScreen:

struct FullScreen: View {
    @EnvironmentObject var userData: UserData

    var body: some View {
        Text("FullScreen")
            .edgesIgnoringSafeArea(.all)
            .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
            .background(Color.red)
            .onTapGesture {
                self.userData.showFullScreen.toggle()
        }
    }
}

check full code on Github

there's also some other ways but it depends on the structure of the views

Answer 3

To solve this limitation, I came out with this approach:

• Created an enum to identify the tabs

enum Tabs: Int {
    case tab1
    case tab2
    
    var title: String {
        switch self {
        case .tab1: return "Tab 1 Title"
        case .tab2: return "Tab 2 Title"
        }
    }

    var imageName: String {
        switch self {
        case .tab1: return "star" // Example using SF Symbol
        case .tab2: return "ellipsis.circle"
        }
    }
}

• Inside the view, such as ContentView.swift , added a property like this:

@State private var selectedTab = Tabs.tab1

• Inside the body:

NavigationView {
    TabView(selection: $selectedTab) {
        ViewExample1()
            .tabItem {
                Image(systemName: Tabs.tab1.imageName)
                Text(Tabs.tab1.title)
        }.tag(Tabs.tab1)
        
        ViewExample2()
            .tabItem {
                Image(systemName: Tabs.tab2.imageName)
                Text(Tabs.tab2.title)
        }.tag(Tabs.tab2)
    }
    .navigationBarTitle(selectedTab.title)
}

That's all. I hope this might be helpful.

Note: Just be aware this workaround hides the TabView in any and all child views, if you want to hide in just a particular view, this won't give you the result that you looking for.

Hopefully, Apple implements an (official and proper) option to hide the TabView soon.