Facebook Login UI Issue

[sufian1999]

Checklist before submitting a bug report

• [ ] I've updated to the latest released version of the SDK
• [X] I've searched for existing GitHub issues
• [X] I've looked for existing answers on Stack Overflow, the Facebook Developer Community Forum and the Facebook Developers Group
• [X] I've read the Code of Conduct
• [X] This issue is not security related and can safely be disclosed publicly on GitHub

Xcode version

15.0

Facebook iOS SDK version

14.0.0

Dependency Manager

CocoaPods

SDK Framework

Login

Goals

The Facebook login process must be UI issue-free. Buttons shouldn't disappear or go below the screen. Or is there any way to get the older UI of FBSDKLoginKit?

Expected results

The Facebook login process must be UI issue-free. Buttons shouldn't disappear or go below the screen.

Actual results

UI issues occur when the SDK opens the Facebook App for login. When I delete the FB app, then the LoginManager of FBSDK asks the user to login in the web view, and in the web view, the UI is ok.

UI issues like buttons disappearing, and can't scroll.

Below I gave the code of Objective-C and I bridge it and use it in my react native project. A fellow developer also tested this on FBSDK versions 17.0.0 and 16.2.1 but got the same issue.

Steps to reproduce

Do FB integration and the Facebook app must be installed. SDK opens the Facebook app and UI issues come. Mostly, these issues come on the latest iPhone devices like 15 pro, 15 pro max, 14 pro, and 14 pro max. On my iPhone 8, this issue doesn't occur.

Code samples & details

// AppDelegate.mm

#import "AppDelegate.h"
#import "FileDownloadModule.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <Firebase.h>

#import <FBSDKCoreKit/FBSDKCoreKit.h>

#import <React/RCTAppSetupUtils.h>
#import "RNSplashScreen.h"
#import "Orientation.h"

#if RCT_NEW_ARCH_ENABLED
#import <React/CoreModulesPlugins.h>
#import <React/RCTCxxBridgeDelegate.h>
#import <React/RCTFabricSurfaceHostingProxyRootView.h>
#import <React/RCTSurfacePresenter.h>
#import <React/RCTSurfacePresenterBridgeAdapter.h>
#import <ReactCommon/RCTTurboModuleManager.h>

#import <react/config/ReactNativeConfig.h>

@interface AppDelegate () <RCTCxxBridgeDelegate, RCTTurboModuleManagerDelegate> {
  RCTTurboModuleManager *_turboModuleManager;
  RCTSurfacePresenterBridgeAdapter *_bridgeAdapter;
  std::shared_ptr<const facebook::react::ReactNativeConfig> _reactNativeConfig;
  facebook::react::ContextContainer::Shared _contextContainer;
}
@end
#endif

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];

  //Initialize FB SDK
  [[FBSDKApplicationDelegate sharedInstance] application:application
                      didFinishLaunchingWithOptions:launchOptions];

  RCTAppSetupPrepareApp(application);

RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

#if RCT_NEW_ARCH_ENABLED
  _contextContainer = std::make_shared<facebook::react::ContextContainer const>();
  _reactNativeConfig = std::make_shared<facebook::react::EmptyReactNativeConfig const>();
  _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
  _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer];
  bridge.surfacePresenter = _bridgeAdapter.surfacePresenter;
#endif

  UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"rtdadvisor", nil);

  if (@available(iOS 13.0, *)) {
    rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
    rootView.backgroundColor = [UIColor whiteColor];
  }

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  [RNSplashScreen show];

  return YES;
}

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
    return [[FBSDKApplicationDelegate sharedInstance] application:app
                                                          openURL:url
                                                sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
                                                       annotation:options[UIApplicationOpenURLOptionsAnnotationKey]];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

#if RCT_NEW_ARCH_ENABLED

#pragma mark - RCTCxxBridgeDelegate

- (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
{
  _turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge
                                                             delegate:self
                                                            jsInvoker:bridge.jsCallInvoker];
  return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager);
}

#pragma mark RCTTurboModuleManagerDelegate

- (Class)getModuleClassFromName:(const char *)name
{
  return RCTCoreModulesClassProvider(name);
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
                                                      jsInvoker:(std::shared_ptr<facebook::react::CallInvoker>)jsInvoker
{
  return nullptr;
}

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const std::string &)name
                                                     initParams:
                                                         (const facebook::react::ObjCTurboModule::InitParams &)params
{
  return nullptr;
}

- (id<RCTTurboModule>)getModuleInstanceFromClass:(Class)moduleClass
{
  return RCTAppSetupDefaultModuleFromClass(moduleClass);
}

#endif

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
  return [Orientation getOrientation];
}

@end

// FacebookLoginModule.m
#import <Foundation/Foundation.h>
#import "FacebookLoginModule.h"
#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>

@implementation FacebookLoginModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(faceBookLogin:(RCTPromiseResolveBlock)resolve
                      rejecter:(RCTPromiseRejectBlock)reject) {
    dispatch_async(dispatch_get_main_queue(), ^{

        FBSDKLoginManager *loginManager = [[FBSDKLoginManager alloc] init];

        [loginManager logInWithPermissions:@[
          @"public_profile",
              @"pages_show_list",
              @"pages_manage_ads",
              @"pages_read_engagement",
              @"leads_retrieval",
              @"ads_management",
              @"pages_manage_metadata",
              @"business_management"]
                        fromViewController:nil
                                   handler:^(FBSDKLoginManagerLoginResult *result, NSError *error) {
            if (error) 
            {
                reject(@"login_error", @"Facebook login failed", error);
            } 
            else if (result.isCancelled)
            {
                reject(@"login_cancelled", @"Facebook login was cancelled", nil);
            } 
            else 
            {
                NSDictionary *loginResult = @{
                    @"token": result.token.tokenString ?: [NSNull null],
                    @"userID": result.token.userID ?: [NSNull null],
                    @"grantedPermissions": result.grantedPermissions.allObjects ?: @[],
                    @"declinedPermissions": result.declinedPermissions.allObjects ?: @[]
                };
                resolve(loginResult);
            }
        }];
    });
}

@end

// FacebookLoginModule.h
#import <React/RCTBridgeModule.h>

@interface FacebookLoginModule : NSObject <RCTBridgeModule>
@end

[AndersonGuerraSantos]

Hi there,

I'm also experiencing the same issue with the Facebook Login UI not scrolling properly.

[santyasm]

+1 😕

[vietvh1995]

+1

[arunlbit]

+1

[sufian1999]

The issue is resolved with the latest Facebook App. But if the user wants to connect pages and there are many pages then the last one can't be selected because it goes down.