Installation

Prerequisites

Before installing React Native FBSDK Next, ensure you have:

React Native version 0.63.3 or higher
A Facebook App ID (create one at Facebook Developers)
Xcode 12.0+ (for iOS development)
Android Studio (for Android development)

This guide assumes you have a React Native project already set up. If not, create one using:

npx react-native init MyApp

Step 1: Install the Package

Choose your preferred package manager:

npm install --save react-native-fbsdk-next

Step 2: Link Native Dependencies

React Native 0.60+

The CLI autolink feature automatically links the native modules.

iOS: Install CocoaPods

For iOS, you need to install the native dependencies using CocoaPods:

cd ios && pod install && cd ..

If you encounter any issues during pod installation, try:

cd ios && pod install --repo-update && cd ..

Android

No additional steps required. The module will be linked automatically.

React Native < 0.60

For React Native versions below 0.60, please refer to the original React Native FBSDK documentation.

Step 3: Configure Android

Follow these steps to configure the Facebook SDK for Android:

3.1 Update `android/app/src/main/res/values/strings.xml`

Add your Facebook App ID, Client Token, and App Name:

<resources>
    <string name="app_name">MyApp</string>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
    <string name="facebook_client_token">YOUR_CLIENT_TOKEN</string>
    <string name="fb_login_protocol_scheme">fbYOUR_FACEBOOK_APP_ID</string>
</resources>

Replace YOUR_FACEBOOK_APP_ID and YOUR_CLIENT_TOKEN with your actual Facebook app credentials from the Facebook App Dashboard.

3.2 Update `android/app/src/main/AndroidManifest.xml`

Add the following inside the <application> tag:

<meta-data 
    android:name="com.facebook.sdk.ApplicationId" 
    android:value="@string/facebook_app_id"/>
<meta-data 
    android:name="com.facebook.sdk.ClientToken" 
    android:value="@string/facebook_client_token"/>

<activity 
    android:name="com.facebook.FacebookActivity"
    android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@string/app_name" />

<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>

3.3 Configure Key Hash

Generate your development key hash and add it to your Facebook App settings:

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

The default password for the debug keystore is android.

Add the generated hash to your Facebook App: Settings > Basic > Key Hashes

Step 4: Configure iOS

The configuration differs based on your React Native version.

React Native >= 0.77 (Swift)

Add Required Imports

At the top of your ios/YourApp/AppDelegate.swift file:

import FBSDKCoreKit              // Add this
import AppTrackingTransparency   // Add this

Initialize Facebook SDK

Inside the application(_:didFinishLaunchingWithOptions:) method:

public override func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
) -> Bool {
  
  // ... your existing code ...
  
  // Initialize Facebook SDK
  ApplicationDelegate.shared.application(
    application,
    didFinishLaunchingWithOptions: launchOptions
  )
  
  // Request App Tracking Transparency authorization (iOS 14+)
  if #available(iOS 14, *) {
    ATTrackingManager.requestTrackingAuthorization { _ in
      AppEvents.shared.activateApp()
    }
  } else {
    AppEvents.shared.activateApp()
  }
  
  return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

Add openURL Method

This is critical for Facebook SSO to work when the Facebook app is installed:

public override func application(
  _ app: UIApplication,
  open url: URL,
  options: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
  // Facebook SDK must be checked FIRST
  let handledByFB = ApplicationDelegate.shared.application(
    app, open: url, options: options)
  
  // Then call super
  let handledBySuper = super.application(
    app, open: url, options: options)
  
  return handledByFB || handledBySuper
}

If you’re using RCTLinkingManager for deep links, Facebook SDK must be checked before RCTLinkingManager to prevent SSO issues.

React Native 0.76 and below (Objective-C)

Add Required Imports

At the top of your ios/YourApp/AppDelegate.m file:

#import <AuthenticationServices/AuthenticationServices.h>
#import <SafariServices/SafariServices.h>
#import <FBSDKCoreKit/FBSDKCoreKit-Swift.h>

Initialize Facebook SDK

Inside the didFinishLaunchingWithOptions method:

- (BOOL)application:(UIApplication *)application 
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [[FBSDKApplicationDelegate sharedInstance] application:application
                      didFinishLaunchingWithOptions:launchOptions];
  
  // your other code
  return YES;
}

Add openURL Method

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [[FBSDKApplicationDelegate sharedInstance] application:app
                                                      openURL:url
                                                      options:options];
}

Create Swift Bridging Header

If you encounter Undefined symbols for architecture errors, create an empty File.swift in your project. Xcode will prompt you to create a Bridging Header - click accept.

Configure Info.plist

Add the following to your ios/YourApp/Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fbYOUR_APP_ID</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_APP_ID</string>
<key>FacebookClientToken</key>
<string>YOUR_CLIENT_TOKEN</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_NAME</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
</array>
<key>NSUserTrackingUsageDescription</key>
<string>This identifier will be used to deliver personalized ads to you.</string>

Replace YOUR_APP_ID, YOUR_CLIENT_TOKEN, and YOUR_APP_NAME with your actual Facebook app details.

Expo Configuration

This package cannot be used in the “Expo Go” app because it requires custom native code.

For Expo projects using the bare workflow or custom dev client:

Add Config Plugin

In your app.json or app.config.js:

{
  "expo": {
    "plugins": [
      [
        "react-native-fbsdk-next",
        {
          "appID": "48127127xxxxxxxx",
          "clientToken": "c5078631e4065b60d7544a95xxxxxxxx",
          "displayName": "My App",
          "scheme": "fb48127127xxxxxxxx",
          "advertiserIDCollectionEnabled": false,
          "autoLogAppEventsEnabled": false,
          "isAutoInitEnabled": true,
          "iosUserTrackingPermission": "This identifier will be used to deliver personalized ads to you."
        }
      ]
    ]
  }
}

Rebuild Native Code

After configuring the plugin, rebuild your app:

eas build --profile development --platform ios
eas build --profile development --platform android

Verify Installation

Create a simple test file to verify the installation:

App.js

import React from 'react';
import { View } from 'react-native';
import { LoginButton, Settings } from 'react-native-fbsdk-next';

// Initialize the SDK
Settings.initializeSDK();

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <LoginButton
        onLoginFinished={(error, result) => {
          if (error) {
            console.log('Login error:', error);
          } else {
            console.log('Login success:', result);
          }
        }}
        onLogoutFinished={() => console.log('Logged out')}
      />
    </View>
  );
}

Common Issues

Build error: 'Undefined symbols for architecture'

Solution: Create an empty File.swift in your iOS project root. When Xcode prompts you to create a Bridging Header, accept it.

Android: 'There is an error in logging you into this application'

Solution: Verify that your key hash is correctly configured in the Facebook App Dashboard under Settings > Basic > Key Hashes.

iOS: 'App ID not found' exception

Solution: Ensure you’ve added the FacebookAppID to your Info.plist and called [[FBSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions]; in AppDelegate.

Next Steps

Quick Start Guide

Now that you’ve installed the SDK, learn how to implement Facebook Login in your app

Get Started

Platform Setup

Core Concepts

Features

Guides

Prerequisites

Step 1: Install the Package

Step 2: Link Native Dependencies

React Native 0.60+

iOS: Install CocoaPods

Android

React Native < 0.60

Step 3: Configure Android

3.1 Update `android/app/src/main/res/values/strings.xml`

3.2 Update `android/app/src/main/AndroidManifest.xml`

3.3 Configure Key Hash

Step 4: Configure iOS

React Native >= 0.77 (Swift)

React Native 0.76 and below (Objective-C)

Configure Info.plist

Expo Configuration

Add Config Plugin

Rebuild Native Code

Verify Installation

Common Issues

Next Steps

Quick Start Guide

Build docs developers (and LLMs) love

Get Started

Platform Setup

Core Concepts

Features

Guides

​Prerequisites

​Step 1: Install the Package

​Step 2: Link Native Dependencies

​React Native 0.60+

​iOS: Install CocoaPods

​Android

​React Native < 0.60

​Step 3: Configure Android

​3.1 Update android/app/src/main/res/values/strings.xml

​3.2 Update android/app/src/main/AndroidManifest.xml

​3.3 Configure Key Hash

​Step 4: Configure iOS

​React Native >= 0.77 (Swift)

​React Native 0.76 and below (Objective-C)

​Configure Info.plist

​Expo Configuration

​Add Config Plugin

​Rebuild Native Code

​Verify Installation

​Common Issues

​Next Steps

Quick Start Guide

Build docs developers (and LLMs) love

Prerequisites

Step 1: Install the Package

Step 2: Link Native Dependencies

React Native 0.60+

iOS: Install CocoaPods

Android

React Native < 0.60

Step 3: Configure Android

3.1 Update `android/app/src/main/res/values/strings.xml`

3.2 Update `android/app/src/main/AndroidManifest.xml`

3.3 Configure Key Hash

Step 4: Configure iOS

React Native >= 0.77 (Swift)

React Native 0.76 and below (Objective-C)

Configure Info.plist

Expo Configuration

Add Config Plugin

Rebuild Native Code

Verify Installation

Common Issues

Next Steps