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 |
---|---|---|---|---|
Pending |
expo install expo-facebook
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
💡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!
appId
option in your Facebook.logInWithReadPermissionsAsync
call.user_photos
or user_friends
), or integrate Facebook login with other services like Firebase auth. If you need that functionality, you have two options:facebookScheme
with your Facebook login redirect URL scheme found here 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.facebookAutoInitEnabled
, defaults to false
facebookAutoLogAppEventsEnabled
, defaults to Facebook's default policy (Only applies to standalone apps)facebookAdvertiserIDCollectionEnabled
, defaults to Facebook's default policy (Only applies to standalone apps)expo client:ios
) in the app settings page pictured below. It should look something like: dev.expo.client.xxxxx
expo fetch:android:hashes
.Facebook Key Hash
and paste it as a key hash in your Facebook developer page pictured below.import * as Facebook from 'expo-facebook';
logInWithReadPermissionsAsync
to ensure that Facebook support is initialized properly.appId: string
argument.appId
from native app resources (which in standalone apps you would define in app.json
, in 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.appId
, it will override any other source.appName
.enabled == true
initializes the Facebook SDK on iOS, it does not on Android and we recommend always calling initializeAsync
before performing any actions with effects that should be visible to the user (like loginWithPermissions
).app.json
fields. The setting value is persisted across runs (value set with this method overriddes value from buildtime).app.json
fields. The setting value is persisted across runs (value set with this method overriddes value from buildtime).advertiser-id
to sent events. advertiser-id
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.app.json
fields. The setting value is persisted across runs (value set with this method overriddes value from buildtime).['public_profile', 'email']
.{ type: 'cancel' }
.{ 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.async function logIn() { try { await Facebook.initializeAsync('<APP_ID>'); const { type, token, expires, 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}`); } }