Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwiftUI Navigation Bar Title

Tags:

ios

swift

swiftui

I'm making my very first steps into SwiftUI following HackingWithSwift course. I have a problem trying to implement navigation bar in my app. For some reason the title does not show up.

Here's the code I'm using:

struct ContentView: View {
    var body: some View {
        NavigationView {
            Form {
                ...
            }
        }
        .navigationBarTitle(Text("WeSplit"))
    }
}

Once running it in simulator or on my target device I see free space for the navigation bar title but no text there.

I've also tried typing .navigationBarTitle("WeSplit") with no Text() in there. Result's still the same.

Do you have any ideas on how to fix it? Thank you in advance!

I'm running Xcode Version 12.3.

like image 879
Philipp Lazarev Avatar asked Dec 24 '20 09:12

Philipp Lazarev


People also ask

How do I add a navigation bar title in SwiftUI?

Use navigationBarTitle(_:) to set the title of the navigation bar. This modifier only takes effect when this view is inside of and visible within a NavigationView .

How do I customize my navigation bar in SwiftUI?

To change a navigation bar color in SwiftUI, you apply toolbarBackground modifier to the content view of NavigationStack . NavigationView is deprecated in iOS 16. toolbarBackground accepts two parameters. ShapeStyle : The style to display as the background of the bar.

How do I use the navigation bar in SwiftUI?

To show a Navigation Bar using SwiftUI, we should use the NavigationView component that is responsible for this purpose. It requires that we provide the Content that is a View type. The Content can be anything from a text field to scrollable content. In short, it can be any SwiftUI view.

What is the navigation title?

The navigation title is the label that shows in your site's left-hand navigation menu (and the drop-down navigation, if applicable).


1 Answers

It should be inside NavigationView, like

struct ContentView: View {
    var body: some View {
        NavigationView {
            Form {
                ...
            }
            .navigationBarTitle(Text("WeSplit"))     // << here !!
        }
    }
}
like image 104
Asperi Avatar answered Oct 02 '22 15:10

Asperi