120

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!

2
  • Screenshot link was not working
    – Nizzam
    Jun 19, 2019 at 1:43
  • @Nizzam I think it works now, plz try again. Jun 19, 2019 at 2:21

5 Answers 5

274

.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.

2
  • 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, 2020 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, 2020 at 12:31
20

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
        }
    }
}
3
  • 1
    The popular answer "says" the same thing, but this answer "shows" it. Now it is clear to me.
    – mobibob
    Mar 28, 2021 at 0:32
  • Value of type 'Text' has no member 'navigationBarItem'
    – Raja Saad
    Apr 13 at 19:12
  • @RajaSaad updated for current iOS Apr 13 at 22:01
3

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!")
                    }
                }
        }
    }
}
0

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 !!
    }
}
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.