SwiftUI TabView + NavigationView navbar doesn't show up

Question

I started to use SwiftUI after a couple years of UIKit.. This is not a piece of cake lol.

Alright, so I am trying to build an app that has a tab bar with 2 elements. Each Tab with contain a ViewController (View now) and they will be embedded in a NavigationController (NavigationView now)

The actual result is this

and I am expecting to have a nav bar with a title set to Home.

Could you explain me what I do wrong here? i followed the documentation and a couple tutorials, and I don't seem to do differently.

import SwiftUI

struct TabBarView: View {
    var body: some View {
        TabView() {
            RedView()
                .tabItem({
                    Image(systemName: "house.fill")
                    Text("Home")
                })
                .tag(0)
            BlueView()
                .tabItem({
                    Image(systemName: "dollarsign.square.fill")
                    Text("Trade")
                })
                .tag(1)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        TabBarView()
    }
}


struct RedView: View {
    var body: some View {
        NavigationView {
            List {
                Text("test")
            }
        }
        .navigationBarTitle("Home")
    }
}
struct BlueView: View {
    var body: some View {
        NavigationView {
            List {
                Text("test2")
            }
        }
        .navigationBarTitle("Trade")
    }
}

This is the file that contains everything at the moment. Thanks in advance for any future help!

Asperi Asperi · Accepted Answer · 2020-07-16T16:14:38

The .navigationBarTitle should be inside NavigationView

struct RedView: View {
    var body: some View {
        NavigationView {
            List {
                Text("test")
            }
            .navigationBarTitle("Home")     // << here !!
        }
    }
}

SwiftUI TabView + NavigationView navbar doesn't show up

1 Answers