SwiftUI disappear back button with navigationLink

Question

I have 3 views. One of these have NavigationView second have NavigationLink and last just a child with toolbar.

So my problem when I added toolbar in last view backButton elegant disappear. How can I solve this?

Screen recording of my problem

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, world!")
                    .padding()
                NavigationLink(destination: ListView()) {
                    
                    Image(systemName: "trash")
                        .font(.largeTitle)
                        .foregroundColor(.red)
                }
            }.navigationBarHidden(true)
            .navigationTitle("Image")
        }
    }
}

---

import SwiftUI

struct ListView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    var body: some View {
        VStack {
            List {
                NavigationLink(destination: DetailView()) {
                    Text("Detail")
                }
            }
            
        }.navigationBarTitle(Text("Data"), displayMode: .large)
        .toolbar {
            Button("Save") {
                presentationMode.wrappedValue.dismiss()
            }
        }
    }
}

---

import SwiftUI

struct DetailView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    var body: some View {
        
        VStack {
            Text("DetailView")
                .padding()
        }.navigationBarTitle(Text("Data"), displayMode: .large)
        .toolbar {
            Button("Save") {
                presentationMode.wrappedValue.dismiss()
            }
        }
    }
}

Answer 1

I don't know why, but it's what worked for me:

.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) { 
        Button {  } label: { } // button to the right
    }
    ToolbarItem(placement: .navigationBarLeading) { 
      Text("") // empty text in left to prevent back button to disappear
    } 
}

I already tried to replace the empty text with EmptyView() but the button keeps disappearing.

FYI: I have this problem only on my device with iOS 14, but in another device with iOS 15 the back button never disappears.

Answer 2

In the console, you'll notice this message:

2021-04-27 12:37:36.862733-0700 MyApp[12739:255441] [Assert] displayModeButtonItem is internally managed and not exposed for DoubleColumn style. Returning an empty, disconnected UIBarButtonItem to fulfill the non-null contract.

The default style for NavigationView is usually DefaultNavigationViewStyle, which is really just DoubleColumnNavigationViewStyle. Use StackNavigationViewStyle instead, and it works as expected.

Edit: You are right that StackNavigationViewStyle will break iPad split view. But thankfully, DoubleColumnNavigationViewStyle works fine in iPad and doesn't hide the back button. We can then just use a different NavigationStyle depending on the device, as shown in this answer.

struct ResponsiveNavigationStyle: ViewModifier {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass

    @ViewBuilder
    func body(content: Content) -> some View {
        if horizontalSizeClass == .compact { /// iPhone
            content.navigationViewStyle(StackNavigationViewStyle())
        } else { /// iPad or larger iPhone in landscape
            content.navigationViewStyle(DoubleColumnNavigationViewStyle())
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, world!")
                    .padding()
                NavigationLink(destination: ListView()) {
                    
                    Image(systemName: "trash")
                        .font(.largeTitle)
                        .foregroundColor(.red)
                }
            }
            .navigationBarHidden(true)
            .navigationTitle("Image")
        }
        .modifier(ResponsiveNavigationStyle()) /// here!
    }
}

Result:

iPad	iPhone