iosswiftstoryboardfacebook-loginfacebook-ios-sdk

Cannot change the height of Login Button in FBSDKLoginKit?


I am using FBSDKLoginKit in iOS with Swift.

Up until recently it has been working perfectly, however I now cannot override the height of my button in the Storyboard?

The height of the button is now much smaller for some reason. I have tried setting height constraints for the button, putting the button in a stack view and set to fill proportionally and even override the button height in the SDK with no luck.

If I change the button to a normal UIButton the layout constraints work perfectly.

This is what the button looks like when I run the app.

This is what the button looks like when I run the app.

This is how I would like the button to look - size wise.

This is how I would like the button to look - size wise.


Solution

  • I've also run into this problem. The reason for this is explained in the 4.18.0 to 4.19.0 upgrade guide:

    The FBSDKLoginButton UI has changed in 4.19.0. Instead of "Log in with Facebook", the button now displays "Continue with Facebook". The button color is changed to #4267B2 from #3B5998. The button height is now fixed at 28 due to use of smaller font size and paddings around a larger Facebook logo.

    The only workaround I found so far is to downgrade the SDK version to 4.18.0 (it did the job for me).

    It is possible that FB will address this issue (...that they've created for many people) in one of the future updates to the SDK.


    Towards a more permanent solution, we can see the specific changes that caused this, on GitHub. The change I find most suspicious starts on line 194:

    [self addConstraint:[NSLayoutConstraint constraintWithItem:self
                                                     attribute:NSLayoutAttributeHeight
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:nil
                                                     attribute:NSLayoutAttributeNotAnAttribute
                                                    multiplier:1
                                                      constant:28]];
    

    If the above constraint is removed/disabled, it could help reverse the situation. It should look approximately like this (I don't have an IDE at hand at the time of writing):

    // Obtain all constraints for the button:
    let layoutConstraintsArr = fbLoginButton.constraints
    // Iterate over array and test constraints until we find the correct one:
    for lc in layoutConstraintsArr { // or attribute is NSLayoutAttributeHeight etc.
       if ( lc.constant == 28 ){
         // Then disable it...
         lc.active = false
         break
       }
    }
    

    When I get a chance to test the above or if I find a better solution, I'll update the answer.