NavigationBar item to edge of screen

Question

Issue

Adding a custom nav button limits touchable area of the button, reducing ux by making it harder to press. I want there to be some space to the left of my chevron but it won't extend into the leading margin. I also don't want to add padding so the chevron is more to the right.

In more detail of what I've tried...

Built-in Back Button

• goes to the edge of the screen
• has text (don't want)

Custom back button via toolbar item

have set the background gray to highlight touch area

• doesn't go to the edge of the screen
• reduces touch area, so sometimes miss when pressing the button to far left

    .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                AppBackButton(action: {
                    self.dismiss()
                })
                .background(.gray)
            }
        }

Custom back button via toolbar item with negative padding

• looks like it goes to the edge
• still wont pick up touch events outside the leading safe zone

    .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                AppBackButton(action: {
                    self.dismiss()
                })
                .background(.gray)
                .padding(.leading, -16)
            }
        }

I don't just want to remove the text. Ideally i want to have all the buttons image come up to the border but the touchable area extends into the margins, like the default back button. How can i achieve this?

Answer 1

I was able to reproduce your issue.

It is a bit surprising, that it is not possible to create a ToolbarItem with the same area of sensitivity as a native back button.

As a workaround, you can use an overlay instead:

struct Subview: View {

    @Environment(\.dismiss) private var dismiss

    var body: some View {
        VStack {
            Text("Subview")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .navigationBarBackButtonHidden()
        .overlay(alignment: .topLeading) {
            AppBackButton(action: {
                self.dismiss()
            })
            .background { Color.gray }
        }
//        .toolbar {
//            ToolbarItem(placement: .navigationBarLeading) {
//                AppBackButton(action: {
//                    self.dismiss()
//                })
//                .background(.gray)
//            }
//        }
    }
}