Expo

Documentation

Hi friend! Meet us at App.js Conf in Krakow, Poland on April 4th and 5th with workshops and talks. Learn more

Facebook

Provides Facebook integration for Expo apps. Expo exposes a minimal native API since you can access Facebook's Graph API directly through HTTP (using fetch, for example).

Installation

This API is pre-installed in managed apps. To use it in a bare React Native app, follow its installation instructions.

Configuration

Registering your app with Facebook

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 targetting. This will need to be done from the Facebook developer site:
  • The Expo client app
    • Add host.exp.Exponent as an iOS Bundle ID. Add rRW++LUjmZZ+58EbN5DVhGAnkX4= as an Android key hash. Your app's settings should end up including the following under "Settings > Basic":
  • iOS standalone app
    • Add your app's Bundle ID as a Bundle ID in app's settings page pictured above.
    • In your app.json, add a field facebookScheme with your Facebook login redirect URL scheme found here under 4. Configure Your info.plist. It should look like "fb123456".
    • Also in your app.json, add your Facebook App ID and Facebook Display Name under the facebookAppId and facebookDisplayName keys.
  • Android standalone app
    • Build your standalone app for Android.
    • Run expo fetch:android:hashes.
    • Copy Facebook Key Hash and paste it as an additional key hash in your Facebook developer page pictured above.
You may have to switch the app from 'development mode' to 'public mode' on the Facebook developer page before other users can log in.

API

// in managed apps:
import { Facebook } from 'expo';

// in bare apps:
import * as Facebook from 'expo-facebook';

Facebook.logInWithReadPermissionsAsync(appId, options)

Prompts the user to log into Facebook and grants your app permission to access their Facebook data.

param string appId

Your Facebook application ID. Facebook's developer documentation describes how to get one.

param object options

A map of options:
  • permissions (array) -- An array specifying the permissions to ask for from Facebook for this login. The permissions are strings as specified in the Facebook API documentation. The default permissions are ['public_profile', 'email'].
  • behavior (string) -- The type of login prompt to show. Currently this is only supported on iOS, and must be one of the following values:
    • 'system' (default) -- Attempts to log in through the Facebook account currently signed in through the device Settings. This will fallback to native behavior on iOS 11+ as Facebook has been removed from iOS's Settings.
    • 'web' -- Attempts to log in through a modal UIWebView pop up.
    • 'browser' -- Attempts to log in through Safari or SFSafariViewController.
    • 'native' -- Attempts to log in through the native Facebook app, but the Facebook SDK may fallback to browser instead.

Returns

If the user or Facebook cancelled the login, returns { type: 'cancel' }.
Otherwise, returns { type: 'success', token, expires, permissions, declinedPermissions }. token is a string giving the access token to use with Facebook HTTP API requests. expires is the time at which this token will expire, as seconds since epoch. You can save the access token using, say, AsyncStorage, and use it till the expiration time. permissions is a list of all the approved permissions, whereas declinedPermissions is a list of the permissions that the user has rejected.

Example

async function logIn() {
  try {
    const {
      type,
      token,
      expires,
      permissions,
      declinedPermissions,
    } = await Facebook.logInWithReadPermissionsAsync('<APP_ID>', {
      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}`);
  }
}
Given a valid Facebook application ID in place of <APP_ID>, the code above will prompt the user to log into Facebook then display the user's name. This uses React Native's fetch to query Facebook's Graph API.