empite-reactnative-facebookauth v1.0.1

empite-reactnative-facebookauth

Installation

NPM

npm install empite-reactnative-facebookauth --save

Yarn

yarn add empite-reactnative-facebookauth

To link with project

react-native link react-native-fbsdk

Configure native projects

Android project

Go to MainApplication.java and MainActivity.java under app/src/main/java/com/<project name>/ to complete setup.

In MainApplication.java,

Add an instance variable of type CallbackManager and its getter.

import com.facebook.CallbackManager;
import com.facebook.FacebookSdk;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.appevents.AppEventsLogger;
...

public class MainApplication extends Application implements ReactApplication {

  private static CallbackManager mCallbackManager = CallbackManager.Factory.create();

  protected static CallbackManager getCallbackManager() {
    return mCallbackManager;
  }
    //...

If you want to use AppEventsLogger to log events, override onCreate() method and add

@Override
public void onCreate() {
  super.onCreate();
  AppEventsLogger.activateApp(this);
  //...
}

Register SDK package in method getPackages().

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new FBSDKPackage(mCallbackManager)
      );
    }
};

In MainActivity.java

Override onActivityResult() method

import android.content.Intent;

public class MainActivity extends ReactActivity {

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }
    //...

Also you need to add in your settings.gradle:

include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')

And add react-native-fbsdk to dependencies in your app build.gradle:

dependencies {
    ...
    implementation 'com.facebook.android:facebook-android-sdk:4.34.0'
    implementation project(':react-native-fbsdk')
}

Before you can run the project, follow the Getting Started Guide for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that's taken care of by the rnpm link step above, but make sure you follow the rest of the steps such as updating strings.xml and AndroidManifest.xml.

iOS project

The react-native-fbsdk has been linked by rnpm, the next step will be downloading and linking the native Facebook SDK for iOS. Make sure you have the latest Xcode installed. Open the .xcodeproj in Xcode found in the ios subfolder from your project's root directory. Now, follow all the steps in the Getting Started Guide for Facebook SDK for iOS. Along with FBSDKCoreKit.framework, don't forget to import FBSDKShareKit.framework and FBSDKLoginKit.framework into your Xcode project.

If you're using react native's RCTLinkingManager

The AppDelegate.m file can only have one method for openUrl. If you're also using RCTLinkingManager to handle deep links, you should handle both results in your openUrl method.

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url 
    sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {

  BOOL handledFB = [[FBSDKApplicationDelegate sharedInstance] application:application
    openURL:url
    sourceApplication:sourceApplication
    annotation:annotation
  ];

  BOOL handledRCT = [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];

  return handledFB || handledRCT;
}

Usage

Login

Access Token or User Data

Fetch profile

import { facebookService } from 'empite-reactnative-facebookauth';

async getProfile() {
    try {
      const data = await facebookService.fetchLogin()
      console.log(data)
    } catch (error) {
      console.log(e)
    }
  }

Log Out

facebookService.logOut()

NOTE If you use Microsoft appcenter for continues deployment for IOS

follow those steps

• Create npmpreinstall.sh file in your project root directory
• Add this code snippet in to npmpreinstall.sh file

#!/bin/sh
if [ ! -L ~/Documents/FacebookSDK ]; then
    echo 'Symlinking ~/Documents/FacebookSDK to Facebook SDK in repo'
    ln -s $(cd ./vendor/FacebookSDK; pwd) ~/Documents/FacebookSDK
fi

• Add this line in your package.json file under scripts

"preinstall": "./npmpreinstall.sh"

• Download latest facebookIOS-SDK SDK
• Unzip the facebook sdk and rename the folder 'FacebookSDK'
• Add above folder in to your project root/vender/FacebookSDK

Need More Info See the Original Module