NavigationBar not appearing when placed in root view - swiftui

Question

Not sure if this is the right way to accomplish having access to NavigationLink throughout my app, but I placed my NavigationBar in my root view, which happens to be the tab controller. See code below.
import SwiftUI
import Firebase
import Combine
struct ContentView: View {
#EnvironmentObject var session: SessionStore
func getUser() {
session.listen()
}
var body: some View {
NavigationView {
Group {
TabView {
ExploreView().tabItem {
Image(systemName: "house.fill")
Text("Explore")
}.tag(1)
FestivalsView().tabItem {
Image(systemName: "globe")
Text("Festivals")
}.tag(2)
MapView().tabItem {
Image(systemName: "map")
Text("Map")
}.tag(3)
ProfileView().tabItem {
Image(systemName: "person.crop.circle.fill")
Text("Profile")
}.tag(4)
}
.accentColor(Color("wdwPurple"))
.edgesIgnoringSafeArea(.top)
}.onAppear(perform: getUser)
}
}
}
However, within my ExploreView, the NavigationBar does not appear, and content floats under the status bar as shown in this image.
Here's the code for ExploreView
import SwiftUI
import Firebase
import Combine
import FirebaseFirestore
import UIKit
struct ExploreView: View {
let db = Firestore.firestore()
var model = Passport.all()
var body: some View {
VStack {
ScrollView (.vertical, showsIndicators: false) {
Header()
.padding(.horizontal, 24)
HStack {
Image("Ad_Banner")
.resizable()
.scaledToFill()
.frame(minWidth: 0, maxWidth: 366)
.padding(.bottom, 5)
}.padding(.horizontal, 24)
HStack {
ScrollView(.horizontal, showsIndicators: false) {
HStack {
NavigationLink (destination: EventsView()) {
ExploreBoxes(tileLabel: "Events", tileIcon: "calendar")
.padding(.leading, 24)
.padding(.trailing, 10)
}
NavigationLink (destination: FavoritesView()) {
ExploreBoxes(tileLabel: "Favorites", tileIcon: "heart.fill")
.padding(.trailing, 10)
}
NavigationLink (destination: ParkMapsView()) {
ExploreBoxes(tileLabel: "Park Maps", tileIcon: "mappin.and.ellipse")
.padding(.trailing, 10)
}
}.frame(height: 180)
}
}
NavigationLink (destination: AboutView()) {
HStack {
Image("Image_Passports_Learn")
.renderingMode(.original)
.resizable()
.scaledToFill()
.frame(minWidth: 0, maxWidth: 366)
.cornerRadius(4)
}.padding(.horizontal, 24)
.padding(.bottom, 90)
}
}.navigationBarTitle(Text(""))
Spacer()
}.edgesIgnoringSafeArea(.bottom)
.background(Color("bodyBackground"))
}
}

Answer 1

This doesn't really work (as you've already discovered.) Similarly, in UIKit, this also wouldn't work. You need to create NavigationViews for each tab that you have. Typically, your TabView is your top-level view, and each tab can be wrapped in a NavigationView. Once you do that, you likely don't need to ignore top edge safe areas, either, as your NavigationView will be in the correct spot and properly communicate where the bar ends to its subviews.