How can I change the back button image in the navigation bar for iOS 13?

Question

On the right, the first time and on the left, all the other times

Hello Guys,

I’m new so I hope that’s the way things goes around here !

Like y’all know, iOS 13 introduced UI changes. We have an app in production and I recently woke up (maybe a little too late haha) and as I compiled and launch it on a freshly updated iOS 13 device, that’s when I became aware there was some work to do ! 

I handled the dark mode by not enabling it, I handled my modals but there is one thing I can’t seem to make like iOS 12 and it’s my Navigation Bar UI.

We use a custom back button image and after fighting during several hours, I finally succeeded but it’s ok everytime except the first time. I will always have the default icon the first time, and then when I come back to the same controller, it’s okay.

Here is a photo (at the beginning of the question) so you can understand and also my code !
 I know it’s possible to use Appearance for specific VC with « whenContained » but I can’t seem to figure it out cause it’s all in navigation controller and I don’t know how to differentiate them.

fileprivate func navigationBarWithBackgroundColor(_ backgroundColor: UIColor, TintColor tintColor: UIColor, displayBackButtonIfNeeded: Bool, BackImage imageName:String, displayShadowBar: Bool = false) {

        let backButtonImage = UIImage(named: imageName)

        if #available(iOS 13.0, *) {

            let appearance = UINavigationBarAppearance()
            appearance.backgroundColor = backgroundColor

            appearance.titleTextAttributes = [.foregroundColor: tintColor]
            appearance.setBackIndicatorImage(backButtonImage, transitionMaskImage: backButtonImage)
            appearance.shadowImage = displayShadowBar ? UIImage(named:"") : UIImage()

            let back = UIBarButtonItemAppearance()
            // hide back button text
            back.normal.titleTextAttributes = [.foregroundColor: UIColor.clear]
            appearance.backButtonAppearance = back

            navigationController?.navigationBar.tintColor = tintColor
            navigationController?.navigationBar.standardAppearance = appearance
            navigationController?.navigationBar.compactAppearance = appearance
            navigationController?.navigationBar.scrollEdgeAppearance = appearance

        } else {
            if displayBackButtonIfNeeded {
                self.navigationController?.navigationBar.backIndicatorImage = backButtonImage
                self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = backButtonImage
                self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: UIBarButtonItem.Style.plain, target: nil, action: nil)

            } else {
                self.navigationItem.setHidesBackButton(true, animated: false)
            }

            self.navigationController?.navigationBar.barTintColor = backgroundColor
            self.navigationController?.navigationBar.tintColor = tintColor
            self.navigationController?.navigationBar.setBackgroundImage(UIImage(named:""), for: UIBarMetrics.default)
            self.navigationController?.navigationBar.shadowImage = displayShadowBar ? UIImage(named:"") : UIImage()
        }
    }

I’m basically become crazy here and I assume I’m missing something very obvious so if you guys have any hints or clues except apple documentation, feel free to share :)


Thanks in advance !

Answer 1

In iOS 13 you can set up back button image and transition mask image only by the function

func setBackIndicatorImage(UIImage?, transitionMaskImage: UIImage?)

And here is an example

standartAppearence.setBackIndicatorImage(#imageLiteral(resourceName: "backButton"), transitionMaskImage: #imageLiteral(resourceName: "backButton"))