Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 569
Alexandre Avatar asked Aug 02 '26 16:08

Alexandre


1 Answers

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

like image 123
Asperi Avatar answered Aug 05 '26 06:08

Asperi



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!