Swiftui Hide Tabview Bar Inside Navigationlink Views

SwiftUI Hide TabView bar inside NavigationLink views

If we talk about standard TabView, the possible workaround solution can be based on TabBarAccessor from my answer on Programmatically detect Tab Bar or TabView height in SwiftUI

Here is a required modification in tab item holding NavigationView. Tested with Xcode 11.4 / iOS 13.4

struct FirstTabView: View {
    @State private var tabBar: UITabBar! = nil

    var body: some View {
        NavigationView {
            NavigationLink(destination:
                FirstChildView()
                    .onAppear { self.tabBar.isHidden = true }     // !!
                    .onDisappear { self.tabBar.isHidden = false } // !!
            ) {
                Text("Go to...")
            }
            .navigationBarTitle("FirstTitle", displayMode: .inline)
        }
        .background(TabBarAccessor { tabbar in   // << here !!
            self.tabBar = tabbar
        })
    }
}

Note: or course if FirstTabView should be reusable and can be instantiated standalone, then tabBar property inside should be made optional and handle ansbsent tabBar explicitly.

How to hide TabView when opening a new view with NavigationLink?

Enclose the contents of your tabitem inside an if condition that checks a shared state:

struct ContentView: View {

    @StateObject private var state = State()

    var body: some View {
        TabView {
            FirstView().tabItem {
                if !state.hideTabView {
                    // tabItem image and text
                }
            }
            SecondView().tabItem {
                if !state.hideTabView {
                    // tabItem image and text
                }
            }
        }
        .environmentObject(state)
    }
}

Where State is an ObservableObject as such:

class State: ObservableObject {
    @Published hideTabView: Bool = false
}

Then you can use onAppear on the View that is linked to via NavigationLink (e.g inside FirstView):

struct FirstView: View {
    
    @EnvironmentObject private var state: State
    var body: some View {
        VStack {
            // ... some content
        }
        .onAppear(perform: { state.hideTabView = true })
        .onDisappear(perform: { state.hideTabView = false })
    }
}

There is a slight delay on the TabView appearing again when you press "< Back", if that really bothers you then you can make a custom Back button and move this state.hideTabView = false to the event of tapping that button.

That is one approach I can think of :) Also, you might find this thread helpful.

hide TabView after clicking on a NavigationLink in SwiftUI

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.

SwiftUI TabView inside a NavigationView

It is perfectly fine to have TabView() inside a NavigationView. Every time we switch between pages in any app, the navigating is mostly expected, so almost every view is inside the NavigtionView for this reason.

You can achieve this design with something like this (see the bottom images also):

struct LoginDemo: View {
  @State var username = ""
  var body: some View {
    NavigationView {
        VStack {
            TextField("Enter your user name", text: $username)
                .font(.headline)
                .multilineTextAlignment(.center)
                .frame(width: 300)
                .border(.black)
            NavigationLink {
                GotoTabView()
            } label: {
                Text("search")
            }
            .disabled(username == "Admin" ? false : true)
        }
    }
    .navigationTitle("Hey It's Nav View")
  }
}
struct GotoTabView: View {
  @State var temp = "status"
  @State var selection = "view1"
  var body: some View {
    TabView(selection: $selection) {
        Image("Swift")
            .resizable()
            .frame(width: 300, height: 300)
            .tabItem {
                Text("view 1")
            }
            .tag("view1")
        Image("Swift")
            .resizable()
            .frame(width: 500, height: 500)
            .tabItem {
                Text("view 2")
            }
            .tag("view2")
    }
    .onChange(of: selection){ _ in
        if selection == "view1" {
            temp = "status"
        }
        else {
            temp = "hero"
        }
    }
    .toolbar{
        ToolbarItem(placement: .principal) {
            Text(temp)
        }
    }
  }
} 

NavigationView:

TabView:

---

Related Topics