Hard to tap button in SwiftUI navigation bar items

Question

I have a SwiftUI NavigationView with a Button as leading navigation bar item. It seems the button action is fired only when user taps inside that little Image . Can I make the tappable area bigger, without affecting the height of the navigation bar?

I tried adding .frame to the Image , but that made the navigation bar too big.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Foo")
                .navigationBarTitle(Text("Title"), displayMode: .inline)
                .navigationBarItems(leading:
                    HStack {
                        Button(action: {
                            print("tapped")
                        }) {
                            Image(systemName: "info.circle")
                        }
                    })
            }
    }
}

Answer 1

(One of) the following modifiers could help:

.imageScale(.large)

A image from SFSymbols has three sizes:

• .small for when using inline with text
• .medium for use as an icon
• .large for use as a button in a nav bar or bottom bar

---

.padding()

Adds padding around the image. The padding should also be tappable.

Answer 2

Try this out

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Foo")
                .navigationBarTitle(Text("Title"), displayMode: .inline)
                .navigationBarItems(leading:
                    HStack {
                        Button(action: {
                            print("tapped")
                        }) {
                            Image(systemName: "info.circle").imageScale(.large) //Here is the change in image scale property
                        }
                    })
            }
    }
}

Happy Coding...