SwiftUI Show navigation bar title on the back button but not in the previous View

Question

I have two views, one leads to the other. I want that the second view uses the title of the first view for the back button, which should then be: "<View1". I don't want to show the title in the first view.

Problem: I can't hide navigation bar because it will also hide a custom button which is within it. Setting .navigationTitle("") hides the title in the first view, but also hides it from the back button in the second view.

What I have now:

What I would like to have:

Code:

struct ContentView: View {
    @State var isLinkActive = false
    
    var body: some View {
        NavigationView {
            VStack {
            NavigationLink("go to the second view", destination: SecondView(), isActive: $isLinkActive).navigationTitle("View1")
                .navigationBarItems(leading: Button(action: {
                    ()
                }, label: {
                    Text("custom button")
                }))
            }
        }.navigationViewStyle(StackNavigationViewStyle())
        
    }
    
    private func btnPressed() {
        isLinkActive = true
    }
}

struct SecondView: View {
    var body: some View {
        Color.blue
    }
}

Does this answer your question https://stackoverflow.com/a/60996978/12299030? — Asperi, May 17 '21 at 11:02
@Asperi but this hides the navigation bar so my custom button (which is a navigationBarItem) will not be visible then ? I need to show this custom button — hbr4u7vb2sljksdf2, May 17 '21 at 11:06

score 1 · Answer 1 · answered May 17 '21 at 11:28

You need to create custom back button for destination view as well,and you shouldn’t set navigation title for navigationLink, that’s why you are not able to hide “View1” correctly.

Check below code.

import SwiftUI

struct Test: View {
    @State var isLinkActive = false
    
    
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink("go to the second view", destination: SecondView()
                                .navigationBarBackButtonHidden(true)
                                .navigationBarItems(leading: Button(action: {
                                    isLinkActive = false
                                }, label: {
                                    HStack{
                                        Image(systemName: "backward.frame.fill")
                                        Text("View1")
                                    }
                                })) ,
                               isActive: $isLinkActive)
                
            }.navigationBarItems(leading: Button(action: {
                ()
            }, label: {
                Text("custom button")
            }))
        }.navigationViewStyle(StackNavigationViewStyle())
        
        
    }
    
    private func btnPressed() {
        isLinkActive = true
    }
}

struct SecondView: View {

    var body: some View {
        Color.blue
    }
}

You can try and make navigationBar code as reusable component, because you might need to do this at multiple places.

Output-:

I like this approach but unfortunately it does not result in having the system icon so it will not be consistent with the rest of my app. I would probably have to search for the correct asset and the right font for the text which already makes it more like a workaround than the actual solution — hbr4u7vb2sljksdf2, May 17 '21 at 12:18

score 0 · Answer 2 · answered Nov 10 '22 at 18:51

I achieved this by using two modifiers on my main view. Similar to your case, I didn't want a title on the first view, but I wanted the back button on the pushed view to read < Home, not < Back.

.navigationTitle("Home")
.toolbar {
    ToolbarItem(placement: .principal) {
        Text("")
    }
}

SwiftUI Show navigation bar title on the back button but not in the previous View

2 Answers2