React Native Facebook Login (iOS only)

I struggled a lot to implement Facebook Login using React Native. I followed three lectures on YouTube and saw it working in the video, but it didn’t work on my screen. I followed the instruction given on facebook developer very closely as well, but it did not work. After Googling different errors, I finally made it. So I am writing this blog hoping that you won’t have to go through what I had to go through.

If you have not already, start your react-native project by following the react native document.

react-native init project

Now you have to install react-native-fbsdk, but instead of using the command given in Facebook Github, use the following

npm install --save https://github.com/facebook/react-native-fbsdk.git

If you install by npm install --save react-native-fbsdk, you will face an error as you add a line to AppDelegate.m later, and it will not get resolved.

Now you just have to follow the instruction given in the link.

1. Create a New App by clicking the blue button. Then you will get an App ID, which you will need to use later.

   

2. Set up Your Development Environment Facebook for Developers give two options, but I would recommend that you use SDK:Cocoapods because there would be less chance for an error. And please follow my instruction for this specific step.

   • First, install cocoapods in your ios directory cd ios && sudo gem install cocoapods

   and then create a Podfile pod init

   open PodFile and add following lines into your Podfile

   pod 'FBSDKCoreKit'
   pod 'FBSDKLoginKit'
   pod 'FBSDKShareKit'

   then install the dependencies pod install

I would recommend you to open your XCode and build your project after each step and check if there is an error.

3. Register and Configure Your App with Facebook

   Open your XCode in your ios directory. Make sure you open yourprojectname.xcworkspace of which color is white instead of the other one. I used the other file so many times, and it never worked.

   Copy your Bundle Identifier from step 3 of the first image, and then add it to the Facebook for Developers page like the second image.

   

   

   Then enable the single sign on like the image below;

   

4. Follow the instruction given in 4a. 4b has already been done when you react-native init, so you don’t have to worry about it

5. Connect Your App Delegate Add #import <FBSDKCoreKit/FBSDKCoreKit.h> to the top of your AppDelegate.m and then copy the code given in Facebook for Developers and paste it to your AppDelegate.m like below

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"sideProject"
                                            initialProperties:nil];
  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

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

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {

  BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
                                                                openURL:url
                                                      sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
                                                             annotation:options[UIApplicationOpenURLOptionsAnnotationKey]
                  ];


  // Add any custom logic here.
  return handled;
}

6. Ignore the rest of the instruction given in the link and copy the code from Facebook Github. Follow the Usage section