SwiftUI - Empty bottom bar after tapping NavigationLink

Question

I have a NavigationView with a toolbar that contains a ToolBarItem with a .bottomBar placement and a search field. This NavigationView contains a ScrollView with content that exceeds the screen's vertical size, which means that the bottom bar has a background, as seen below:

When the user taps the "Root View" text element they navigate to a new view, in this case, just another text displaying "Detail View". The problem, however, is that the bottom toolbar's background remains in the screen instead of vanishing as expected. See the screenshot below:

This behavior is not seen if I remove the search bar or shrink the ScrollView 's height to fit the vertical dimension of the device. I tried googling this issue to see if it was a known bug with a workaround but maybe I'm not searching the right keywords. How can I fix this issue?

Please see the bare minimum to replicate the issue below:

struct BugView: View {
    @State var searchPattern: String = ""
    
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    NavigationLink(destination: Text("Detail View")) {
                        Text("Root View").foregroundColor(Color.blue)
                    }
                    Spacer()
                    Text("Root View Bottom").foregroundColor(Color.blue)
                }.frame(maxWidth: .infinity, minHeight: 1000)
            }
                .searchable(text: self.$searchPattern, prompt: "Search Here")
                .toolbar(content: {
                    ToolbarItem(placement: .bottomBar) {
                        Text("Toolbar text")
                    }
                })
           }
   }
}

Setup:

• XCode Version: 13.4.1
• Simulator: iPhone 13

Answer 1

You can use the.toolbar(.hidden, for: .bottomBar) for the destination view as shown in the code below:

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            NavigationLink {
                Text("Destination View")
            } label: {
                // hiding the toolbar for the destination view 
                Text("Root View").toolbar(.hidden, for: .bottomBar)
            }

        }.toolbar {
            ToolbarItem(placement: .bottomBar) {
                Text("Toolbar Text")
                    .background {
                        Color.gray
                    }
            }
        }
    }
}