React Native Facebook SDK Next

13.4.3 · active · verified Sun Apr 19

react-native-fbsdk-next is a community-maintained fork providing Facebook SDK integration for React Native applications. It wraps the native iOS and Android Facebook SDKs, exposing their functionalities entirely through documented JavaScript modules, eliminating the need for direct native code interaction. The package aims to continue support and upgrades after Facebook ceased official maintenance of the original `react-native-fbsdk`. Currently at version 13.4.3, it receives frequent updates to align with the latest native Facebook SDK versions and React Native ecosystem changes. It differentiates itself by its active community support, cross-platform compatibility from a single package, and continuous integration of new features and bug fixes from upstream Facebook SDKs.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates the installation of the React Native Facebook SDK, initialization using `Settings.initializeSDK()`, checking for an existing access token, and implementing Facebook login and logout functionality using `LoginManager` and `AccessToken`. It also includes basic event logging with `AppEventsLogger`.

import { LoginManager, AccessToken, AppEventsLogger, Settings } from 'react-native-fbsdk-next';
import React, { useEffect, useState } from 'react';
import { View, Text, Button, Alert, StyleSheet } from 'react-native';

const App: React.FC = () => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [userName, setUserName] = useState<string | null>(null);

  useEffect(() => {
    // It's good practice to explicitly initialize the SDK.
    // Ensure your app ID and client token are set in Info.plist (iOS) / AndroidManifest.xml (Android).
    Settings.initializeSDK();

    AccessToken.getCurrentAccessToken().then((data) => {
      if (data) {
        setLoggedIn(true);
        console.log('User already logged in:', data.accessToken);
        AppEventsLogger.logEvent('AppStartedWithExistingLogin');
      } else {
        setLoggedIn(false);
        console.log('No existing Facebook access token.');
      }
    });
  }, []);

  const fbLogin = async () => {
    try {
      AppEventsLogger.logEvent('LoginButtonPressed');
      const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);
      if (result.isCancelled) {
        Alert.alert('Login cancelled');
        console.log('Login cancelled');
      } else {
        Alert.alert('Login success with permissions: ' + result.grantedPermissions?.toString());
        console.log('Login success result: ', result);
        const data = await AccessToken.getCurrentAccessToken();
        if (data) {
          setLoggedIn(true);
          console.log('Access Token:', data.accessToken);
          AppEventsLogger.logEvent('FacebookLoginSuccess');
        } else {
          Alert.alert('Failed to get access token after login.');
          console.log('Failed to get access token after login.');
        }
      }
    } catch (error: any) {
      Alert.alert('Login error: ' + error.message);
      console.error('Login failed with error: ', error);
    }
  };

  const fbLogout = () => {
    LoginManager.logOut();
    setLoggedIn(false);
    setUserName(null);
    AppEventsLogger.logEvent('FacebookLogout');
    Alert.alert('Logged out from Facebook');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Facebook SDK Integration Example</Text>
      {loggedIn ? (
        <>
          <Text style={styles.statusText}>You are logged in to Facebook!</Text>
          <Button title="Logout from Facebook" onPress={fbLogout} />
        </>
      ) : (
        <Button title="Login with Facebook" onPress={fbLogin} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 20,
    marginBottom: 20,
    textAlign: 'center',
  },
  statusText: {
    marginBottom: 10,
    fontSize: 16,
  },
});

export default App;

view raw JSON →