Navigation title not appearing correctly in SwiftUI

Question

DanDudeDev OP

Created Oct ’21

Replies 2

Boosts 0

Views 4.6k

Participants 3

Hi all.

I have a navigation title attached to my VStack, however it isn't appearing near the top of the screen like it's supposed to.

Here's 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)
    }

Here is an image:

Screenshot 2021-10-29 at 14.21.04.png

Boost

Answer 1

OOPer OP

Oct ’21

That depends on the global view hierarchy of your app. Often found in apps having nested NavigationView. Can you show the complete code to reproduce the issue? From the root view of your app to the view showing the screen shot.

0

Answer 2

mylogon OP

Jan ’22

Just to expand on @OOPer's comment and spell it out for simple-folk such as myself who are fairly new to SwiftUI - You don't need to "nest" a NavigationView. By that it means (including pseudo-code)

View A -> View B

 View A
 
var body: some View {
  NavigationView(
    .. stuff here
    .navigationBarTitle("Main menu")
  )
}

 View B
 
var body: some View {
 Text("Stuff to show on the next page")
 .navigationBarTitle("sub menu", displayMode: .inline)
}

Seems kind of obvious when you think about it, coming from UIKit, you wouldn't be able to push a UINavigationController into the navigation stack.

0

	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)
	}

	View A

	var body: some View {
	NavigationView(
	.. stuff here
	.navigationBarTitle("Main menu")
	)
	}

	View B

	var body: some View {
	Text("Stuff to show on the next page")
	.navigationBarTitle("sub menu", displayMode: .inline)
	}