Facebook SDK for React Native FAQ & Troubleshooting

Android Setup

The import statement for the CallbackManager object is missing. Import the class before using it in your code with the following statement:

import com.facebook.CallbackManager; 

Make sure the mCallbackManager object is initialized in getPackages() with the following statement:

mCallbackManager = new CallbackManager.Factory().create();

You will see this error when the project :react-native-fbsdk is not included in the setting.gradle file. Run rnpm install react-native-fbsdk at the root directory of the react-native project. The command should make the following code changes.

In setting.gradle:

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

In app/build.gradle:

dependencies {
  compile project(':react-native-fbsdk')
  compile fileTree(dir: "libs", include: ["*.jar"])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
}

iOS Setup

There are two ways to handle this:

1) If you want to keep the Facebook SDK in ~/Documents/FacebookSDK, make sure you drag FBSDKCoreKit, FBSDKLoginKit, and FBSDKShareKit into your project.

2) If you want to keep the Facebook SDK in your app, refer to the directions in the GitHub repo.

Make sure you called activateApp in the AppDelegates.m file. For example:

//  AppDelegate.m
#import <FBSDKCoreKit/FBSDKCoreKit.h>
- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

Xcode will raise the undefined symbols error when the related libraries are not linked to the project correctly. In this case the Facebook SDK for iOS is not linked. To fix this, drag the missing FBSDKxxxKit file into your project.

The version of Xcode that you are using is out of date. Upgrade to Xcode 8.0+.

SDK Issues

That is correct. This is by design. To do this you will need to dispatch the login call to main queue in native code and handle the threading yourself, or use FBAccessToken: refreshCurrentAccessTokenAsync to refresh the token.

This problem indicates that the code in the AppDelegate.m file hasn't been setup properly. Confirm that your code is similar to this example:

//  AppDelegate.m
#import <FBSDKCoreKit/FBSDKCoreKit.h>
- (BOOL)application:(UIApplication *)application 
        didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 
    [[FBSDKApplicationDelegate sharedInstance] application:application
        didFinishLaunchingWithOptions:launchOptions];
    // Add any custom logic here.
    return YES;
}

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

    BOOL handled = [[FBSDKApplicationDelegate sharedInstance] 
        application:application
        openURL:url
        sourceApplication:sourceApplication
        annotation:annotation
    ];
    // Add any custom logic here.
    return handled;
}

In order to share an image, use the react-native-image-picker to get the URI of the image, and then create a SharePhotoContent object with the URI.

Note: You need to have the Facebook app installed in order to share an image.

The following code demonstrates how to get user information with a GraphRequest:

const responseCallback = ((error, result) => {
  if (error) {
    response.ok = false
    response.error = error
    return(response)
  } else {
    response.ok = true
    response.json = result
    return(response)
  }
})

const profileRequestParams = {
  fields: {
    string: 'id, name, email, first_name, last_name, gender'
  }
}

const profileRequestConfig = {
  httpMethod: 'GET',
  version: 'v2.5',
  parameters: profileRequestParams,
  accessToken: token.toString()
}

const profileRequest = new GraphRequest(
  '/me',
  profileRequestConfig,
  responseCallback,
)
// Start the graph request.
new GraphRequestManager().addRequest(profileRequest).start();

If you entered the commands:

npm install #install react-native
rnpm install react-native-fbsdk
react-native run-android

And saw an error like this:

C:\PATH\TO\SDK\react-native-fbsdk\Sample\HelloFacebook\node_modules\react-native-fbsdk\Android\build\intermediates\exploded-aar\com.facebook.android\facebook-android-sdk\4.13.2\res\layout\com_facebook_tooltip_bubble.xml:34:25-71 
  : No resource found that matches the given name 
    (at 'background' with value '@drawable/com_facebook_tooltip_blue_background').

The problem is that the path name is too long. You will see this error in Windows when building the app. See http://stackoverflow.com/questions/30943180/no-resource-found-errors-for-supportappcompat-v722-0-0-on-android-studio for more information.