How to hide a TabBar in SwiftUI

AsyncLearn
2 min readSep 25, 2023

--

Starting from iOS 16, we can use toolbar(_:for:) to hide the TabBar in our application. This method takes two parameters:

  • visibility: of type Visibility, specifies the visibility we want to assign to the toolbar.
public enum Visibility {
case automatic
case hidden
case visible
}

For our example, we will use .hidden since we want to hide the TabBar.

  • bars: the bar to update its visibility. We can use the following options: .bottomBar, .navigationBar, .tabBar, and .automatic.

Example of How to Hide a TabBar

  1. Create a TabBar and add a view called HomeView within it.
struct ContentView: View {
var body: some View {
TabView {
HomeView()
.tabItem {
Label("", systemImage: "house.fill")
}
}
}
}

2. Create the HomeView with a navigationLink that will take us to a new view called DetailView.

struct HomeView: View {
var body: some View {
NavigationStack {
NavigationLink("Navigate to detail") {
DetailView()
}
}
}
}

struct DetailView: View {
var body: some View {
Text("Detail View")
}
}

3. Use the toolbar(_:for:) method to specify that we want to hide the .tabBar when navigating to the DetailView.

struct HomeView: View {
var body: some View {
NavigationStack {
NavigationLink("Navigate to detail") {
DetailView()
.toolbar(.hidden, for: .tabBar)
}
}
}
}
Example of how to hide a TabBar

If you want to read the Spanish version of this article, you can find it here: https://asynclearn.com/blog/como-ocultar-un-tabbar-en-swiftui/

--

--

AsyncLearn
AsyncLearn

Written by AsyncLearn

Stay up-to-date in the world of mobile applications with our specialised blog.