How do I change the width of the "Sign In with Apple" button?

Question

I am embedding a "Sign In with Apple" Button in SwiftUI using a UIViewRepresentable struct to display the button.

import SwiftUI
import UIKit
import AuthenticationServices

final class AppleIDButton: UIViewRepresentable {

    typealias UIViewType = UIView

    var appleButton = ASAuthorizationAppleIDButton()

    func makeUIView(context: UIViewRepresentableContext<AppleIDButton>) -> UIView {
        let view = UIView()
        view.addSubview(appleButton)
        return view
    }

    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<AppleIDButton>) {
        appleButton.cornerRadius = 8
    }
}

...//Here is the code in my SwiftUI file

ZStack(alignment: .top) {
                    VStack(spacing: 0) {
                        Rectangle()
                            .frame(width: screenWidth, height: 1)
                            .foregroundColor(Color("lineGray"))

                        Rectangle()
                            .frame(width: screenWidth, height: screenHeight * 0.375)
                            .foregroundColor(.white)
                    }

                    VStack {

                        HStack {
                            self.appleIDButton
                                .frame(width: screenWidth - 24, height: 48)
                                .padding(.leading, 24)
                        }
                            .padding(.bottom, 16)


                        Text("Or")
                            .font(.system(size: 14))
                            .foregroundColor(Color("gray"))
                            .padding(.top, -16)
                        NavigationLink(destination: SignUpView()) {
                            HStack {
                                Spacer()
                                Text("Sign Up with email")
                                    .font(.system(size: 17))
                                    .fontWeight(.semibold)
                                    .foregroundColor(.white)
                                Spacer()
                            }
                            .padding([.top, .bottom], 12)
                        }
                            .background(colors.primaryThemeColor, cornerRadius: 8)
                            .padding([.leading, .trailing], 24)
                            .padding(.bottom)

                        HStack {
                            Spacer()
                            Text("Already have an account?")
                                .foregroundColor(Color("gray"))

                            NavigationLink(destination: SignInView()) {
                                Text("Sign In")
                                    .fontWeight(.semibold)
                                    .foregroundColor(colors.primaryThemeColor)
                            }
                            Spacer()
                        }
                            .font(.system(size: 14))
                    }
                        .padding(.top, 24)
                }

My code is currently producing a button that is less than half the width of the screen and is touching the leading edge.

When it shows up in the SwiftUI view, How do I change the width of the button to match the right view constraints?

Answer 1

You can modify the default constraints and set new ones. By default the width needs to be greater than 130.

• Objective - C

ASAuthorizationAppleIDButton *appleButton = [[ASAuthorizationAppleIDButton alloc] init];
[appleButton addTarget:self action:@selector(handleSignInWithAppleIDButtonPress:) forControlEvents:UIControlEventTouchUpInside];

// Disable default width constraints
[appleButton.constraints enumerateObjectsUsingBlock:^(__kindof NSLayoutConstraint * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
    if (obj.firstAttribute == NSLayoutAttributeWidth) {
        obj.active = NO;
    }
}];

// Set new ones
//[appleButton.widthAnchor constraintEqualToConstant:150].active = YES;
[appleButton.widthAnchor constraintEqualToConstant:40].active = YES;
[appleButton.heightAnchor constraintEqualToConstant:40].active = YES;

• Swift

let appleButton = ASAuthorizationAppleIDButton()
authorizationButton.addTarget(self, action: #selector(handleLogInWithAppleIDButtonPress), for: .touchUpInside)

// Disable default width constraints
appleButton.constraints.forEach { (constraint) in
    if (constraint.firstAttribute == .width) {
            constraint.isActive = false
    }
}

// Set new ones
//appleButton.widthAnchor.constraint(equalToConstant: 150).isActive = true
appleButton.widthAnchor.constraint(equalToConstant: 40).isActive = true

Answer 2

It's a usual process what we tend to miss is

appleSignInButton.translatesAutoresizingMaskIntoConstraints = false

When apple button is Programatically added Auto resizing is enabled and your constraint changes would not respond.

Happy coding