Remove back button text from navigationbar in SwiftUI

Question

I've recently started working in SwiftUI, came to the conclusion that working with navigation isn't really great yet. What I'm trying to achieve is the following. I finally managed to get rid of the translucent background without making the application crash, but now I ran into the next issue. How can I get rid of the "back" text inside the navbaritem?

I achieved the view above by setting the default appearance in the SceneDelegate.swift file like this.

let newNavAppearance = UINavigationBarAppearance()
newNavAppearance.configureWithTransparentBackground()
newNavAppearance.setBackIndicatorImage(UIImage(named: "backButton"), transitionMaskImage: UIImage(named: "backButton"))
newNavAppearance.titleTextAttributes = [
    .font: UIFont(name: GTWalsheim.bold.name, size: 18)!,
    .backgroundColor: UIColor.white

]

UINavigationBar.appearance().standardAppearance = newNavAppearance

One possible way that I could achieve this is by overriding the navigation bar items, however this has one downside (SwiftUI Custom Back Button Text for NavigationView) as the creator of this issue already said, the back gesture stops working after you override the navigation bar items. With that I'm also wondering how I could set the foregroundColor of the back button. It now has the default blue color, however I'd like to overwrite this with another color.

Solution 1

So I actually ended up with the following solution that actually works. I am overwriting the navigation bar items like so

.navigationBarItems(leading:
    Image("backButton")
        .foregroundColor(.blue)
        .onTapGesture {
            self.presentationMode.wrappedValue.dismiss()
    }
)

The only issue with this was that the back gesture wasn't working so that was solved by actually extending the UINavigationController

extension UINavigationController: UIGestureRecognizerDelegate {
    override open func viewDidLoad() {
        super.viewDidLoad()
        interactivePopGestureRecognizer?.delegate = self
    }

    public func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
        return viewControllers.count > 1
    }
}

Now it's looking exactly the way I want it, the solution is kinda hacky... but it works for now, hopefully SwiftUI will mature a little bit so this can be done easier.

Solution 2

Piggy-backing on the solution @Pitchbloas offered, this method just involves setting the backButtonDisplayMode property to .minimal:

extension UINavigationController {

  open override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    navigationBar.topItem?.backButtonDisplayMode = .minimal
  }

}

Solution 3

It's actually really easy. The following solution is the fastest and cleanest i made.

Put this at the bottom of your SceneDelegate for example.

extension UINavigationController {
    // Remove back button text 
    open override func viewWillLayoutSubviews() {
        navigationBar.topItem?.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
    }
}

This will remove the back button text from every NavigationView (UINavigationController) in your app.

Solution 4

I have found a straightforward approach to remove the back button text using SwiftUI only, and keeping the original chevron.

A drag gesture is added to mimic the classic navigation back button when user wants to go back by swiping right.

import SwiftUI

struct ContentView: View {

  @Environment(\.presentationMode) var presentation

  var body: some View {
    ZStack {
      // Your main view code here with a ZStack to have the
      // gesture on all the view.
    }
    .navigationBarBackButtonHidden(true)
    .navigationBarItems(
      leading: Button(action: { presentation.wrappedValue.dismiss() }) {
        Image(systemName: "chevron.left")
          .foregroundColor(.blue)
          .imageScale(.large) })
    .contentShape(Rectangle()) // Start of the gesture to dismiss the navigation
    .gesture(
      DragGesture(coordinateSpace: .local)
        .onEnded { value in
          if value.translation.width > .zero
              && value.translation.height > -30
              && value.translation.height < 30 {
            presentation.wrappedValue.dismiss()
          }
        }
    )
  }
}

Solution 5

Standard Back button title is taken from navigation bar title of previous screen.

It is possible the following approach to get needed effect:

struct TestBackButtonTitle: View {
    @State private var hasTitle = true
    var body: some View {
        NavigationView {
            NavigationLink("Go", destination:
                Text("Details")
                    .onAppear {
                        self.hasTitle = false
                    }
                    .onDisappear {
                        self.hasTitle = true
                    }
            )
            .navigationBarTitle(self.hasTitle ? "Master" : "")
        }
    }
}

View more solutions

Comments

[Jordy]

Alright yes this is a possible solution, but it's really nasty, if I'd have to do that on EVERY screen it would be kind of annoying and hacky. I'm looking for a way to globally disable this text.

[Prafulla]

Does't this give you duplicate navigation and back button on swipe back ? for me it was the case. So I ended up increasing navigation title width using toolbar.

[eagerMoose]

Thanks! I've been looking for a simple solution like this one for days.

[Pitchbloas]

I didnt know about 'backButtonDisplayMode', thanks!

[LordParsley]

This is a great option! Just a note to others that it requires iOS 14+.

[Devo]

This should be the accepted answer.

[D. Greg]

Found this to be a good solution, but should call super.viewWillLayoutSubviews() prior to setting the button display mode

[tdl]

On iOS 15.2 this (the second fix using the $isActive binding) works to disable the back button text but it causes a random item to be selected on navigation and the debug console shows the error "SwiftUI encountered an issue when pushing aNavigationLink. Please file a bug."

[Alex Hartford]

This is awesome! I will mention that presentation.wrappedValue.dismiss has been a headache in a project, sometimes causing app crashes in specific instances.

[Daniel]

This will change the behaviour of every back button in your app. If that is what you want, this is a great and simple solution, otherwise look at the other answers...