NavigationView title doesn't appear when the views are in TabView in SwiftUI
The first thing to point out here is that all of the navigation bar modifiers you have in your code should be modifiers on a view inside of the NavigationView
, not modifiers on NavigationView
itself. From the documentation for .navigationBarTitle
, for example:
This modifier only takes effect when this view is inside of and visible within a NavigationView.
Also, there is no need to have a NavigationView
wrapping your TabView
and then another inside your MainContentView
. This will only lead to nested navigation bars, and you definitely don't want that. Instead, just use one NavigationView
. I would also suggest that you not put the NavigationView
inside the MainContentView
body.
I've refactored your code to show what I'm talking about, although I wasn't sure where you were trying to use .navigationBarBackButtonHidden
and .navigationBarHidden
, so I omitted them. Just keep in mind that they function just like .navigationBarTitle
- you need to use them as modifiers on a view inside NavigationView
, not on NavigationView
itself.
struct TabBarView: View {
var body: some View {
TabView {
NavigationView {
MainContentView()
}
.tag(0)
.tabItem {
Text("Main")
}
SearchContentView()
.tag(1)
.tabItem {
Text("Search")
}
}
}
}
struct MainContentView: View {
var body: some View {
Text("Some Content View")
.navigationBarTitle("Travel")
}
}
As you might notice, I also removed the VStack
from .tabItem
. You can put both Text
and Image
inside .tabItem
without the need for a VStack
, and if I'm not mistaken, .tabItem
ignores anything that is not Text
or Image
anyway.
If you need Login/SignUp View before tabview do not use NavigationView to wrap it. In the Login/Sign up view
@EnvironmentObject var authService:AuthService
var body: some View{
ZStack{
if(!authService.isSignedIn){
Button(action: {
self.authService.signIn()
}) {
Text("Login")
}
}
else{
TabBarView()
}
}
}
In the subviews you can control the isSignedIn variable with @EnvironmentObject
and change that value when Signed Out
This is an example of the TabBarView()
used before:
var body: some View {
TabView {
NavigationView{
FirstView()
}
.tabItem {
VStack{
Image("first")
Text("First")
}
}
NavigationView{
SecondView()
}
.tabItem {
VStack{
Image("second")
Text("Second")
}
}
}
}
This is could be one of the tabviews:
@EnvironmentObject var authService:AuthService
var body: some View {
TextView("Hello World")
.navigationBarItems(trailing: LogOutButton(logOutFunction: authService.signOut))
}