Why doesn't the navigation title show up using SwiftUI?

Question

I am learning SwiftUI using Apple's official tutorial: https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

Everything works perfectly until I try to show a navigation title on a NavigationView by calling .navigationBarTitle.

I have tried to refresh the live view, restart Xcode, but it still doesn't show up.

Here is my code:

import SwiftUI

struct LandmarkList : View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                LandmarkRow(landmark: landmark)
            }
        }
        .navigationBarItem(title: Text("Done"))
        .navigationBarTitle(Text("Landmarks"))
    }
}

#if DEBUG
struct LandmarkList_Previews : PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}
#endif

Xcode looks like this:

Screenshot

According to the tutorial, it should show the navigation title but it doesn't in my case.

Any idea why? Thanks!

Screenshot link was not working – Nizzam Jun 19 '19 at 01:43 — Nizzam, Jun 19 '19 at 01:43
@Nizzam I think it works now, plz try again. – Yiming Dong Jun 19 '19 at 02:21 — Yiming Dong, Jun 19 '19 at 02:21

vacawama · Accepted Answer · 2019-06-19T02:09:13.413

271

.navigationBarTitle() and .navigationBarItem() are modifiers on the View inside of the NavigationView, not on the NavigationView itself:

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                LandmarkRow(landmark: landmark)
            }
            .navigationBarItem(title: Text("Done"))
            .navigationBarTitle(Text("Landmarks"))
        }
    }
}

and if you think about it, this makes sense. As the View within the NavigationView changes, the new View dictates what the title and contents of the navigation bar should be.

edited Jun 19 '19 at 02:09

answered Jun 19 '19 at 01:46

vacawama

150,663
30
266
294

4

And so is NavigationBarItem, if it comes to that. – matt Jun 19 '19 at 02:06
Thanks @matt, I added that to the answer. – vacawama Jun 19 '19 at 02:11
2

At first I was arguing with my screen, until I re-thought about what you said "the new View dictates what the title and contents of the navigation bar should be" ... and bingo! – bitsand Jan 16 '20 at 21:40
1

Thought there was something wrong with xcode or swift, until I moved the code inside the NavigationView and it worked perfectly – pizzae May 11 '20 at 12:31
Thanks for the short and clear explanation. – Kelderth Aug 10 '21 at 16:37

Mojtaba Hosseini · Answer 2 · 2023-04-13T22:00:45.637

Description:

NavigationView is just a container around some content. Contents are changing when you navigating from page to page, but the NavigationView persists.

The point is that NavigationView shows each view's content when it shows it. So it will encapsulate with the destination.

Finally, you should add all navigation modifiers inside the navigation (on the content)

⚠️ From iOS 14+ you should use ToolbarItem instead of navigationBarItem like below

Example:

struct Content: View {
    var body: some View {
        Text("Some. content")

            // iOS 14+
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) { Text("Done") }
            }

            // iOS 13-16.4(deprecated) - You can use toolbar now
            // .navigationBarItems(trailing: Text("Done"))

            .navigationBarTitle(Text("Landmarks"))
    }
}

struct Parent: View {
    var body: some View {
        NavigationView {
            Content() // This contains navigation modifiers inside the view itself
        }
    }
}

The popular answer "says" the same thing, but this answer "shows" it. Now it is clear to me. — mobibob, Mar 28 '21 at 00:32

score 3 · Answer 3 · answered Jun 25 '22 at 13:42

If someone is looking for navigation title with tab button, this code may be helpful -

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("SwiftUI")
                .navigationTitle("Screen Title")
                .toolbar {
                    Button("Right") {
                        print("Right button tapped!")
                    }
                }
        }
    }
}

score 0 · Answer 4 · answered Mar 17 '23 at 09:27

If you are arriving here and using NavigationStack (in fact NavigationView has a warning for future deprecation since iOS 16), just put the .navigationTitle("My title") modifier on the content of the NavigationStack, not on the NavigationStack itself.

e.g.

var body: some View {
    NavigationStack(path: $path) {
        List {
            [...]
        }
        .navigationTitle("My title")  //    <<-- !! Modifier goes here !!
    }
}

score 0 · Answer 5 · answered Mar 21 '23 at 15:34

0

.modifier(NavigationView()) had to be added AFTER .navigationBar* modifiers, not before

answered Mar 21 '23 at 15:34

Anton Tropashko

5,486
5
41
66

Why doesn't the navigation title show up using SwiftUI?

5 Answers5

Description:

Example: