Swiftui button press does not always work

Question

When I press the button "Get New Connection Pin" it does not always print to console. Let's like I have to press the button a few times before it will print to console or for me to see the button visibly being pressed.

swiftui:

import SwiftUI

struct JokeView: View {
    @State private var jokeString = "No Joke Available"
    @State private var fetching = false
    
    var body: some View {
        VStack(spacing: 20) {
            VStack(alignment: .leading, spacing: 10) {
                Text("Connection Pin:")
                    .font(.headline)
                    .foregroundColor(.gray)
                
                Button(action: {
                    print("Copy Connection Pin to clipboard")
                }) {
                    Text("3kus-32dak")
                        .fontWeight(.semibold)
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
                .cornerRadius(8)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(8)
            
            Button(action: {
                print("Requesting a new connection pin")
            }) {
                Text("Get New Connection Pin")
            }
            .frame(maxWidth: .infinity, minHeight: 40)
            .buttonStyle(PlainButtonStyle())
            .background(Color.blue)
            .cornerRadius(4)
            .contentShape(Rectangle()) // Make the entire button tappable
            
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
    }
}

struct JokeView_Previews: PreviewProvider {
    static var previews: some View {
        JokeView()
            .frame(width: 225, height: 225)
            .background(Color.white.opacity(0.1))
    }
}

shim · Accepted Answer · 2023-06-13T04:59:37.453

Running your code, seems that .contentShape(Rectangle()) // Make the entire button tappable is not actually accomplishing what you want it to accomplish and the text is still the only tappable portion of the button.

Fix is to apply your sizing transformations on the Text inside the Button Label instead of to the button.

For example (you could do it in a few ways):

Button(action: {
    print("Requesting a new connection pin")
}) {
    Text("Get New Connection Pin")
        .frame(maxWidth: .infinity, minHeight: 40)
        .background(Color.blue)
        .cornerRadius(4)
        .contentShape(Rectangle()) // Make the entire button tappable
}
.buttonStyle(PlainButtonStyle())

More in here: SwiftUI Button tap only on text portion

This blog post has a pretty good explanation too.

However, the following would be much simpler to accomplish more or less the same thing, plus you let the OS choose the sizes / colours somewhat (though it's only available in iOS 15+):

Button("Get New Connection Pin", action: {
    print("Requesting a new connection pin")
})
.tint(.blue)
.controlSize(.large)
.buttonStyle(.borderedProminent)

Swiftui button press does not always work

1 Answers1