CODEWITHSUNDEEP
iosswiftswiftui
bona912
bona912

Reputation: 639

How to add custom navbar back button in SwiftUI

I have been trying to look up how to add custom navbar back button in SwiftUI but I get this strange behaviour, that the default behaviour still appears before the custom one is shown. does anyone know the proper way to add it?

Here is what I tried.

var body: some View {
        NavigationView {
            ZStack {
               Color.background.edgesIgnoringSafeArea(.all)
               NavigationLink(destination: UserDetailsView()) {
                        Text("Continue")
                            .foregroundColor(.background)
                            .font(.title)
                            .fontWeight(.semibold)
                    }
                    .frame(width: 250, height: 60, alignment: .center)
                    .background(Color.white)
                    .cornerRadius(40)
                    .padding(.top, 50)
            }
            .navigationBarTitle("", displayMode: .automatic)
            .navigationBarHidden(true)
        }
      }

Here when I use the below code to hide back button it doesn't even hide at all.

.navigationBarBackButtonHidden(true)

In details screen 

  var body: some View {
        NavigationView {
            VStack {
                ZStack {
                    Rectangle()
                        .foregroundColor(.clear)
                        .background(gradient)
                        .edgesIgnoringSafeArea(.all)

                    Text("Hello")
                }
            }
            .navigationBarItems(leading: BackButton(presentationMode: presentationMode))
        }
    }

The custom back button looks like this

struct BackButton: View {
    var presentationMode : Binding<PresentationMode>

    var body: some View {
        Button(action: {
            self.presentationMode.wrappedValue.dismiss()
        }) {
            HStack {
                Image(Icon.leftArrow)
                    .aspectRatio(contentMode: .fit)
                    .foregroundColor(.black)
            }
        }
    }
}

Here is the what it looks like enter image description here

Upvotes: 2

Views: 10427

Answers (3)

Bo Frese
Bo Frese

Reputation: 903

Thanks for the hints. It works for me.... BUT after adding a 

.navigationBarItems(leading:  ...

the swipe-to-go-back no longer works. I'm guessing this is a bug in SwiftUI ?

Have anybody found a workaround for this?

Upvotes: 5

Aspid
Aspid

Reputation: 699

this works fine for me

struct SettingsChoiseView: View {
    @Environment(\.presentationMode) var presentationMode
    var body: some View {
        List{
            ....
        }
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(leading:
                    Button(action: goBack) {
                        HStack {
                            Image(systemName: "arrow.left.circle")
                            Text("Select session")
                        }                       
                    }
                ) 
    }
    func goBack(){
        //here I save CoreData context if it changes
        self.presentationMode.wrappedValue.dismiss()
    }
}

Upvotes: 3

Asperi
Asperi

Reputation: 257829

The following configuration works (tested with Xcode 11.2 / iOS 13.2)

var body: some View {
  NavigationView {
      ZStack {
         // ...
         NavigationLink(destination:
                           UserDetailsView()
                               .navigationBarTitle("", displayMode: .inline)
                               .navigationBarHidden(true)
         ) {
                    // ...
           }
      }
      .navigationBarTitle("", displayMode: .inline)
      .navigationBarHidden(true)
      .navigationBarBackButtonHidden(true)
  }
}

Upvotes: 3

Related Questions