SwiftUI round button deforms when clicked

Question

I have created a round button with following code:

struct RoundButton : View {

    var value = "..."

    var body: some View {
        GeometryReader { geometry in
            Button(action: {}) {
                VStack {
                    Text(self.value)
                        .font(.headline)
                        .color(Color("NightlyDark"))
                    Text("MIN")
                        .font(.footnote)
                        .color(.white)
                }
                .frame(width: geometry.size.width, height: geometry.size.height)
            }
            .clipShape(Circle())
        }
    }
}

But when clicking the button, the shape gets deformed. Any idea why this happens ?

Same happens when i use .mask(Circle())

Is this a beta thing or normal behavior ? And does anyone maybe know a better way to create rounded buttons ?

Answer 1

what happens here is Button Considers all screen[width + height] as their frame by default.

so you have to set Button also.

I think it's the default behavior in watchOS

Here Your Code :

struct RoundButton: View {

    var value = "..."

    var body: some View {

        GeometryReader { geometry in

            Button(action: {}) {
                VStack {
                    Text(self.value)
                        .font(.headline)
                        .foregroundColor(Color("NightlyDark"))
                    Text("MIN")
                        .font(.footnote)
                        .foregroundColor(.white)
                }
                .frame(width: geometry.size.width, height: geometry.size.height)
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
                .clipShape(Circle())
        }

    }
}

Note: i'm using Xcode 11 Beta 4