Deprecated. This module will be removed in SDK 46. There will be no replacement that works with the classic build service (
expo build
) because the classic build service has been superseded by EAS Build. With EAS Build and development builds, you should use react-native-fbsdk-next instead.
expo-facebook
provides Facebook integration, such as logging in through Facebook, for React Native apps. Expo exposes a minimal native API since you can access Facebook's Graph API directly through HTTP (using fetch, for example).
Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
-
expo install expo-facebook
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
For bare apps, here are links to the iOS Installation Walkthrough and the Android Installation Walkthrough.
When following these steps you will find on the Facebook Developer site that there are many fields and steps that you don't actually care about. Just look for the information that we ask you for and you will be OK!
Follow Facebook's developer documentation to register an application with Facebook's API and get an application ID. Take note of this application ID because it will be used as the appId
option in your Facebook.logInWithReadPermissionsAsync
call.
Then follow these steps based on the platforms you're targeting. This will need to be done from the Facebook developer site.
Expo Go from the Android Play Store will use the Facebook App ID that you provide, however, all Facebook API calls in the Expo Go from the iOS App Store will use Expo's own Facebook App ID. This is due to underlying configuration limitations, but the good news is it means less setup for you! The downside to this is that you can't customize which permissions your app requests from Facebook (like user_photos
or user_friends
), or integrate Facebook login with other services like Firebase auth. If you need that functionality on iOS, you can build a standalone app. An easy way to test this is to run a simulator build and install the app in your simulator, or use expo-dev-client.
You may have to switch the app from 'development mode' to 'public mode' on the Facebook developer page before other users can log in. This requires adding a privacy policy URL, which can be as simple as a GitHub Gist.
Add your app's Bundle ID as a Bundle ID in the app settings page pictured below. An easy way to test that this is set up correctly is to run a simulator build.
eas credentials
, select the profile that you would like to generate the SHA-1 Fingerprint for, and press return.facebookScheme
with your Facebook login redirect URL scheme found on the Facebook Developer website under "4. Configure Your info.plist." It should look like "fb123456"
. If you do not do this, Facebook will not be able to redirect to your app after logging in.facebookAppId
and facebookDisplayName
, using your Facebook App ID and Facebook Display Name, respectively.facebookAutoLogAppEventsEnabled
, defaults to Facebook's default policy (Only applies to standalone apps)facebookAdvertiserIDCollectionEnabled
, defaults to Facebook's default policy (Only applies to standalone apps)You can also configure expo-facebook
using its built-in config plugin if you use config plugins in your project (EAS Build or expo run:[android|ios]
). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect.
expo build:[android|ios]
)You can configure the permissions for this library using ios.infoPlist
and android.permissions
.
Learn how to configure the native projects in the installation instructions in the expo-facebook
repository.
{
"expo": {
"plugins": [
[
"expo-facebook",
{
"userTrackingPermission": false
}
]
]
}
}
Name | Default | Description |
---|---|---|
userTrackingPermission | "This identifier will be used to deliver personalized ads to you." | Only for: iOS A string to set the NSUserTrackingUsageDescription permission message, or set to the boolean value false to omit the field entirely. |
async function logIn() {
try {
await Facebook.initializeAsync({
appId: '<APP_ID>',
});
const { type, token, expirationDate, permissions, declinedPermissions } =
await Facebook.logInWithReadPermissionsAsync({
permissions: ['public_profile'],
});
if (type === 'success') {
// Get the user's name using Facebook's Graph API
const response = await fetch(`https://graph.facebook.com/me?access_token=${token}`);
Alert.alert('Logged in!', `Hi ${(await response.json()).name}!`);
} else {
// type === 'cancel'
}
} catch ({ message }) {
alert(`Facebook Login Error: ${message}`);
}
}
import * as Facebook from 'expo-facebook';
usePermissions(options)
Name | Type | Description |
---|---|---|
options (optional) | PermissionHookOptions<object> | - |
Check or request permissions to use data tracking.
This uses both requestPermissionsAsync
and getPermissionsAsync
to interact with the permissions.
const [status, requestPermission] = Facebook.usePermissions();
[null | PermissionResponse, RequestPermissionMethod<PermissionResponse>, GetPermissionMethod<PermissionResponse>]
getAdvertiserIDAsync()
Get the advertiser ID from Facebook.
Promise<string | null>
A promise fulfilled with the advertiser id or null if not set.
getAnonymousIDAsync()
Get an anonymous ID from Facebook.
Promise<string | null>
A promise fulfilled with an anonymous id or null if not set.
getAttributionIDAsync()
Gets the attribution ID from Facebook.
Promise<string | null>
A promise fulfilled with the attribution id or null if not set.
getAuthenticationCredentialAsync()
Returns the FacebookAuthenticationCredential
object if a user is authenticated, and null
if no valid authentication exists.
You can use this method to check if the user should sign in or not.
getPermissionsAsync()
Checks application's permissions for using data for tracking the user or the device.
iOS: it requires the NSUserTrackingUsageDescription message added to the info.plist.
A promise that resolves to an object of type PermissionResponse.
getUserIDAsync()
Gets the user ID.
Promise<string | null>
A promise fulfilled with the user id or null if not set.
initializeAsync(optionsOrAppId, appName)
Name | Type | Description |
---|---|---|
optionsOrAppId | string | FacebookInitializationOptions | - |
appName (optional) | string | - |
Calling this method ensures that the SDK is initialized.
You have to call this method before calling any method that uses
the FBSDK (ex: logInWithReadPermissionsAsync
, logOutAsync
) to ensure that
Facebook support is initialized properly.
appId
argument.
appId
, the Facebook SDK will try to use appId
from native app resources (which in standalone apps you define in app.json
, in app store development clients are unavailable, and in bare apps you configure yourself according to Facebook's setup documentation for iOS and Android). If the Facebook SDK fails to find an appId
value, the returned promise will be rejected.appName
.appId
, it will override any other source.Promise<void>
logEventAsync(eventName, parameters)
Name | Type | Description |
---|---|---|
eventName | string | - |
parameters (optional) | Params | - |
Logs an event with eventName and optional parameters. Supports the optional parameter valueToSum
,
which when reported, all of the valueToSum properties are summed together. For example, if 10 people purchased
one item and each item cost $10 (and passed in valueToSum) then they would be added together to report $100.
Parameters must be either strings or numbers, otherwise no event will be logged.
To view and test app events, please visit Facebook's Event Manager- https://www.facebook.com/events_manager2/list/app/
Promise<void>
logInWithReadPermissionsAsync(options)
Name | Type | Description |
---|---|---|
options (optional) | FacebookOptions | A map of options:
Default: {} |
Prompts the user to log into Facebook and grants your app permission to access their Facebook data. On iOS and Android, if the Facebook app isn't installed then a web view will be used to authenticate.
If the user or Facebook cancelled the login, returns { type: 'cancel' }. Otherwise, returns { type: 'success' } & FacebookAuthenticationCredential.
logPurchaseAsync(purchaseAmount, currencyCode, parameters)
Name | Type | Description |
---|---|---|
purchaseAmount | number | - |
currencyCode | string | - |
parameters (optional) | Params | - |
Logs a purchase event with the amount, currency code, and optional parameters. Parameters must be either strings or numbers, otherwise no event will be logged. See http://en.wikipedia.org/wiki/ISO_4217 for currencyCodes.
Promise<void>
logPushNotificationOpenAsync(campaign)
Name | Type | Description |
---|---|---|
campaign | string | - |
Logs an app event that tracks that the application was opened via Push Notification. Accepts a string describing the campaign of the Push Notification.
Promise<void>
requestPermissionsAsync()
Asks for permissions to use data for tracking the user or the device.
iOS: it requires the NSUserTrackingUsageDescription message added to the info.plist.
A promise that resolves to an object of type PermissionResponse.
setAdvertiserIDCollectionEnabledAsync(enabled)
Name | Type | Description |
---|---|---|
enabled | boolean | Whether |
Whether the Facebook SDK should collect advertiser ID properties, like the Apple IDFA and Android Advertising ID, automatically. Advertiser IDs let you identify and target specific customers. To learn more visit Facebook documentation describing that topic.
In some cases, you may want to disable or delay the collection of advertiser-id
,
such as to obtain user consent or fulfill legal obligations.
This method corresponds to this and this native SDK methods.
Promise<void>
setAdvertiserTrackingEnabledAsync(enabled)
Name | Type | Description |
---|---|---|
enabled | boolean | Whether advertising tracking of the Facebook SDK should be enabled |
Sets whether Facebook SDK should enable advertising tracking, (more info here).
Limitations:
This method corresponds to this
Promise<boolean>
Whether the value is set successfully. It will always return false in Android, iOS 13 and below.
Deprecated. Explicitly call
initializeAsync
instead.
setAutoInitEnabledAsync(enabled)
Name | Type | Description |
---|---|---|
enabled | boolean | - |
Promise<void>
setAutoLogAppEventsEnabledAsync(enabled)
Name | Type | Description |
---|---|---|
enabled | boolean | Whether automatic events logging of the Facebook SDK should be enabled |
Sets whether Facebook SDK should log app events. App events involve eg. app installs, app launches (more info here and here).
In some cases, you may want to disable or delay the collection of automatically logged events, such as to obtain user consent or fulfill legal obligations.
This method corresponds to this and this native SDK methods.
Promise<void>
setUserDataAsync(userData)
Name | Type | Description |
---|---|---|
userData | UserData | - |
Sets additional data about the user to increase the chances of matching a Facebook user.
Promise<void>
setUserIDAsync(userID)
Name | Type | Description |
---|---|---|
userID | null | string | - |
Sets a custom user ID to associate with all app events. The userID is persisted until it is cleared by passing nil.
Promise<void>
PermissionResponse
An object obtained by permissions get and request functions.
Name | Type | Description |
---|---|---|
canAskAgain | boolean | Indicates if user can be asked again for specific permission. If not, one should be directed to the Settings app in order to enable/disable the permission. |
expires | PermissionExpiration | Determines time when the permission expires. |
granted | boolean | A convenience boolean that indicates if the permission is granted. |
status | PermissionStatus | Determines the status of the permission. |
FacebookAuthenticationCredential
Name | Type | Description |
---|---|---|
appId | string | Application ID used to initialize the Facebook SDK app. |
dataAccessExpirationDate | Date | Time at which the current user data access expires. |
declinedPermissions (optional) | string[] | List of requested permissions that the user has declined. |
expirationDate | Date | Time at which the |
expiredPermissions (optional) | string[] | List of permissions that were expired with this access token. |
graphDomain (optional) | string | A website domain within the Graph API.
|
permissions (optional) | string[] | List of granted permissions. |
refreshDate (optional) | Date | The last time the |
signedRequest (optional) | string | A valid raw signed request as a string. |
token | string | Access token for the authenticated session. This token provides access to the Facebook Graph API. |
tokenSource (optional) | string | Only for: Android Indicates how this |
userId | string | App-scoped Facebook ID of the user. |
FacebookInitializationOptions
Acceptable values are: FacebookSDKScriptURLOptions
, FacebookSDKInitializationOptions
, FacebookNativeInitializationOptions
.
FacebookLoginResult
Name | Type | Description |
---|---|---|
type | 'cancel' | - |
FacebookNativeInitializationOptions
Name | Type | Description |
---|---|---|
appName (optional) | string | An optional Facebook App Name argument for iOS and Android. |
FacebookOptions
Name | Type | Description |
---|---|---|
permissions (optional) | string[] | - |
FacebookSDKInitializationOptions
Name | Type | Description |
---|---|---|
appId (optional) | string | Application ID used to initialize the FBSDK app. On Android and iOS if you don't provide this, Facebook SDK will try to use |
autoLogAppEvents (optional) | boolean | Sets whether Facebook SDK should log app events. App events involve app eg. installs, app launches (more info here and here). In some cases, you may want to disable or delay the collection of automatically logged events, such as to obtain user consent or fulfill legal obligations. This method corresponds to: |
version (optional) | string | Selects the version of FBSDK to use. |
FacebookSDKScriptURLOptions
Name | Type | Description |
---|---|---|
domain (optional) | string | Only for: Android Sets the base Facebook domain to use when making network requests. Default: 'connect.facebook.net' |
PermissionExpiration
Permission expiration time. Currently, all permissions are granted permanently.
Acceptable values are: 'never'
, number
.
PermissionHookOptions
Acceptable values are: PermissionHookBehavior
, Options
.
UserData
Info about a user to increase chances of matching a Facebook user. See https://developers.facebook.com/docs/app-events/advanced-matching for more info about the expected format of each field.
Name | Type | Description |
---|---|---|
city (optional) | string | - |
country (optional) | string | - |
dateOfBirth (optional) | string | - |
email (optional) | string | - |
firstName (optional) | string | - |
gender (optional) | 'm' | 'f' | - |
lastName (optional) | string | - |
phone (optional) | string | - |
state (optional) | string | - |
zip (optional) | string | - |
PermissionStatus
UNDETERMINED
PermissionStatus.UNDETERMINED = "undetermined"
User hasn't granted or denied the permission yet.
ERR_FACEBOOK_UNINITIALIZED
Attempted to use the Facebook SDK before it was initialized. Ensure initializeAsync
has successfully resolved before attempting to use the Facebook SDK.
ERR_FACEBOOK_MISCONFIGURED
Failed to initialize the Facebook SDK app because the appId
option wasn't provided and the appId
couldn't be resolved automatically from the native configuration files.
ERR_FACEBOOK_LOGIN
An error occurred while trying to log in to Facebook.
You can use the fetch
API to get info about the user from the Facebook Graph API. Here are some helper methods you can use to make data access easier.
// Get default info about the currently authenticated user.
async function getUserAsync() {
const { name } = await requestAsync('me');
console.log(`Hello ${name} 👋`);
}
// Request data from the Facebook Graph API.
// Learn more https://developers.facebook.com/docs/graph-api/using-graph-api/
async function requestAsync(path: string, token?: string): Promise<any> {
let resolvedToken = token;
if (!token) {
const auth = await Facebook.getAuthenticationCredentialAsync();
if (!auth) {
throw new Error(
'User is not authenticated. Ensure `logInWithReadPermissionsAsync` has successfully resolved before attempting to use the FBSDK Graph API.'
);
}
resolvedToken = auth.token;
}
const response = await fetch(
`https://graph.facebook.com/${path}?access_token=${encodeURIComponent(resolvedToken)}`
);
const body = await response.json();
return body;
}