How to hide a TabBar in SwiftUI
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 typeVisibility
, 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
- Create a
TabBar
and add a view calledHomeView
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)
}
}
}
}
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/