Unable to showing navigation with Title In swift UI - swiftui

Question

I am using tab bar for with three tab for showing the data form api call . I added the required property for showing the navigation at top with title . Any reason it not showing it at top of the app .
Here is my content view code .
import SwiftUI
struct ContentView: View {
#State private var selection = 0
#EnvironmentObject private var viewModel: FruitsViewModel
var body: some View {
TabView(selection: $selection) {
NavigationView { TabListView(fruit: viewModel.fruits)}.tabItem {
Image(systemName: "house.fill")
Text("List View")
} .navigationBarTitle("Fruit List ", displayMode: .inline)
.accentColor(.red)
.onAppear() {
UITabBar.appearance().barTintColor = .white
}
.tag(0)
NavigationView {GridListView(fruit: viewModel.fruits)}.tabItem {
Image(systemName: "bookmark.circle.fill")
Text("Collection View")
}.navigationBarTitle("Fruit List ", displayMode: .inline)
.accentColor(.red)
.onAppear() {
UITabBar.appearance().barTintColor = .white
}
.tag(1)
NavigationView {WebListView()}.tabItem {
Image(systemName: "person.crop.circle")
Text("Web View")
}.navigationBarTitle("Fruit List ", displayMode: .inline)
.accentColor(.red)
.onAppear() {
UITabBar.appearance().barTintColor = .white
}
}.tag(2)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Here is the TabList code .
import SwiftUI
struct TabListView: View {
let fruit: [Fruits]
#EnvironmentObject private var viewModel: FruitsViewModel
var body: some View {
VStack {
List {
ForEach(viewModel.fruits) { fruits in
NavigationLink(destination: FruitDetailsView(fruit: fruits)) {
FruitsRowList(fruit: fruits)
}
}
}
}
.navigationTitle("Fruit List")
.onAppear {
Task {
await viewModel.getFruits()
}
}
}
}
Here is the result on simulator .. It just collapsed with entire view when I scroll down it .

Answer 1

Order is very important in SwiftUI, Each tab should have its own NavigationView or NavigationStack.
tabItem should be attached to the NavigationView and navigationTitle should go inside the NavigationView.
struct ContentView: View {
#State private var selection = 0
//#EnvironmentObject private var viewModel: FruitsViewModel
var body: some View {
TabView(selection: $selection) {
NavigationView {
Text("TabListView(fruit: viewModel.fruits)")
.navigationBarTitle("Fruit List ", displayMode: .inline)
}
.tabItem {
Image(systemName: "house.fill")
Text("List View")
}
.accentColor(.red)
.onAppear() {
UITabBar.appearance().barTintColor = .white
}
.tag(0)
NavigationView {
Text("GridListView(fruit: viewModel.fruits)")
.navigationBarTitle("Fruit List ", displayMode: .inline)
}.tabItem {
Image(systemName: "bookmark.circle.fill")
Text("Collection View")
}
.accentColor(.red)
.onAppear() {
UITabBar.appearance().barTintColor = .white
}
.tag(1)
NavigationView {
Text("WebListView()")
.navigationBarTitle("Fruit List ", displayMode: .inline)
}.tabItem {
Image(systemName: "person.crop.circle")
Text("Web View")
.accentColor(.red)
.onAppear() {
UITabBar.appearance().barTintColor = .white
}
}
.tag(2)
}
}
}