Facebook Login UI Issue
sufian1999 opened this issue · comments
Checklist before submitting a bug report
- I've updated to the latest released version of the SDK
- I've searched for existing GitHub issues
- I've looked for existing answers on Stack Overflow, the Facebook Developer Community Forum and the Facebook Developers Group
- I've read the Code of Conduct
- 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.
![Screenshot 2024-06-20 at 11 44 55 AM](https://private-user-images.githubusercontent.com/105508290/343216210-898438ed-c06a-4a96-b079-f11188f887e7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MzU3NjgsIm5iZiI6MTcyNDUzNTQ2OCwicGF0aCI6Ii8xMDU1MDgyOTAvMzQzMjE2MjEwLTg5ODQzOGVkLWMwNmEtNGE5Ni1iMDc5LWYxMTE4OGY4ODdlNy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNFQyMTM3NDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02NmFjNWVlZWY0NjI1MzFiZDU5ZjFlOWFmNjQ3MGQxMGRlYTIxZTk1OTU1ODViNTI4MWM3NDJlZjA0OGMyZjJiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.orwE1Ai7hWTTu0HfOVreY-OvP7vkOlJRPLtilbvXlCg)
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
Hi there,
I'm also experiencing the same issue with the Facebook Login UI not scrolling properly.
+1 😕
+1
+1