Button in ToolbarItem is not completely tapable on iOS 26

Question

Created 1w

Replies 3

Boosts 1

Participants 2

I have an icon button in toolbar but only the icon is triggering tap events while outside icon button gives tap feedback but event is not firing.

Code:

ToolbarItem(placement: .navigationBarTrailing) {
        Button(action: toggleBookmark) {
          Image(systemName: isBookmarked ? "bookmark.fill" : "bookmark")
            .resizable()
            .aspectRatio(0.8, contentMode: .fit)
            .frame(width: 20, height: 20)

        }
}

Here toggleBookmark function is only called if I click on Image but not if I click outside image but on the circular button that appears on iOS 26.

See this screen recording.

Boost

Answer 1

thisisjaymehta OP

6d

I hope this is not by design as it is very bad user experience.

0

Answer 2

thisisjaymehta OP

1d

Can someone from apple check this?

0

Answer 3

DTS Engineer OP

Apple

1d

Thank you for sharing the post and the partial code. I suggest posting the code starting from the Toolbar instead of providing only a ToolbarItem. Hope other SwiftUI gurus here can jump into this thread as my SwiftUI skills are not as good as others for sure!!

Looking at your item it seems like you are setting the frame to 20x20? I think by default in SwiftUI only registers taps within the bounds of its content. Taps on the surrounding padding or button area are ignored. To ensure taps anywhere within the trigger the action, we can use a to expand the tappable area, see your frame? The modifier ensures that taps anywhere within the defined shape are recognized.

// Removing the Toolbar too :-)
ToolbarItem(placement: .navigationBarTrailing) {
// guessing on toggleBookmark :-)
    Button(action: toggleBookmark) {
        ZStack {
           
            Circle()
                .foregroundColor(.clear)  
                .frame(width: 54, height: 54)  // Adjust size as needed
            Image(systemName: isBookmarked ? "bookmark.fill" : "bookmark")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 20, height: 20)
        }
    }
    // Ensure the entire button area responds to taps
    .contentShape(Circle())
}

May I ask you to provide the whole code from

struct ContentView: View {
    var body: some View {

As we can then copy and paste into Xcode to actually compile instead of getting the red marks Xcode likes to give me all the time for me.

Looking forward to your complete code!

Albert Pascual   Worldwide Developer Relations.

0