How to stop the flashing when pushing down on custom toggle element in SwiftUI

Viewed 24

So I built a custom toggle button, and one of the things that is supper irritating is that since it has a button element in it, it flashes when you push down.

I want it so when you push the toggle button it does not fad out or flash when you push.

struct CustomToggleStyle: ToggleStyle {
    var label1: String
    var label2: String
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            Button {
                configuration.isOn.toggle()
            } label: {
                ToggleItem(isOn: configuration.isOn, label1: label1, label2: label2)
            }
        }
    }
    
    struct ToggleItem: View {
        var isOn: Bool
        var label1: String
        var label2: String
        var body: some View {
            HStack {
                RoundedRectangle(cornerRadius: 5)
                    .fill(Color.toggleBG)
                    .frame(width: 311, height: 60)
                    .overlay(
                        RoundedRectangle(cornerRadius: 5)
                            .fill(.white)
                            .frame(width: 140, height: 50)
                            .padding(.horizontal, 7),
                        
                        alignment: isOn ? .trailing : .leading
                    )
                    .animation(.linear(duration: 0.2))
                    .overlay(
                        Text(label1)
                            .font(.custom(isOn ? "regular" : "heavy", size: 18)).foregroundColor(isOn ? .white : Color.toggleBG)
                                .padding(.trailing, 157),
                             alignment: .center)
                    .overlay(
                        Text(label2)
                            .font(.custom(isOn ? "heavy" : "regular", size: 18)).foregroundColor(isOn ? Color.toggleBG : .white)
                                .padding(.leading, 157),
                             alignment: .center)
            }
        }
    }
}

I think it has something to do with the button element inside the toggle. but I cannot figure it out.

1 Answers

You don't need button inside, just use tap gesture, like

func makeBody(configuration: Configuration) -> some View {
     ToggleItem(isOn: configuration.isOn, label1: label1, label2: label2)
         .onTapGesture {
            configuration.isOn.toggle()
         }
}

Tested with Xcode 13.1 / iOS 15.1

demo

Related