React Native Facebook SDK Using react-native-fbsdk

Introduction to React Native FBSDK

React Native FBSDK is a powerful tool that facilitates the integration of Facebook functionality into React Native applications. By leveraging the underlying iOS Facebook SDK and Android Facebook SDK, React Native FBSDK enables seamless access to a wide range of native components. From essential features like login and sharing to advanced functionalities, React Native FBSDK offers a comprehensive solution for incorporating Facebook into your React Native projects.

Whether you're looking to implement social login, share content on Facebook, or leverage other Facebook features, React Native FBSDK provides a comprehensive solution.

Installation

To utilize this library effectively, it is crucial to ensure compatibility with the specific version of React Native that you are employing.

• For react-native-fbsdk version >= 1.0.0, the required React Native version is >= 0.60.
• For react-native-fbsdk version <= 0.10, the required React Native version is <= 0.59.x.

Install the library using the below commands.

For Yarn users:

For NPM users:

Configurations

Android

To initiate the project, it is essential to refer to the Getting Started Guide provided by Facebook Android SDK. The guide will assist in setting up a Facebook app. While the build.gradle modifications are not necessary due to the preceding rnpm link step, it is important to adhere to the remaining instructions, which include updating strings.xml and AndroidManifest.xml.

iOS

When utilizing React Native's RCTLinkingManager, it is important to note that the AppDelegate.m file should contain only a single openUrl method. Therefore, if you are incorporating RCTLinkingManager to manage deep links, it is advisable to handle both outcomes within your openUrl function.

Usage

To link the package to your project. Since react-native-fbsdk includes native code, you need to link it to your project.

Run the following command:

Configure the SDK. Facebook requires some configuration to use their SDK. Follow the configuration instructions provided by react-native-fbsdk based on your target platform (iOS or Android). These instructions usually involve updating specific files and adding app keys or credentials, which we have covered in the Configurations section.

Use the SDK in your code. react-native-fbsdk provides components and functions to integrate with Facebook's features such as login, sharing, and analytics. Import the required components/functions from the package and use them in your React Native code as per the provided documentation.

, For example,, to use the LoginButton component for Facebook login, import the required components and functions from react-native-fbsdk:

Create a component that will handle the Facebook login functionality:

Use the FacebookLogin component in your main app component:

In this example, the FacebookLogin component renders a button labelled "Login with Facebook." When the button is pressed, the handleFacebookLogin function is triggered.

Inside handleFacebookLogin, we use LoginManager.logInWithPermissions to initiate the Facebook login process. The function takes an array of permissions that your app requests from the user, such as public_profile and email.

If the login is successful, we obtain the access token using AccessToken.getCurrentAccessToken. This access token can be used to make API calls to the Facebook Graph API. If the login is cancelled by the user or an error occurs, appropriate alerts are displayed using Alert.alert.

Examples

In this example, we will be creating the UserProfile component that displays the user's profile information after successful login with Facebook. It includes the user's name, email, ID, and profile picture.

Import the necessary modules from react-native and react-native-fbsdk:

Define the UserProfile component as a functional component:

Inside the UserProfile component, there is a state variable userInfo which will store the user's profile information. The useEffect hook is used to fetch the user's profile information when the component mounts.

The fetchUserProfile function uses the GraphRequest and GraphRequestManager from react-native-fbsdk to send a request to the Facebook Graph API to fetch the user's profile. The requested fields include the user's ID, name, email, and profile picture.

The handleFacebookLogin function is triggered when the user clicks on the Facebook login button. It uses LoginManager.logInWithPermissions from react-native-fbsdk to initiate the login process with the required permissions. If the login is successful, it retrieves the access token, fetches the user's profile, and displays an alert with the access token.

The handleFacebookLogout function is triggered when the user clicks on the logout button. It uses LoginManager.logOut to log the user out and clears the user information stored in the state.