Migrating from expo-facebook
The expo-facebook module was deprecated in Expo SDK 45 and removed in Expo SDK 46. This guide will help you migrate to react-native-fbsdk-next.
Why Migrate?
expo-facebook is no longer maintained or supported
react-native-fbsdk-next provides more features and better performance
- Access to the latest Facebook SDK features and security updates
- Better TypeScript support
- Active community and maintenance
Installation
First, uninstall expo-facebook and install react-native-fbsdk-next:
# Remove expo-facebook
npm uninstall expo-facebook
# Install react-native-fbsdk-next
npm install react-native-fbsdk-next
or with yarn:
yarn remove expo-facebook
yarn add react-native-fbsdk-next
For Expo Projects
If you’re using Expo, add the config plugin to your app.json or app.config.js:
{
"expo": {
"plugins": [
[
"react-native-fbsdk-next",
{
"appID": "YOUR_FACEBOOK_APP_ID",
"clientToken": "YOUR_CLIENT_TOKEN",
"displayName": "Your App Name",
"scheme": "fbYOUR_FACEBOOK_APP_ID",
"advertiserIDCollectionEnabled": false,
"autoLogAppEventsEnabled": false,
"isAutoInitEnabled": true,
"iosUserTrackingPermission": "This identifier will be used to deliver personalized ads to you."
}
]
]
}
}
Important: The clientToken parameter is required in react-native-fbsdk-next, but was not required in expo-facebook. You can get this value from Facebook Developers > Your App > Settings > Advanced.
API Migration Table
The following table shows the expo-facebook API functions and their react-native-fbsdk-next equivalents:
| expo-facebook | Supported | react-native-fbsdk-next |
|---|
flushAsync() | ✅ | AppEventsLogger.flush() |
getAdvertiserIDAsync() | ❌ | Not supported |
getAnonymousIDAsync() | ✅ | AppEventsLogger.getAnonymousID() |
getAttributionIDAsync() | ✅ | AppEventsLogger.getAttributionID() |
getAuthenticationCredentialAsync() | ✅ | AccessToken.getCurrentAccessToken() then access .accessToken property |
getPermissionsAsync() | ❌ | Not supported |
getUserIDAsync() | ✅ | AppEventsLogger.getUserId() |
initializeAsync(optionsOrAppId, appName) | ✅ | Settings.setAppID($appId); Settings.setAppName($appName); Settings.setGraphAPIVersion($version); Settings.setAutoLogAppEventsEnabled($autoLogAppEvents); Settings.initializeSDK() |
logEventAsync(eventName, parameters) | ✅ | AppEventsLogger.logEvent(eventName, parameters) |
logInWithReadPermissionsAsync(options) | ✅ | LoginManager.logInWithPermissions(permissions) |
logOutAsync() | ✅ | LoginManager.logOut() |
logPurchaseAsync(purchaseAmount, currencyCode, parameters) | ✅ | AppEventsLogger.logPurchase(purchaseAmount, currency, parameters) |
logPushNotificationOpenAsync(campaign) | ✅ | AppEventsLogger.logPushNotificationOpen(payload) |
requestPermissionsAsync() | ❌ | Not supported |
setAdvertiserIDCollectionEnabledAsync(enabled) | ✅ | Settings.setAdvertiserIDCollectionEnabled(enabled) |
setAdvertiserTrackingEnabledAsync(enabled) | ✅ | Settings.setAdvertiserTrackingEnabled(enabled) |
setAutoLogAppEventsEnabledAsync(enabled) | ✅ | Settings.setAutoLogAppEventsEnabled(enabled) |
setUserDataAsync(userData) | ✅ | AppEventsLogger.setUserData(userData) |
setUserIDAsync(userID) | ✅ | AppEventsLogger.setUserID(userID) |
Code Migration Examples
Initialization
Before (expo-facebook):
import * as Facebook from 'expo-facebook';
await Facebook.initializeAsync({
appId: 'YOUR_APP_ID',
appName: 'Your App Name',
});
After (react-native-fbsdk-next):
import { Settings } from 'react-native-fbsdk-next';
Settings.setAppID('YOUR_APP_ID');
Settings.setAppName('Your App Name');
Settings.initializeSDK();
Login
Before (expo-facebook):
import * as Facebook from 'expo-facebook';
const { type, token } = await Facebook.logInWithReadPermissionsAsync({
permissions: ['public_profile', 'email'],
});
if (type === 'success') {
console.log('Logged in!', token);
}
After (react-native-fbsdk-next):
import { LoginManager, AccessToken } from 'react-native-fbsdk-next';
const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);
if (!result.isCancelled) {
const data = await AccessToken.getCurrentAccessToken();
console.log('Logged in!', data.accessToken);
}
Logout
Before (expo-facebook):
import * as Facebook from 'expo-facebook';
await Facebook.logOutAsync();
After (react-native-fbsdk-next):
import { LoginManager } from 'react-native-fbsdk-next';
LoginManager.logOut();
Getting Access Token
Before (expo-facebook):
import * as Facebook from 'expo-facebook';
const credential = await Facebook.getAuthenticationCredentialAsync();
if (credential) {
console.log('Token:', credential.token);
}
After (react-native-fbsdk-next):
import { AccessToken } from 'react-native-fbsdk-next';
const data = await AccessToken.getCurrentAccessToken();
if (data) {
console.log('Token:', data.accessToken);
}
Logging Events
Before (expo-facebook):
import * as Facebook from 'expo-facebook';
await Facebook.logEventAsync('ViewedContent', {
content_type: 'product',
content_id: 'ABC123',
});
After (react-native-fbsdk-next):
import { AppEventsLogger } from 'react-native-fbsdk-next';
AppEventsLogger.logEvent('ViewedContent', {
content_type: 'product',
content_id: 'ABC123',
});
Logging Purchases
Before (expo-facebook):
import * as Facebook from 'expo-facebook';
await Facebook.logPurchaseAsync(9.99, 'USD', { item: 'Premium Plan' });
After (react-native-fbsdk-next):
import { AppEventsLogger } from 'react-native-fbsdk-next';
AppEventsLogger.logPurchase(9.99, 'USD', { item: 'Premium Plan' });
Setting User Data
Before (expo-facebook):
import * as Facebook from 'expo-facebook';
await Facebook.setUserIDAsync('user123');
await Facebook.setUserDataAsync({
email: '[email protected]',
firstName: 'John',
lastName: 'Doe',
});
After (react-native-fbsdk-next):
import { AppEventsLogger } from 'react-native-fbsdk-next';
AppEventsLogger.setUserID('user123');
AppEventsLogger.setUserData({
email: '[email protected]',
firstName: 'John',
lastName: 'Doe',
});
React Native Version Compatibility
Make sure you’re using a compatible version of React Native:
| FB SDK | react-native-fbsdk-next version | Required React Native Version |
|---|
| >= 9.3.0+ | > 4.3.0 | >= 0.63.3* |
| >= 9.0.0+ | >= 3.0.1 | >= 0.60 |
| <= 8.0.1 | >= 1.0.0 | >= 0.60 |
| <= 8.0.1 | <= 0.10 | <= 0.59.x |
Attention: Versions after 4.2.0 only support React Native versions above 0.63.3, as it’s the oldest version that supports the latest Xcode version. While it may work on older versions, they are not officially supported.
Native Configuration Changes
iOS Changes
You’ll need to update your Info.plist and AppDelegate:
Info.plist
Ensure these keys are present:
<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>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fbYOUR_APP_ID</string>
</array>
</dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-share-api</string>
</array>
AppDelegate.m (Objective-C)
Add the required imports and initialization:
#import <AuthenticationServices/AuthenticationServices.h>
#import <SafariServices/SafariServices.h>
#import <FBSDKCoreKit/FBSDKCoreKit-Swift.h>
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[[FBSDKApplicationDelegate sharedInstance] application:application
didFinishLaunchingWithOptions:launchOptions];
// Your other code...
return YES;
}
- (BOOL)application:(UIApplication *)app
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [[FBSDKApplicationDelegate sharedInstance]application:app
openURL:url
options:options];
}
Android Changes
Update your AndroidManifest.xml and strings.xml:
strings.xml
<string name="facebook_app_id">YOUR_APP_ID</string>
<string name="facebook_client_token">YOUR_CLIENT_TOKEN</string>
AndroidManifest.xml
<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"/>
Enabling Auto App Installs in Expo
To enable auto app installs tracking in Expo:
{
"expo": {
"plugins": [
[
"react-native-fbsdk-next",
{
"appID": "YOUR_APP_ID",
"clientToken": "YOUR_CLIENT_TOKEN",
"displayName": "Your App Name",
"scheme": "fbYOUR_APP_ID",
"advertiserIDCollectionEnabled": true,
"autoLogAppEventsEnabled": true,
"isAutoInitEnabled": true,
"iosUserTrackingPermission": "This identifier will be used to deliver personalized ads to you."
}
]
]
}
}
Then in your app code (iOS only):
import { requestTrackingPermissionsAsync } from 'expo-tracking-transparency';
import { Settings } from 'react-native-fbsdk-next';
const { status } = await requestTrackingPermissionsAsync();
Settings.initializeSDK();
if (status === 'granted') {
await Settings.setAdvertiserTrackingEnabled(true);
}
Features Not Available
The following expo-facebook features are not available in react-native-fbsdk-next:
getAdvertiserIDAsync()
This method is not supported. Use AppEventsLogger.getAdvertiserID() as an alternative, though it may return different data.
getPermissionsAsync()
Not directly supported. After login, you can access granted permissions from the AccessToken:
import { AccessToken } from 'react-native-fbsdk-next';
const data = await AccessToken.getCurrentAccessToken();
if (data) {
console.log('Granted permissions:', data.permissions);
console.log('Declined permissions:', data.declinedPermissions);
}
requestPermissionsAsync()
Not supported. Use LoginManager.logInWithPermissions() to request additional permissions:
import { LoginManager } from 'react-native-fbsdk-next';
// Request additional permissions
const result = await LoginManager.logInWithPermissions([
'user_friends',
'user_birthday',
]);
Testing Your Migration
After migrating, test these key flows:
- Login flow - Ensure users can log in successfully
- Token retrieval - Verify access tokens are obtained correctly
- Event logging - Check that events appear in Facebook Analytics
- Logout - Confirm users can log out properly
- Permission handling - Test both granted and declined permissions
Common Migration Issues
Missing Client Token
If you see errors about a missing client token, make sure you’ve added it to your configuration. Get it from:
Facebook Developers > Your App > Settings > Advanced > Client Token
iOS Build Errors
After migration, run:
cd ios && pod install && cd ..
If you still have issues, try:
cd ios
rm -rf Pods Podfile.lock
pod install
cd ..
Android Build Errors
Clean your Android build:
cd android
./gradlew clean
cd ..
Need Help?
If you encounter issues during migration:
- Check the Troubleshooting Guide
- Review GitHub Issues
- Consult the Facebook SDK Documentation
See Also