Navigation title not appearing correctly in SwiftUI

Question

I have a VStack wrapped around a NavigationView. I made a NavigationTitle by adding the modifier to VStack. However, my title is not appearing near the top of the screen as it should.

Here is my code:

  NavigationView{
        VStack{
            Image(club.image)
                .resizable()
                .scaledToFit()
                .frame(height: 300)
            Text(club.name)
                .font(.system(size: 40, weight: .black))
            HStack(alignment: .center, spacing: 20){
                Label(title: {
                    Text(club.league)
                        .foregroundColor(.secondary)
                }, icon: {
                    Image(systemName: "location.north.circle.fill")
                        .foregroundColor(.blue)
                })
                Label(title: {
                    Text(club.netWorth)
                        .foregroundColor(.secondary)
                }, icon: {
                    Image(systemName: "dollarsign.circle.fill")
                        .foregroundColor(.blue)
                })
            }
        }.navigationTitle(club.name)
    }

I have tried adding the '.navigationTitle' modifier to the NavigationView as well, but that isn't working.

Here is an image as well: Navigation title image

Does anybody have a solution to this?

Answer 1

As lorem ipsum has mentioned. It's as simple as removing the extra NavigationView. When using a Navigation Link it's assumed that it's within a NavigationView. So you only need to declare it once in the root view. If you wanted additional NavigationLink you'd add it without a NavigationView.

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Chelsea")
                NavigationLink("Second View Link", destination: SecondView())
            }
            .navigationTitle("Chelsea")
        }
    }
}

struct SecondView: View {
    var body: some View {
        VStack {
            Text("Second View")
        }
        .navigationTitle("Second View")
    }
}