There are many ways we can integrate facebook authentication with react native application, in this blog i specifically write about the react-native-facebook-login, basically it is a wrapper lib of react-native-fbsdk.  It is the JavaScript plugin provided by react-native community. Unluckily, it is not much popular and preferred plugin/package that is used for signing in with facebook but after spending couple of days on integrating react-native-fbsdk, I faced couple of issues that even help provided on stack overflow and github was not that much enough to solve the issues.

Installation

You just have to execute single command in you project root directory to include the lib in your project

npm install –save react-native-facebook-login

Setup

IOS

follow the following steps after installing the package

  • Open your project in xcode then follow the following steps
    Click on the main project, Go to general. Scroll down to Libraries. Click on “+”. Add this in      libraries “node_modules/react-native-facebook-login”.
    -Now go to “Build Phases” expand the Link Binary With Libraries header
    -Scroll down and click the “+” to add a library
    -Find and add libRCTFBLogin.a under the Workspace group
  • Add the following code snippet in your info.plist LSApplicationQueriesSchemes
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fb{your-app-id}</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>{your-app-id}</string>
<key>FacebookDisplayName</key>
<string>{your-app-name}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>
  • Click on the main project, Go to general. Scroll down to Linked Frameworks and Libraries. Click on “+”.
    -Go to “node_modules/react-native-facebook-login/FacebookSDK”
    -Select all the .framework files in the FacebookSDK folder and add them.
  • Now go to Build Settings, scroll down to Search Paths
    -Add the following path to your Framework Search Paths for both (Debug and Release) $(SRCROOT)/../node_modules/react-native-facebook-login/FacebookSDK
  • Now open AppDelegate.m, Modify it accordingly
#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>
  • Modify the application didFinishLaunchingWithOptions method to return FBSDKApplicationDelegate instead of YES
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ...
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  // return YES;
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                    didFinishLaunchingWithOptions:launchOptions];
}
  • Add the following new methods after the application didFinishLaunchingWithOptions method above, before the @end.
// Facebook SDK
- (void)applicationDidBecomeActive:(UIApplication *)application {
    [FBSDKAppEvents activateApp];
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
    return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                          openURL:url
                                                sourceApplication:sourceApplication
                                                       annotation:annotation];
}

Android

  • Go to android/settings.gradle, and add the below code snippet
    include :react-native-facebook-login
    project(:react-native-facebook-login).projectDir = new File(rootProject.projectDir, ../node_modules/react-native-facebook-login/android)
  • Go to android/app/build.gradle, add the following
dependencies {
    ...
    compile project(':react-native-facebook-login')
}
  • Go to android/app/src/main/java/com/{Your Package Name}/MainApplication.java and modify the file
...
import com.magus.fblogin.FacebookLoginPackage; // <--- import
public class MainApplication extends Application implements ReactApplication {
    ...
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new FacebookLoginPackage() // <------ add the package
        );
    }
    ...
}
  • Go to android/app/src/main/res/values/strings.xml add the following line of code 
<resources>
    <string name="app_name">{Your_App_Name}</string>
    <string name="fb_app_id">{FB_APP_ID}</string>
    <string name="fb_login_protocol_scheme">fb{FB_APP_ID}</string>
</resources>
  • Go to android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          package="com.your.app.namespace">
    ...
    <application
            android:allowBackup="true"
            android:label="@string/app_name"
            android:icon="@mipmap/ic_launcher"
            android:theme="@style/AppTheme">
        ...
        <!--add FacebookActivity-->
        <activity tools:replace="android:theme"
                android:name="com.facebook.FacebookActivity"
                android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
                android:label="@string/app_name"
                android:theme="@android:style/Theme.Translucent.NoTitleBar"/>
        <!--add CustomTabActivity-->
        <activity
            android:name="com.facebook.CustomTabActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>
        <!--reference your fb_app_id-->
        <meta-data
                android:name="com.facebook.sdk.ApplicationId"
                android:value="@string/fb_app_id"/>
    </application>
</manifest>

to create app on facebook please visit here