hide TabView after clicking on a NavigationLink in SwiftUI - ios

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.