Expo Setup

Configure React Native FBSDK Next for Expo apps

This package cannot be used in the “Expo Go” app because it requires custom native code. You must use Expo Development Builds or Bare Workflow.

Installation

1. Install the package

   npm install react-native-fbsdk-next
   # or
   yarn add react-native-fbsdk-next
   
2. Add the config plugin

   Add the config plugin to your app.json or app.config.js:

   app.json (Basic)

   {
     "expo": {
       "plugins": ["react-native-fbsdk-next"]
     }
   }
   
3. Rebuild your app

   Every time you change the plugin configuration, you must rebuild your native app.

   # Prebuild to generate native code
   npx expo prebuild
   
   # Run on iOS
   npx expo run:ios
   
   # Run on Android
   npx expo run:android
   

   See the Expo documentation for more details.

Configuration Options

Required Configuration

Unlike the deprecated expo-facebook package, the clientToken field is required for this library. You can get this value from Facebook Developers > Your App > Settings > Advanced.

Property	Type	Description
appID	string	Your Facebook Application ID
displayName	string	Your Application Name
clientToken	string	Your Facebook Client Token (found in Settings > Advanced)
scheme	string	URL scheme for returning to the app from Facebook. Format: fb[app-id]

Optional Configuration

Property	Type	Default	Description
iosUserTrackingPermission	string | false	-	iOS User Tracking Permission message. Set to false to omit.
advertiserIDCollectionEnabled	boolean	false	Enable advertiser ID collection
autoLogAppEventsEnabled	boolean	false	Automatically log app events
isAutoInitEnabled	boolean	false	Auto-initialize the Facebook SDK

Example Configuration

Here’s a complete example with all options:

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

Enabling Auto App Installs

To enable automatic app install tracking in Expo:

1. Update configuration

   Set both flags to true in your config:

   {
     "autoLogAppEventsEnabled": true,
     "advertiserIDCollectionEnabled": true
   }
   
2. Request tracking permission (iOS)

   On iOS, you need user consent to collect user data. This is required by Apple’s App Tracking Transparency framework.

   Add this code somewhere in your App.tsx or main app component:

   import { requestTrackingPermissionsAsync } from 'expo-tracking-transparency';
   import { Settings } from 'react-native-fbsdk-next';
   
   // Request permission and initialize SDK
   const { status } = await requestTrackingPermissionsAsync(); 
   
   Settings.initializeSDK();
   
   if (status === 'granted') {
       await Settings.setAdvertiserTrackingEnabled(true);
   }
   

Expo Bare Workflow - iOS AppDelegate Setup

If you’re using Expo Bare Workflow with React Native 0.77+, your AppDelegate.swift will extend ExpoAppDelegate instead of the standard React Native app delegate.

Required Imports

import Expo
import React
import FBSDKCoreKit              // <- Add This
import AppTrackingTransparency   // <- Add This

Example Implementation

import Expo
import React
import FBSDKCoreKit
import AppTrackingTransparency

@UIApplicationMain
public class AppDelegate: ExpoAppDelegate {
  
  public override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    
    // Your existing Expo setup code...
    
    // Initialize Facebook SDK
    ApplicationDelegate.shared.application(
      application,
      didFinishLaunchingWithOptions: launchOptions
    )
    
    // Request tracking authorization
    if #available(iOS 14, *) {
      ATTrackingManager.requestTrackingAuthorization { _ in
        AppEvents.shared.activateApp()
      }
    } else {
      AppEvents.shared.activateApp()
    }
    
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
  
  // CRITICAL: Required for Facebook SSO to work
  public override func application(
    _ app: UIApplication,
    open url: URL,
    options: [UIApplication.OpenURLOptionsKey: Any] = [:]
  ) -> Bool {
    let handledByFB = ApplicationDelegate.shared.application(
      app, open: url, options: options)
    let handledByRN = RCTLinkingManager.application(
      app, open: url, options: options)
    let handledBySuper = super.application(
      app, open: url, options: options)
    
    return handledByFB || handledByRN || handledBySuper
  }
  
  // Optional: Activate app when it becomes active
  open override func applicationDidBecomeActive(_ application: UIApplication) {
    super.applicationDidBecomeActive(application)
    AppEvents.shared.activateApp()
  }
}

• Always call super methods to maintain Expo functionality
• The ExpoAppDelegate already handles many React Native bridge initialization tasks
• Ensure your Expo modules are compatible with the Facebook SDK

Migrating from expo-facebook

The expo-facebook module was deprecated in Expo SDK 45 and removed in SDK 46. Here are the key differences:

Key Changes

1. Client Token is Required: Unlike expo-facebook, the clientToken field is mandatory
2. Different API: The JavaScript API has changed significantly
3. New Package Name: Use react-native-fbsdk-next instead of expo-facebook

Feature Parity Table

expo-facebook API	Supported	react-native-fbsdk-next API
flushAsync()	✅	AppEventsLogger.flush()
getAdvertiserIDAsync()	❌	Not supported
getAnonymousIDAsync()	✅	AppEventsLogger.getAnonymousID()
getAttributionIDAsync()	✅	AppEventsLogger.getAttributionID()
getAuthenticationCredentialAsync()	✅	AccessToken.getCurrentAccessToken()
getPermissionsAsync()	❌	Not supported
getUserIDAsync()	✅	AppEventsLogger.getUserId()
initializeAsync()	✅	Settings.setAppID(), Settings.initializeSDK()
logEventAsync()	✅	AppEventsLogger.logEvent()
logInWithReadPermissionsAsync()	✅	LoginManager.logInWithPermissions()
logOutAsync()	✅	LoginManager.logOut()
logPurchaseAsync()	✅	AppEventsLogger.logPurchase()
logPushNotificationOpenAsync()	✅	AppEventsLogger.logPushNotificationOpen()
requestPermissionsAsync()	❌	Not supported
setAdvertiserIDCollectionEnabledAsync()	✅	Settings.setAdvertiserIDCollectionEnabled()
setAdvertiserTrackingEnabledAsync()	✅	Settings.setAdvertiserTrackingEnabled()
setAutoLogAppEventsEnabledAsync()	✅	Settings.setAutoLogAppEventsEnabled()
setUserDataAsync()	✅	AppEventsLogger.setUserData()
setUserIDAsync()	✅	AppEventsLogger.setUserID()

Android Setup

For Android-specific setup (key hashes, strings.xml, etc.), the config plugin handles most of the configuration automatically. However, you may still need to:

1. Generate and add key hashes to Facebook Developer Console (especially for release builds)
2. Configure ProGuard rules if using code obfuscation

See the Android Setup guide for detailed instructions.

Next Steps

Once Expo setup is complete, you can:

• Get Started with Facebook Login
• Implement Login
• Track App Events