How to wrap a UIBarButtonItem in a SwiftUI View?

Question

I'm trying to make a custom back button for the NavigationBar where I can put whatever text I like. My primary use case is that some of my views have no title, and when I click to a new view from that, the new view's back button in the navigation bar has no text, and only an arrow. It makes it hard for the user to tap this. I'm looking to set a custom back button that has the text "Back", but also has the back button icon, and works flawlessly with SwiftUI's animation mechanism.

This is my current attempt to wrap a UIKit element in a View, so that I can use it with SwiftUI:

struct CustomBackButton: UIViewControllerRepresentable {
    typealias UIViewControllerType = ViewController


    @Binding var title: String

    func makeUIView(context: Context) -> UIBarButtonItem {
        return UIBarButtonItem()
    }

    func updateUIView(_ uiView: UIBarButtonItem, context: Context) {
        uiView.title = title
    }
}

It's obviously not working and I'm currently unsure how to actually make it work.

My ideal scenario would be that CustomBackButton would work such that I can use it within SwiftUI like this:

    var body: some View {
        NavigationView {
            Text("Page with no title")
                .navigationBarItems(leading: CustomBackButton(title: "Back"))
                .navigationBarTitle("", displayMode: .large)
        }
    }

What do I have to do to properly wrap CustomBackButton into a SwiftUI View?

`UIBarButtonItem` is neither UIView nor UIViewController, so you cannot wrap it into representable. Would you elaborate on what are going to achieve here? And why you don't want to use native SwftUI views for .navigationBarItems as all of us do? — Asperi, May 21 '20 at 16:43
@Asperi I tried using a custom leading navigationBarItem but it doesn't play nicely with SwiftUI's built in animations. I made the custom button look like it was the native one, but it wouldn't behave nor animate like one — pizzae, May 22 '20 at 02:39

score 0 · Answer 1 · answered May 21 '20 at 17:03

If you're just trying to have custom text, then no need to bother with UIKit. Here's how you can make a custom back button in SwiftUI:

struct ViewWithCustomBackButton: View {
    @Environment(\.presentationMode) var presentationMode

    var body: some View {
        HStack {
            ...
        }
        .navigationBarTitle(Text("Your View"), displayMode: .inline)
        // Hide the system back button
        .navigationBarBackButtonHidden(true)
        // Add your custom back button here
        .navigationBarItems(leading:
            Button(action: {
                self.presentationMode.wrappedValue.dismiss()
            }) {
                HStack {
                    Image(systemName: "arrow.left.circle")
                    Text("Go Back")
                }
        })
    }
}

You can also check out the answers here for more info: Custom back button for NavigationView's navigation bar in SwiftUI

Unfortunately I've already tried this approach and it doesn't play well nicely with SwiftUI's built in animations. The previous view's title just pans to the left, and the leading custom back button just pops in abruptly instead of how it would animate naturally if no custom leading button was used — pizzae, May 22 '20 at 02:46

How to wrap a UIBarButtonItem in a SwiftUI View?

1 Answers1