Facebook

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

Installation

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.

Registering your app with Facebook

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

iOS standalone app

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.

Screenshot of the Facebook developer page

Android standalone app

Build your standalone app for Android.
Run eas credentials, select the profile that you would like to generate the SHA-1 Fingerprint for, and press return.
Take the resulting SHA1 Fingerprint and convert it to base64 (for example, using base64.guru). The resulting base64 string is your "Facebook Key Hash".
Configure the Facebook Key Hash on the Facebook developer page pictured below.

Screenshot of the Facebook developer page

Configuration in app.json / app.config.js

Add the field 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.
Add the fields facebookAppId and facebookDisplayName, using your Facebook App ID and Facebook Display Name, respectively.
Optionally, add the following fields:
- 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.

Are you using the classic build system? (expo build:[android|ios])

You can configure the permissions for this library using ios.infoPlist and android.permissions.

Are you using this library in a bare React Native app?

Learn how to configure the native projects in the installation instructions in the expo-facebook repository.

Example app.json with config plugin

{
  "expo": {
    "plugins": [
      [
        "expo-facebook",
        {
          "userTrackingPermission": false
        }
      ]
    ]
  }
}

Configurable properties

Name	Default	Description
`userTrackingPermission`	`"This identifier will be used to deliver personalized ads to you."`	iOS only A string to set the NSUserTrackingUsageDescription permission message, or set to the boolean value false to omit the field entirely.

Example

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}`);
  }
}

API

import * as Facebook from 'expo-facebook';

Hooks

`usePermissions`

Arguments

options? (PermissionHookOptions<object>)

Check or request permissions to use data tracking. This uses both requestPermissionsAsync and getPermissionsAsync to interact with the permissions.

Example

const [status, requestPermission] = Facebook.usePermissions();

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 `token` expires.
expiredPermissions (optional)	`string[]`	List of permissions that were expired with this access token.
graphDomain (optional)	`string`	A website domain within the Graph API.https://developers.facebook.com/docs/graph-api/reference/v5.0/domain
permissions (optional)	`string[]`	List of granted permissions.
refreshDate (optional)	`Date`	The last time the `token` was refreshed (or when it was first obtained)
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`	(Android only) Indicates how this `token` was obtained.
userId	`string`	App-scoped Facebook ID of the user.

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 `appId` from Android and iOS. app resources (which in standalone apps you would define in `app.json`, in the Expo client are unavailable, and in bare you configure yourself according to Facebook setup documentation for iOS and Android). If it fails to find one, the promise will be rejected.
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: iOS disable auto events Android disable auto events
version (optional)	`string`	Selects the version of FBSDK to use.https://developers.facebook.com/docs/javascript/reference/FB.init/v5.0

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

Name	Type	Description
canAskAgain	`boolean`	-
expires	`PermissionExpiration`	-
granted	`boolean`	-
status	`PermissionStatus`	-