Search code examples
iosswiftswiftuiios13navigationview

SwiftUI navigationBarBackButtonHidden not working as expected


I'm having an issue with the navigationBarBackButtonHidden modifier. It doesn't hide the navigation back button...

Here's the source code for the list:

import SwiftUI

struct ContentView: View {
    @State var showSheet = false

    var body: some View {
        NavigationView {
            List(chatsData, id: \.self.id) { chat in
                NavigationLink(destination: ChatView(chat: chat)) {
                    ChatRow(chat: chat)
                }
            }
            .navigationBarTitle("Chats")
        }
    }
}

Here's a preview: enter image description here

Here's the code for the view I wish to hide the "default" back button:

import SwiftUI

struct ChatView: View {
    var chat: Chat
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    @State var name: String = "Some text"

    fileprivate var backButton: some View {
        Button(action: {
            self.presentationMode.wrappedValue.dismiss()
        }, label: {
            Image(systemName: "chevron.left")
        })
    }

    var body: some View {
        NavigationView {
            VStack(alignment: .leading, spacing: 0) {
                Spacer()

                TextField("Name's placeholder", text: $name)
                    .clipShape(Rectangle())
                    .overlay(Rectangle().stroke(Color("lightgray"), lineWidth: 2))
                    .lineLimit(5)
            }
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(leading: backButton)
            .navigationBarTitle("\(chat.id)", displayMode: .inline)
        }
    }
}

However, when clicking on a list item from the 1st screenshot, here's what I get: enter image description here

The "< Chats" back button is still there.

I've managed to hide it by updating the code of the List to:

NavigationLink(destination: ChatView(chat: chat).navigationBarBackButtonHidden(true)) {
    ChatRow(chat: chat)
}

However there's still a huge gap between the top and the title of the next view:

enter image description here


Solution

  • There should be only one NavigationView on one navigation stack, so

    struct ChatView: View {
        ...
        var body: some View {
            NavigationView { // << NavigationView not needed here !!!
    

    remove marked navigation view and should work.

    Tested with Xcode 11.2, iOS 13.2