swift - Is there still no simple way to customize the Back-button in the NavigationBar in SwiftUI?

Question

You can now use the .toolbar-modifier to set the NavigationBar principal content as you please:

.toolbar {
    ToolbarItem(placement: .principal) {
        Text("Custom Title")
            .font(.title)
    }
}

Is there an equally simple way to customize the Back-button (text and/or whole button) that does not involve hiding the default button and creating your own, which then also requires recreating the correct functionality (ie. actually going back and enabling swipe to go back)?

question from:https://stackoverflow.com/questions/65859441/is-there-still-no-simple-way-to-customize-the-back-button-in-the-navigationbar-i

Answer 1

Use UIButton().

struct ToolbarButton: UIViewRepresentable {

    private let sfSymbolName: String
    
    private let titleColor: UIColor
    
    private let action: () -> ()
    
    internal init(sfSymbolName: String, titleColor: UIColor, action: @escaping () -> ()) {
        self.sfSymbolName = sfSymbolName
        self.titleColor = titleColor
        self.action = action
    }

    
    func makeUIView(context: Context) -> UIButton {
        let button = UIButton()
        let largeConfig = UIImage.SymbolConfiguration(scale: .large)


        // Use custom icon instead of system icons.

        let image = UIImage(systemName: sfSymbolName, withConfiguration: largeConfig)
        button.setImage(image, for: .normal)
        button.tintColor = titleColor
        button.contentEdgeInsets = UIEdgeInsets(top: 4, left: 4, bottom: 4, right: 4)
        button.addTarget(context.coordinator, action: #selector(context.coordinator.didTapButton(_:)), for: .touchUpInside)
        return button
    }
    
    func updateUIView(_ uiView: UIButton, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        return Coordinator(action: action)
    }
    
    
    class Coordinator {
        private let action: () -> ()
        
        init(action: @escaping () -> ()) {
            self.action = action
        }
        
        @objc
        func didTapButton(_ sender: UIButton) {
            self.action()
        }
    }
}

---

struct CloseButton: View {
    var onClose: () -> ()
    var spacing: CGFloat

    init(spacing: CGFloat = 2, onClose: @escaping () -> ()) {
        self.spacing = spacing
        self.onClose = onClose
    }
    
    var body: some View {
        ToolbarButton(sfSymbolName: "plus", titleColor: UIColor(Color.accentColor), action: self.onClose)
            .rotationEffect(.degrees(45), anchor: .center)
            .padding(2)
            .background(Circle().fill(Color.systemGray2))
            .padding(2)
            .animation(.easeOut)
    }
}